I am trying to pass extra parameters through to my ashx when using Jquery UI auto complete.
I have seen lots of examples and have spent ages fiddling but I can't get mine to work.
I have two auto complete textboxes, what ever is entered in the first one needs to narrow down the search for the second one.
On my first autocomplete textbox all works fine and the ID that is returned is set to a hidden field.
$("#<%=txtSearch1.ClientID%>").autocomplete('/Search1.ashx');
$('#<%=txtSearch1.ClientID%>').result(function (event, data, formatted)
{
if (data) {
var id = data[1];
$("#<%=hdnSearched1.ClientID%>").val(id);
}
});
I want to use the value of the hidden field along with the value the user enters into the second textbox to do the search for the second auto complete
I first tried this:
$("#<%=txtSearch2.ClientID%>").autocomplete('/Search2.ashx',{
extraParams: { "Id": $("#<%=hdnSearched1.ClientID%>").val() }});
This fired my ashx but the Id in the extraparams was blank. A bit of googling told me this was because it was set when the page loaded so the value for the extra param was set before I set the value of the hidden field.
I did a bit more fiddling and searching and came up with something like this which a lot of people seem to be using.
$('#<%=this.txtSearch2.ClientID %>').autocomplete({
source: function (request, response)
{
$.ajax({
url: '/Search2.ashx',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
data: {
term: request.term,
sId: $("#<%=hdnSearched1.ClientID%>").val()
},
success: function (data)
{
response(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert(textStatus);
}
});
}
});
The problem is this doesn't even fire the ashx! I have been fiddling about with this for ages, following example after example but I can't seem to work what I am doing wrong!
I'm sure it must be obvious!
Can anyone help?
Related
I've assembled a page as a proof-of-concept for retrieving matching user names from Active Directory (via a web service on out intranet) while typing values into a text box. It works beautifully, but only on my workstation and only in IE (version 10). Every other user who has tried it gets the alert, "error", which is also what I get when I try it in Chrome. I've further verified that the other users can actually retrieve the data by pasting the web service URL directly into their browsers, so the breakdown occurs somewhere between fetching the data and displaying in the form. My only thought was that maybe there are some browser settings responsible for allowing this to work, but I really have no idea what those might be.
Here's what the code looks like:
<div>
<h1>Active Directory lookup</h1>
<input name="txtADAccount" type="text" id="txtADAccount" style="width:400px;" />
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#txtADAccount").autocomplete({
source: function (request, response) {
$.support.cors = true;
$.ajax({
crossDomain: true,
headers: { 'Access-Control-Allow-Origin': '*' },
url: "http://fetch.mycompany.com/ADUser/ADUserByAccountOrDisplayName/" + $('#txtADAccount').val(),
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
var jsonData = JSON.parse(data);
// Filter out records where there is no email address
var jsonFiltered = jsonData.result.filter(function (row) {
if(row.mail != '') {
return true
} else {
return false;
}
});
response($.map(jsonFiltered, function (item) {
return { label: item.displayName + ' (' + item.mail + ')' }
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ': ' + errorThrown);
}
});
},
select: function (event, ui) {
// prevent autocomplete from updating the textbox
event.preventDefault();
$(this).val(ui.item.label);
},
minLength: 2 //minLength as 2, it means when ever user enter 2 character in TextBox the AutoComplete method will fire and get its source data.
});
});
</script>
</body>
Just looking for some hints as to what the source of the problem might be.
UPDATE: Updating the script links to the latest versions of jquery and jquery.ui resulted in it working on at least one more workstation that didn't work previously. However, it's still not working on any other machines I've tried and the error messages displayed are not consistent. Sometimes it just displays "error", other times "error: No Transport", and other times "error: Access is Denied".
UPDATE 2: On this second workstation where I've been able to get it working, I noticed that if I log in using a different account, I get the "error: Access is denied" message. This is puzzling... to what exactly is access being denied? It's not the web service itself because any user can drop the web service URL into their browser and it will return the appropriate json data.
UPDATE 3: I just discovered that changing the contentType to "application/x-www-form-urlencoded; charset=utf-8" has resulted in it working now for several other users as well as working for me now in Chrome. It's still not working for at least two users, one using IE who gets no message whatsoever, and another who is still getting the "Access is denied" message (I may need to have them try clearing their browser cache). I'm still baffled as to why it always worked for me alone regardless of the contentType setting.
i have a form which includes list of records. When user clicks edit image on table modal div will show to him. i get this modal div with ajax. Now after changing some fields i am posting it via ajax. I watched to firebug. it sends parameter. But when i debug code in VS method calls but no parameter has been send. i have done it before in other pages. but now i can not. What problem can be here in my code?
C# Code here
[HttpPost]
//[Authorize(Roles = "Operator")]
public ActionResult EditRow(string Name, string SecondName)
{
//code goes here
return Content("Saved");
}
jquery ajax code is here
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: 'EditRow',
data: { Name: "php", SecondName: "MVC" },
dataType: 'html',
success: function (response) {
//some code goes here
}
});
Have you tried to simplify your Ajax call to:
$.ajax({
type: 'POST',
url: 'EditRow',
data: { Name: "php", SecondName: "MVC" },
success: function (response) {
//some code goes here
}
});
If this doesn't work there must be something else in your code that makes your code invalid. Maybe some base controller action filters you forgot to put there or some custom model binders or some other global registration.
Sending complex JSON to server
If you'd like to send complex JSON using the same technique, you can read my blog post and use the simple plugin that will make it possible to send complex JSON objects to Asp.net MVC controller action.
I want to display a circular progress indicator using jquery in asp.net when textbox textchange event occurs. When user enters some value in a textbox and textchange event occurs or when user loses the focus on that textbox, system checks values in databases. I want to give user a progress indicator type when query is in progress.
How can I accomplish this with jquery?
Code here:
$("#Txturl").blur(function() {
$.ajax({
type: "POST",
url: "Default.aspx/Getvalue",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
success: function(msg) {
///to to do here? i ve no idea;
}
});
return false;
});
This is relatively straightforward. You would start by creating the animated GIF for your indicator (or download a freely available one) and add it to your site. Then in your Javascript, you would add something closely resembling the following:
$('#yourTextBox').change(
function(){
$("#yourProgressImg").show();
$.ajax({
type : "get",
url : <your request uri>,
success: <what to do if it comes back happy>
fail: <what to do if it fails>
complete: function(){ $("#yourProgressImg").hide(); }
});
}
);
The complete functionality of the $.ajax() function is here: http://api.jquery.com/jQuery.ajax/
Not sure how every other site does it, but I would show an animated GIF on the textchange event and hide it in the AJAX success (or failure) function.
Have a hidden div with your animated GIF.
<style>.hidden { display: none; }</style>
<div class="hidden"><img src="spinner.gif" /></div>
Then show it on change and hide it in the success or error callback.
$('#mytextbox').change(function(){
$('#divwithGIF').show();
$.ajax({
type: 'POST',
url: 'Default.aspx/Getvalue',
data: '{}',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
async: true,
complete: function(msg){
$('#divwithGIF').hide();
};
});
});
Repeat for the blur() event.
See my answer on this one: jquery submit and loading gif for an example of how you can construct a global (on the page) event monitor for ajax to display an animated gif as you describe. You can customize this as you wish for your events.
I have a gridview control with delete asp:ImageButton for each row of the grid. What I would like is for a jquery dialog to pop up when a user clicks the delete button to ask if they are sure they want to delete it.
So far I have the dialog coming up just fine, Ive got buttons on that dialog and I can make the buttons call server side methods but its getting the dialog to know the ID of the row that the user has selected and then passing that to the server side code.
The button in the page row is currently just an 'a' tag with the id 'dialog_link'. The jquery on the page looks like this:
$("button").button();
$("#DeleteButton").click(function () {
$.ajax({
type: "POST",
url: "ManageUsers.aspx/DeleteUser",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Replace the div's content with the page method's return.
$("#DeleteButton").text(msg.d);
}
});
});
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
bgiframe: true
});
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
The dialog itself is just a set of 'div' tags.
Ive thought of lots of different ways of doing this (parameter passing, session variable etc...) but cant figure out how to get any of them working.
Any ideas are most welcome
As always, thanks in advance to those who contribute.
I've recently done something exactly the same at work - confirmation of a delete item. I solved it by using the Data http://docs.jquery.com/Data method to store the value I wanted to pass along.
So for example my delete links had the following:
Delete
Then monitor all clicks on for class "delete", when this happens set the data on the dialog:
$("#dialog").data("id", $(this).attr("id"));
Which will then be accessible when you're in your dialog.
$("#dialog-confirm").dialog({
resizable: false,
height:140,
modal: true,
buttons: {
'Delete': function() {
alert($(this).data('id'));
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
Hope this helps, shout if it's not clear.
I want to refresh only a single part of my page not the whole.
How ?
I wouldn't recommend Update Panel but you can use jQuery $.load() method which is pretty slick. Once you start using it, it helps you a lot.
So use Ajax... long story short.
Edit :
Maybe this article help as well :
Why Update Panels are Dangerous :
http://encosia.com/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
In web forms you can use the update panel
See here for example
You can also use JQuery although it depends on what you are trying to do and to what complexity.
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "YourPage.aspx/apply",
dataType: "json",
data: json.stringify(""),
success: function (result) {
alert(result);
// window.location.href = "ClubCreation.aspx";
},
Error: function () {
alert('error');
}
});
[HttpPost]
public string apply()
{
return "Hi";
}
You can use Ajax to solve your problem this code will help you