ajax speed - boiling down multiple ajax calls - javascript

I have a search filter on my site whereby when a user unchecks a box, an ajax call is posted to the server, returning new, narrowed down search results.
now, however, the user has the ability to uncheck about 20 boxes at the same time, which forces me to make 20 different ajax calls -- this is very slow
any ideas on how to pass the 20 different ajax calls into one so as to speed up things?
here is my js:
// to allow us to process the "only" buttons, which don't register the click event we're looking for
$("input[type=checkbox]").change(function() {
// remove the original, unfiltered results
$('#original_results').css("display", "none");
// which filter section does the filter belong to
var filter_section = $(this).attr('name');
// should it be filtered out or left in
var remove = $(this).prop('checked');
// if needs to be filtered
if (!remove)
{
// add it to our filter list for the specified section
filters[filter_section].push(this.value);
}
else
{
// take it off the list for the specified section
var index = filters[filter_section].indexOf(this.value);
if (index > -1)
{
filters[filter_section].splice(index, 1);
}
}
doAjax();
});
// ajax function
function doAjax() {
// get slider values
var ranges = $('#pay_range').slider('values');
// define data to post
var data = {
min: ranges[0],
max: ranges[1],
filters: filters,
criteria: criteria
};
// post data
$.ajax({
type: 'POST',
url: '/results/search_filter',
data: data,
beforeSend: function() {
$('#search_results').html('Updating your query');
},
success: function(response) {
$('#search_results').html(response);
},
dataType: "html"
});
}

As I understand it, you want your AJAX call to only happen once per action, even if the action includes changing multiple checkboxes.
I've achieved this using javascript's setTimeout() to "buffer" events. When a checkbox is changed, a short timeout is set which will fire the AJAX. If another checkbox is changed within that time period, the timeout will be re-set (instead of firing the AJAX twice). The AJAX only fires once at the end of the timeout.
// initialize timer variable
var ajaxtimer;
// function to run AJAX
function runajax() {
alert('ajax');
}
// clicking a checkbox sets all checkboxes to the same state
$("input[type=checkbox]").on('click', function () {
$('input[type=checkbox]').prop('checked', this.checked).change();
});
// fires on checkbox change, sets short timeout
$("input[type=checkbox]").on('change', function () {
clearTimeout(ajaxtimer);
ajaxtimer = setTimeout(runajax, 50);
});
WORKING EXAMPLE (jsfiddle)
Edit:
I saw the link you posted and made the following adjustments:
I defined this variable at the top of the file:
var ajaxtimer;
On line 156 of results.js, I changed:
doAjax();
to
clearTimeout(ajaxtimer);
ajaxtimer=setTimeout(doAjax,50);
Here's a jsfiddle. The layout is butchered, but you can see that clicking an "only" link results in only one ajax call, rather than one call for every checkbox that was changed.

Related

Javascript does not work on returned ajax results

I have an ajax call that returns html. This works well on changes. What does not work though is the javascript I have that does stuff based on clicks in the returned results.
The ajax call is:
function update_order_shipping(){
$.ajax({
url: 'ajax_order_shipping.php',
method: "post",
dataType: 'html',
success: function (result) {
$('#shipping-method').html(result);
},
error: function(xhr, status, error) {
//alert(xhr.responseText);
}
});
};
This works well. Returns the exact results I need.
The issue is that these returned results also have radio buttons and on change I perform this javascript:
$('input[name="shipping"]').change(function() {
if($(this).is(':checked') && ( $(this).val() == 'freeamount_freeamount' ) ){
document.getElementById('fedex_number').style.display="none";
document.getElementById('ups_number').style.display="none";
document.getElementById('your_shipping_conditions').style.display="none";
var shipping_method = document.getElementById('text-freeamount').innerText;
document.getElementById('text-shipping').innerHTML = shipping_method;
var shipping_value = document.getElementById('value-freeamount').innerText;
document.getElementById('value-shipping').innerHTML = shipping_value;
}
});
Now on initial page load this works great, but the returned results which is identical html as the intial page load, the javascript fails to work. I understand it has to do with binding or something like that, but not quite sure how to implement it, so that results will always use the javascipt.
You need to use on to bind events to dynamically created elements.
$("body").on("change", "input[name='shipping']", function(event) {
// stuff here
});
"body" can be replaced with any non-dynamic element that's an ancestor of your input.
Any matching events will automatically listen for the change event, whether the element was added at the start or later.

