I need to create multiple search requests in Jquery which searches from different tables/pages and I need to combine all the search results to one HTML table and show the results in UI.
Below is my approach..
Using $.ajax in Jquery, I go to the server (.Net Code), fetch JSON data, come back to the JS file and build a HTML table and display result (this result will have checkbox for user to check/uncheck the results). Once I display results, I again use $.ajax, go to server (.NET Code) and get data and will append the results to the first HTML table.
My requirement is, between these 2 requests I need to
1) Show a Loading image/text.
2) The user should be able to access (scroll, check, uncheck) the HTML table results returned by 1st JSON request.
I am able to accomplish 1) also. The problem I am facing is regarding 2).
Once the results come from 1st request and once I display the results in a div, I again trigger the 2nd search request using $.ajax. At this time I am not able to access the HTML table. The page freezes until the results from the second request come and till I bind the results to HTML table.
My code is something like this.
function SearchDetails() {
GetDetails("Test", 0); /*Trigger First Request*/ }
function GetDetails(searchKeyword, iAppend) {
$.ajax({
type: "POST",
url: "FETCH_DETAILS.asmx/GetDetails",
data: "{'searchKeyword':'" + searchKeyword + "', 'Append':'" + iAppend + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: false,
crossDomain: true,
jsonp: false,
success: function (response) {
if(iAppend == 0) //First Request
{
BindTable(response.d, iAppend); //Creates new HTML table and binds results
GetDetails("TestNew", 1);//Trigger Second Request
}
else if (iAppend == 1) {
BindTable(response.d, iAppend);
}
},
failure: function (msg) {
alert(msg);
},
});}
function BindTable(SearchResults, iAppend){
/*Creates HTML Table & binds to a div for First Request
Creates HTML Table Rowss & appends to existing HTML table for Second Request*/ }
Please suggest me whether i am missing anything or is there a way to go to server(.NET code) from Jquery without affecting (getting freeze) the display/UI.
Perhaps set the:
async: false
to
async: true
Related
Basically I have a C# web service method that helps to generate HTML code and return it as a string. Now I would like to grab the HTML string from this method and replace a particular div.
function replaceHTML(ID) {
var gID = ID;
$.ajax({
type: "get",
contentType: //what should it be,
url: "the method location",
data: {"ID" : gID },
dataType: //what should it be,
success: function (data) {
$('#Div ID').empty();
$('#Div ID').html(data);
}
});
}
What should be the content Type and data Type? Am I doing it correctly?
Well it all depends on what your web service is providing you and since we cannot see the web service call, we cannot tell you.
In every average web service it should be specified what type of data it communicates with, whether json, xml, or plain text.
Usually though, it will be xml unless something else is specified because web services are SOAP based and are xml formatted, but you should check your web service or share it's code with us.
contentType is the type of data you send to the server, so it'll be application/json in your case. Not nessecary to provide that info though, jQuery will detect it based on the contents of data.
dataType is the type you expect the server to return, so you set it to text/html.
Also, see:
http://api.jquery.com/jquery.ajax/
Hope this will work for you :).
function replaceHTML(ID) {
var gID = ID;
$.ajax({
type: "get",
contentType: 'text',//what should it be,
url: "the method location",
data: JSON.stringify({"ID" : gID }),
dataType: "application/json; charset=utf-8",,
success: function (data) {
$('#Div ID').empty();
$('#Div ID').html(data);
}
}
I have an AJAX POST request which is supposed to send a user's search filters off to a controller action and return appropriate results. This was working perfectly, then it just stopped working. I haven't changed a thing, it was working fine, the model was binding exactly as intended, then it just broke and now it will only bind to the non-array items.
Here is my full Jquery AJAX code:
var parent = $('.recipe-search > .search-form > .filter-panel > .area');
var searchobj = {
SearchTerm: $(parent).find('input.search-terms').val(),
TimeRange:
[
$(parent).find('div.time-range').slider("values", 0),
$(parent).find('div.time-range').slider("values", 1)
],
DifficultyRange: [
$(parent).find('div.difficulty-range').slider("values", 0),
$(parent).find('div.difficulty-range').slider("values", 1)
],
Vegetarian: $(parent).find('input.vegetarian').is(':checked'),
Vegan: $(parent).find('input.vegan').is(':checked'),
DietTags: $(parent).find('input.diet-tags').val().split(' ')
};
$.ajax({
type: "POST",
url: $('.recipe-search > .search-form').attr('action'),
data: searchobj,
error: function () {
alert("There was an error getting your search results, please try again");
},
success: function (result) {
popresults(result);
}
});
Here is the C# model:
For anyone wondering the sliders are JQuery UI sliders.
In the Chrome networking tab, I can see the request gets sent off as intended
However looking at the debug watch window when a breakpoint is hit, it is clear that they are not being bound to the model correctly
I'll repeat myself, and I know some of you will call me out on this saying that I did change something, I must have, but I did not change a thing between it working exactly as intended, and it not working.
Something that does strike me as odd is that the arrays sent in the request (look at the network tab photo) appear to be sending the two values as individual properties instead of values in an array.
Well it seems that adding two lines to the AJAX code fixed this:
datatype: "json",
traditional: true
Now it works completely as intended.
I'm trying to do something that's very new to me. I've done some digging but what I've come up with only had solutions by using some kind of .aspx page to process forms.
What I'd like to do is send some form input via ajax (I'm using jquery) to the server to be processed by c#.
This is, I believe, a fairly general question. It doesn't have to do with submitting form input specifically, but more about how to send some data to be processed by c# in the backend.
I want to make an ajax POST to a certain page for processing such as this:
$.ajax({
type: "POST",
url: "****???****",
data: { name: "Bob", gender: "Male" },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var names = response.d;
alert(names);
}
});
Now, my question is, what kind of file/page can I use for the url value in the above ajax call, that will be able to handle the POSTed data using c#?
All the examples I've seen use a .aspx page that processes the form and sends it to a .cs code-behind page. If possible, I'd like to be able to use something other than an .aspx page.
The site I'm working on is using just HTML as I'm working with angular. Is there any other way I can handle ajax on the server in a way that I can use c#?
To be very specific, I'm trying to setup a registration page where a user puts in their username and password. I need the password to be sent to the server to have a hash and salt created in C#.
Thanks, and please let me know if you need any additional information to continue.
Try this
In code behind file:Default.aspx.cs
[WebMethod]
public static void GenerateHash(string name,string password)
{
//Write logic to generate hash
}
.aspx page
$.ajax({
type: "POST",
url: "Default.aspx/GenerateHash",
data: { name: "xxx", password: "xxxx" },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var names = response.d;
alert(names);
}
});
I'd like to ask if somebody has the idea on how to auto feed in the data to your webpage. What I mean is, if I'm uploading data to my website I want to automatically display it to the other page which is displayed in a separate tab because I have a photo gallery page and I want to see my uploaded files in that page without hitting the refresh button of the browser. All I've got right now is the auto-refresh codes but that doesn't apply it to this scenario. Other example is the news feed of your facebook. If your friend is posting something then it automatically be displayed to your news feed page, that is what I'm trying to get...I hope somebody can get my point. Thanks in advance.
Here is the "cool" stuff for realtime web in. Net: http://signalr.net/
You can make an AJAX call every, let's say, 5 seconds.
If you are using Jquery in your site, you can try:
var seconds = 5;
setInterval(function(){
$.ajax({
url: urlToHandler,
data: jsonData,
dataType: 'json',
type: 'POST',
contentType: 'application/json',
success: function(data) {
$('#container').html(data.html)
},
error: function(data, status, jqXHR) {
console.log('There was an error.');
}
}); // end $.ajax
}, seconds * 1000)
I am very new into ajax and i am having a strange problem, I have created an asp.net website that have a web service within the project I am calling this web service by following ajax code:
$.ajax({
type: "POST",
url: pageUrl + "/PassData",
data: JSON.stringify({ aos_code: code }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccessCall
});
the c# code is not very complicated, basically it will get the code and call the stored procedure and return some value:
[WebMethod(EnableSession = true)]
public string[] PassData(string aos_code)
{
// calling the database and returning some data
return data;
}
And it works fine; the problem is that if two different users accessing the application in the two different computers and let say they clicking a button at the same time to call the server side function via Ajax, it will return the “500 internal server error”.
I am not sure how exactly Ajax work, is request are belong to same session or all user requesting a single function?
Hope it makes sense, and I would really do appreciate for the clarification and help.
Regards,
Error 500 indicates that something went wrong on the server side. Check your console (firebug or similar) to see what exactly happened and try to fix it. Ajax has nothing to do with it, it is simply as if two users visited the same page at the same time.