Problem selecting an item after building the select options with AJAX

I use this javascript to select a specific option (the option value being specified within a hidden element):
$("select").each(function() {
var id = $(this).attr('id');
var source = 'input:hidden[name=select_'+id+']';
if ($(source).length) {
var selected = $(source).val();
$(this).val(selected).change();
}
});
This works fine when the options are hard coded in the HTML source.
I now need to populate the options with an AJAX call, I use the below method:
select : function(ctrl,id) {
var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
$.getJSON(call, function(result) {
$.each(result, function() {
$('#'+id).append($("<option />").val(this.id).text(this.title));
});
});
},
I process the select method (AJAX) on page load, and the options populate fine. But when I then try to select the desired option, the browser defaults to the first option.
I have tested what is happening by sticking some alerts around the code as thus:
alert($(this).val(selected)); // A
alert($(this).val()); // B
$(this).val(selected).change();
alert($(this).val()); // C
When the options are hard coded I get A=3, B=null, C=3 i.e. it works
When the options are populated via AJAX I get A=3, B=null, C=null i.e. it fails
I am guessing that I need to trigger some kind of change() event after populating the option list with AJAX. I have tried (a bit overkill I know):
$('#'+id).append($("<option />").val(this.id).text(this.title).change());
&
$('#'+id).append($("<option />").val(this.id).text(this.title)).change();
Any ideas? Thx
Problem solved.
Although I was triggering the code in the correct order (in theory), because of javascripts event driven behaviour the AJAX call was not completing until after my select initialisation had finished. So I moved the code to set the selected option into the AJAX call and voila.
select : function(ctrl,id) {
var call = '/'+ctrl+'/'+$("#auth input[name=verify]").val();
$.getJSON(call, function(result) {
$.each(result, function() {
$('#'+id).append($("<option />").val(this.id).text(this.title));
});
var source = 'input:hidden[name=select_'+id+']';
if ($(source).length) {
var selected = $(source).val();
$('#'+id).val(selected).change();
}
});

How to select option from second select after it loads with javascript?

Yeah, I know, likely been answered, but can't find it or figure out how to successfully search for it, so, 45 minutes later i am succumbing to the potential of flaming...so go easy on me, ok?
It is a simple problem, and my issue is timing. One select holds Countries, it is bound to State/Province select. Change Country, State/Province loads appropriately via a separate function. Use a mouse to select from State/Province, perfection. Use JavaScript ..uh oh. Problem is I need to force my JavaScript to wait for the browser to load the State/Province data before I can target and select it. SetTimeout or using a Promise just seems... inelegant? How many seconds does a browser need to load 50 states or 8 provinces - on a new rocket or an old turtle? Is there a way to just know when the second select finishes loading when the load is in a separate function? Example is jquery, but any flavor will do.
$('#country option[value=US]').prop('selected', 'selected').change();
$('#stp option[value=VT]').prop('selected', 'selected').change();
Adding more clarification based on the responses so far.
Whena user changes the Country, the State/Province loads in the time it takes them to move their mouse down the page allowing them to select.
Now I have implemented a helper that pulls the user's address from BigData using a phone number. This happens in a dialog box. When the user clicks "Accept" this code then fires
function setFormwithDF(){
d={};
// data from dialog
d.address=$('#oaddress').text();
d.city=$('#ocity').text();
d.state=$('#ostate').text();
d.zip=$('#ozip').text();
d.country=$('#ocountry').text();
$('#s_country option[value='+d.country+']').prop('selected', 'selected').trigger('change');
// doesn't matter if this is .change() or .trigger('change')
$('#s_addr1').val(d.address).change();
$('#s_addr2').val('').change();
$('#s_city').val(d.city).change();
$('#s_st option[value='+d.state+']').delay(3000).prop('selected', 'selected');console.log(d.state);//getting a good value here - delay is desperation
$('#s_zip').val(d.zip);
$('#s_phone').val($('#dfsearch').val());
$( "#dfsearchdialog" ).dialog('close');
}
And for completeness, here is the loading code. Bunch of extras in here that don't pertain to the issue though
$('#s_country,#b_country').change(function(e){
var st="";
var addrType="S";
var loadObj=$('#shipstp');
if( $(this).attr("id") == 'b_country'){
loadObj=$('#billstp');
addrType="B";
}
if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}// this data is passed during the trigger() code
uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
uParam=$.param(uObj);
loadObj.load('/stubs/state-n-province.cfm',uParam);
});
As per my understanding, you dont want user to select state until the state's are getting loaded. After loading only user should be able to select the state.
And I am assuming you are using AJAX to load the State.
If this is the issue :
you can use loading image, which will be displayed until the success has not been return and data has not been map to element.
In this case you can use below sample code :
function getData(p){
.......
$('#loadingmessage').show(); // show the loading message.
$.ajax({
url: "loadData.php?id=<? echo $id; ?>",
type: "POST",
cache: false,
data: "&page="+ page,
success : function(html){
$(".content").html(html);
$('#loadingmessage').hide(); // hide the loading message
}
});
I believe a Promise is what you need. It will allow you exactly
to just know when the second select finishes loading when the load is
in a separate function
$('#country').change(function() {
$("#stp").empty().append("<option>...</option>");
loadStates($(this).val())
.then(states => $("#stp")
.empty()
.append(states.reduce((acc, cur) => acc + `<option>${cur}</option>`, "")));
});
$('#country').change();
function loadStates(country) {
console.log(`Loading states for country: ${country}...`);
//setTimeout here just emulates your long loading process
return new Promise((res, rej) => setTimeout(() => {
console.log(`States for country: ${country} are loaded!`);
res(["state1", "state2", "state3"]);
}, 3000));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="country">
<option>US</option>
<option>UK</option>
<option>RU</option>
</select>
<select id="stp">
</select>
For your actual use case you would write something like:
return new Promise((resolve, reject) => {
var states = yourLoadingFunction();
resolve(states);
});
UPDATE: Given your latest example, I think I understand your problem now. I suggest you to put your loading code into a separate function, for example:
function countryChanged(e, callback) {
var st="";
var addrType="S";
var loadObj=$('#shipstp');
if( $(this).attr("id") == 'b_country'){
loadObj=$('#billstp');
addrType="B";
}
loadObj.prop("disabled", true);
// this data is passed during the trigger() code
if( typeof(e.st) != 'undefined'){st=e.st;console.log(5)}
uObj={c:$(this).val(),nc:Math.random(),t:addrType,p:st};
uParam=$.param(uObj);
loadObj.load('/stubs/state-n-province.cfm', uParam, function() {
// when the loading is complete, we enable the second select and
// call the callback function
loadObj.prop("disabled", false);
if (callback) callback();
});
}
Note that jQuery .load() method has a third argument which is a callback function that will be called when the loading is complete.
Then you can use this function in two ways:
1) when the user changes the country:
$('#s_country,#b_country').change(countryChanged);
2) in your setFormwithDF() function:
function setFormwithDF(){
d={};
// data from dialog
d.address=$('#oaddress').text();
d.city=$('#ocity').text();
d.state=$('#ostate').text();
d.zip=$('#ozip').text();
d.country=$('#ocountry').text();
$('#s_country option[value='+d.country+']').prop('selected', 'selected');
//instead of calling .trigger('change') just call countryChanged function
countryChanged({st: "whatever you pass during the trigger() code"}, function() {
//this will happen only after .load() is complete
$('#s_st option[value='+d.state+']').prop('selected', 'selected');
});
$('#s_addr1').val(d.address).change();
$('#s_addr2').val('').change();
$('#s_city').val(d.city).change();
$('#s_zip').val(d.zip);
$('#s_phone').val($('#dfsearch').val());
$( "#dfsearchdialog" ).dialog('close');
}

Appending new results to an open jQuery autocomplete menu

I have an app in which I have multiple search sources. Previously, the users had to choose in what source to search in before searching. If they did not choose, the app would default to one of the options.
However, now they want to search in all the sources at the same time. This is fine enough, but the problem is that when one of the searches returns, it overwrites the previous search result. Pretty much expected behavior. What I basically want is to append the new results to the already open autocomplete menu, instead of overwriting the old results. Naturally, the autocomplete menu would have to empty when it closes.
I guess that this is possible to do, but what approach is the best? I could just have an array I guess, which I append results to and then overwrite _renderMenu to use this array instead of the items one that is passed to the function. Then empty said array at the close event.
Is this the best way to go though? Or is there a more elegant solution?
Some code:
Ok, so searchAction is called by jquery autocomplete eventually. In collection.search I do the ajax call, here the URL is created based in the this parameter, then respondWhithData is called and maps the search result to a proper format (ie value and label for the autocomplete menu). After reponse is called from respondWithData, jquery automagically renders the resultsmenu. Thus, I probably have to overwrite the reponse event function as well as the _renderMenu and possibly _renderItem, yes?
searchAction: function(searchTerm, collection, response){
var self = this;
$.when(collection.search(searchTerm, this)).then(function(data) {
self.respondWithData(data, response);
});
},
respondWithData : function(data, response) {
if (data.length > 0) {
var responseVal = _.map(data, this.mapData);
this.checkResponseCount(responseVal);
response(responseVal);
}
else {
response(this.emptyResult());
}
},
To be clear, the problem is not the multiple search itself, but rendering the asynchronos results. I want to render the first results that come back, and then appends the rest as soon as they are returned from the server.
Edit 2:
Just tried to edit ui.content in the autocompleteresponse event, but any edit does not take once it renders for some reason...
Edit 3: Ah, ui.content can only be modified directly, not changed. If I push every single change instead of concating two arrays ui.content shows what I want.
It works I guess, but its not perfect.
I can figure how looks your scenario but I'm guessing:
You should have like:
function search1() {
$.ajax({ ...
success: function(data) {
$('#myResultsDiv").html(data)
}
});
}
etc
Instead of overwritting the #myResultsDiv you need to Append the results like:
function search1() {
$.ajax({ ...
success: function(data) {
$('#myResultsDiv").append(data)
}
});
}
Edit: You can also do something like this:
var resultsArray = [];
var searchDone = 0;
var totalSearchs = 5; //assuming 5 searches
function search1() {
function search1() {
$.ajax({ ...
success: function(data) {
//APPEND data to resultsArray
searchDone++;
if(searchDone==totalSearch) //syncronize the 5 searchs before render
renderSearchs(resultsArray);
}
});
}

How to reset pagination in a JQuery datatable

I have a JQuery datatable that loads data via an ajax request. There is a form by the table that lets the user filter the results on the server. When the user changes the filter form, I call fnReloadAjax() with the new filter data, and the table redraws with the new, filtered results.
The problem I have is that the pagination sticks, even if the table no longer has enough items to reach the current page. So if the table originally had 20 items, and the user was on page 2 (10 items per page), and they change the filter so only 5 items are returned, the table displays no items and shows this at the bottom:
Showing 11 to 5 of 5 entries
It's still on page 2 even though there is only enough data for one page.
I have found numerous posts about trying to preserve the current page/row, but none showing a simple way to reset pagination to the first page. What is the simplest way to do this?
Here's a simplified version of my code for clarity:
$("#mytable").dataTable({
bStateSave: false,
fnServerData: function (sSource, aoData, fnCallback) {
return $.ajax({
type: "POST",
url: url,
data: {filter: filterValue}
});
}
});
$("#myForm").submit(function(e) {
table.fnReloadAjax();
return false;
});
You could explicitly jump to the first page after reloading, see http://datatables.net/api#fnPageChange
$("#myForm").submit(function(e) {
table.fnPageChange(0);
table.fnReloadAjax();
return false;
});
Accepting the solution given by #Gigo:
$("#myForm").submit(function(e) {
table.fnPageChange(0);
table.fnReloadAjax();
return false;
});
This have a problem, it sends two request to the server.
i have found that the fnPageChange does it at the first time.
$("#myForm").submit(function(e) {
table.fnPageChange(0);
return false;
});
This can be solved by implementing the functions to save and load the state of the datatable and resetting the start point - example below
"fnStateSave": function (oSettings, oData) {
localStorage.setItem( 'MyDataTable', JSON.stringify(oData) );
},
"fnStateLoad": function (oSettings) {
var settings = JSON.parse( localStorage.getItem('MyDataTable') );
settings.iStart = 0; // resets to first page of results
return settings
},
As fnStateLoad is called when the table is reloaded - e.g. a new filter is applied - the paging is reset to the start.
fnStateSave is called each time you retrieve the next page of results
This approach avoids the overhead of an additional request back to the server

Categories