We Keep Coding

JQuery $.post callback firing a function that never finishes

Here's the problem. I'm making a callback to the server that receives an MVC partial page. It's been working great, it calls the success function and all that. However, I'm calling a function after which iterates through specific elements:
$(".tool-fields.in div.collapse, .common-fields div.collapse").each(...)
Inside this, I'm checking for a specific attribute (custom one using data-) which is also working great; however; the iterator never finishes. No error messages are given, the program doesn't hold up. It just quits.
Here's the function with the iterator
function HideShow() {
$(".tool-fields.in div.collapse, .common-fields div.collapse").each(function () {
if (IsDataYesNoHide(this)) {
$(this).collapse("show");
}
else
$(this).collapse("hide");
});
alert("test");
}
Here's the function called in that, "IsDataYesNoHide":
function IsDataYesNoHide(element) {
var $element = $(element);
var datayesnohide = $element.attr("data-yes-no-hide");
if (datayesnohide !== undefined) {
var array = datayesnohide.split(";");
var returnAnswer = true;
for (var i in array) {
var answer = array[i].split("=")[1];
returnAnswer = returnAnswer && (answer.toLowerCase() === "true");
}
return returnAnswer;
}
else {
return false;
}
}
This is the way the attribute appears
data-yes-no-hide="pKanban_Val=true;pTwoBoxSystem_Val=true;"
EDIT: Per request, here is the jquery $.post
$.post(path + conPath + '/GrabDetails', $.param({ data: dataArr }, true), function (data) {
ToggleLoader(false); //Page load finished so the spinner should stop
if (data !== "") { //if we got anything back of if there wasn't a ghost record
$container.find(".container").first().append(data); //add the content
var $changes = $("#Changes"); //grab the changes
var $details = $("#details"); //grab the current
SplitPage($container, $details, $changes); //Just CSS changes
MoveApproveReject($changes); //Moves buttons to the left of the screen
MarkAsDifferent($changes, $details) //Adds the data- attribute and colors differences
}
else {
$(".Details .modal-content").removeClass("extra-wide"); //Normal page
$(".Details input[type=radio]").each(function () {
CheckOptionalFields(this);
});
}
HideShow(); //Hide or show fields by business logic
});
For a while, I thought the jquery collapse was breaking, but putting the simple alert('test') showed me what was happening. It just was never finishing.
Are there specific lengths of time a callback function can be called from a jquery postback? I'm loading everything in modal views which would indicate "oh maybe jquery is included twice", but I've already had that problem for other things and have made sure that it only ever includes once. As in the include is only once in the entire app and the layout is only applied to the main page.
I'm open to any possibilities.
Thanks!
~Brandon

Found the problem. I had a variable that was sometimes being set as undefined cause it to silently crash. I have no idea why there was no error message.

Jquery scroll is not picking changed variable value to be sent to ajax

I am not a regular programmer and has learnt whatever programming I know by google or by asking things here from Stackoverflow.
I am trying to create a ajax function which will fetch feeds from database on scrolling based on selected parameter. User can select either to select public feeds or personal feeds. His chosen value is updated in hidden text field. Code follows as below.
//feed menu switch between personal and public
$('.menu_selection').iCheck({
checkboxClass: 'icheckbox_square',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
$("body").on("ifChecked",".menu_selection",function(){
var feed_menu_selected = $(this).val();
$("#feed_menu_selected").val(feed_menu_selected);
$("#member_menu_area").html(loader);
IndexFeederLoader('0','0','0');
});
Now this is function which is fetching records where group_no is the record set being fetched, total_m_group is total number of records, feed_menu_selected is the choice between public or private.
function IndexFeederLoader(group_no,total_m_group,movie_shown){
var feed_menu_selected = $("#feed_menu_selected").val();
$.ajax({
url: '../index-feeds.php',
type: "POST",
dataType:"text",
data: 'feed_menu_selected='+feed_menu_selected+'&group_no='+group_no+'&movie_shown='+movie_shown,
cache: false,
async: false,
success: function(data){
if(group_no == 0)
{
$("#member_menu_area").html(data);
//when personal is checked and not signed in
var notsigned = $(data).filter('#notsigned').text();
if( notsigned !== '')
{
$("#SignInForPersonal").show();
}
}
else
{
$("#member_menu_area").append(data);
}
total_m_group = $("#total_page_no").text();
$("#total_m_group").remove(); // removing extra
movie_shown = $("#movie_shown").text();
$("#movie_shown").remove(); // removing extra
},
complete: function(){
$(window).on("scroll",function(){
var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 500);
var AtBottom = ($(window).scrollTop() + $(window).height() == $(document).height());
if (closeToBottom || AtBottom)
{
if( total_m_group != 0 )
{
if( group_no < total_m_group )
{
group_no++;
IndexFeederLoader(group_no,total_m_group,movie_shown); // group_no is not changing
}
}
else
{
group_no = 0;
}
}
});
},
error:function (xhr, ajaxOptions, thrownError){
alert(thrownError);
}
});
}
Now the problem. If I do not switch between public and personal, everything goes well and I get records in order of group_no set. But when I select personal and then come back to private, it does not work giving feeds from start but from where it has left. It seems like group_nois not changing.
Thanks for reading. It would be great if anyone can help me pls.

First problem i can see - in your $.ajax in complete callback you attach new event on $(window) each time it's executed. So when you execute 2 times it'll be 2 events called and so on. Change logic to attaching event once and changing context of it if it's needed.
Second - don't mix up variable types. You're executing IndexFeederLoader passing Strings, but using Numbers
JsFiddle to understand what's happening
So, like you're doing - i'm attaching an event over and over again, passing context variable. Try pressing button - it will fire a lot of different events with it's own context eventually. That is what probably causing bugs in your code.

Load Javascript into ajax loaded content

I am new to working with AJAX and have some experience with Java/Jquery. I have been looking around for an solution to my problem but i cant seem to find any.
I am trying to build a function in a webshop where the product will appear in a popup window instead of loading a new page.
I got it working by using this code:
$(".product-slot a").live('click', function() {
var myUrl = $(this).attr("href") + " #product-content";
$("#product-overlay-inner").load(myUrl, function() {
});
$("#product-overlay").fadeIn();
return false;
});
product-slot a = Link to the product in the category page.
product-content = the div i want to insert in the popup from the product page.
product-overlay-inner = The popup window.
product-overlay = The popup wrapper.
The problem that i now have is that my Javascript/Jquery isnt working in the productpopup. For example the lightbox for the product image or the button to add product to shoppingcart doesnt work. Is there anyway to make the javascript work inside the loaded content or to load javascript into the popup?
I hope you can understand what my problem is!
Thank you in advance!
EDIT: The platform im using has jquery-ui-1.7.2

I know this is an old thread but I've been working on a similar process with the same script loading problem and thought I'd share my version as another option.
I have a basic route handler for when a user clicks an anchor/button etc that I use to swap out the main content area of the site, in this example it's the ".page" class.
I then use a function to make an ajax call to get the html content as a partial, at the moment they are php files and they do some preliminary rendering server side to build the html but this isn't necessary.
The callback handles placing the new html and as I know what script I need I just append it to the bottom in a script tag created on the fly. If I have an error at the server I pass this back as content which may be just a key word that I can use to trigger a custom js method to print something more meaningful to the page.
here's a basic implementation based on the register route handler:
var register = function(){
$(".page").html("");
// use the getText ajax function to get the page content:
getText('partials/register.php', function(content) {
$(".page").html(content);
var script = document.createElement('script');
script.src = "js/register.js";
$(".page").append(script);
});
};
/******************************************
* Ajax helpers
******************************************/
// Issue a Http GET request for the contents of the specified Url.
// when the response arrives successfully, verify it's plain text
// and if so, pass it to the specified callback function
function getText(url, callback) {
var request = new XMLHttpRequest();
request.open("GET", url);
request.onreadystatechange = function() {
// if the request is complete and was successful -
if (request.readyState === 4 && request.status === 200) {
// check the content type:
var type = request.getResponseHeader("Content-Type");
if (type.match(/^text/)) {
callback(request.responseText);
}
}
};
// send it:
request.send(null); // nothing to send on GET requests.
}
I find this a good way to 'module-ize' my code into partial views and separated JavaScript files that can be swapped in/out of the page easily.
I will be working on a way to make this more dynamic and even cache these 'modules' for repeated use in an SPA scenario.
I'm relatively new to web dev so if you can see any problems with this or a safer/better way to do it I'm all ears :)

Yes you can load Javascript from a dynamic page, but not with load() as load strips any Javascript and inserts the raw HTML.
Solution: pull down raw page with a get and reattach any Javascript blocks.
Apologies that this is in Typescript, but you should get the idea (if anything, strongly-typed TypeScript is easier to read than plain Javascript):
_loadIntoPanel(panel: JQuery, url: string, callback?: { (): void; })
{
// Regular expression to match <script>...</script> block
var re = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
var scripts: string = "";
var match;
// Do an async AJAX get
$.ajax({
url: url,
type: "get",
success: function (data: string, status: string, xhr)
{
while (match = re.exec(data))
{
if (match[1] != "")
{
// TODO: Any extra work here to eliminate existing scripts from being inserted
scripts += match[0];
}
}
// Replace the contents of the panel
//panel.html(data);
// If you only want part of the loaded view (assuming it is not a partial view)
// using something like
panel.html($(data).find('#product-content'));
// Add the scripts - will evaluate immediately - beware of any onload code
panel.append(scripts);
if (callback) { callback(); }
},
error: function (xhr, status, error)
{
alert(error);
}
});
}
Plain JQuery/Javascript version with hooks:
It will go something like:
var _loadFormIntoPanel = function (panel, url, callback) {
var that = this;
var re = /<script\b[^>]*>([\s\S]*?)<\/script>/gm;
var scripts = "";
var match;
$.ajax({
url: url,
type: "get",
success: function (data, status, xhr) {
while(match = re.exec(data)) {
if(match[1] != "") {
// TODO: Any extra work here to eliminate existing scripts from being inserted
scripts += match[0];
}
}
panel.html(data);
panel.append(scripts);
if(callback) {
callback();
}
},
error: function (xhr, status, error) {
alert(error);
}
});
};
$(".product-slot a").live('click', function() {
var myUrl = $(this).attr("href") + " #product-content";
_loadFormIntoPanel($("#product-overlay-inner"), myUrl, function() {
// Now do extra stuff to loaded panel here
});
$("#product-overlay").fadeIn();
return false;
});

Fire Jquery ajax only once, if already fired

I am facing some problems with my Ajax calls.
I am working to improve my site's performance, and for that 1 thing I want to do is fire ajax only once, if they have been fired before, not to fire them.
One of My Scenario.
I have 2 select drop downs - Country and zones.
when a country is changed, .change is fired which fires an ajax to get the zones of the selected country.
Now, for eg, If I select country India, Ajax is fired, and change it to Iceland, ajax is fired.
Now if i change my country back to india, Ajax should not be fired, as I have already fetched data from server.
CODE
$("#select_list_id").change(function(){
var url = 'ajax.php?val=' + this.value;
$.ajax({
url: url,
success: function(json){
for(i=0; i<jsonData.length;i++) {
$("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
}
}
});
})
My Approach can be to store the json being returned, and compare the countryID on change, if the value already exists, return the json back, else hit the Ajax.
But I have near about 100 ajax calls in my project, and this process might take some sweet time.
If anyone can help me, in how to generalize this code.
Apart from all this, while searching I found that this can be done via jquery once plugin as well, if so, can someone please provide some help on this.
Updated -
Thanks everyone, this did help me, and things are pretty good now :)
Just another small query, what is the use of jquery once plugin then ? Is it used for same stuff ?

if you can generalize your ajax calls, you could cache the result json by the request uri (url+params)
something like this:
var ajaxCache = [];
function ajaxCall(url,successFunc)
{
if(ajaxCache[url] != undefined)
{
successFunc(ajaxCache[url]);
}
else
{
$.ajax({
url: url,
success: function(json){
ajaxCache[url] = json;
successFunc(json);
}
});
}
}
$("#select_list_id").change(function(){
ajaxCall('ajax.php?val=' + this.value, function(json){
for(i=0; i<jsonData.length;i++) {
$("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
}
});
});

You can store the response on the option that has emitted that request:
$("#select_list_id").change(function() {
var $selected = $(this).children(":selected");
if ( $selected.data("json") ) {
build( $selected.data("json") );
}
else {
$.ajax({
url: 'ajax.php?val=' + this.value,
success: function(json) {
$selected.data("json", json);
build(json);
}
});
}
function build(jsonData) {
for(i=0; i<jsonData.length;i++) {
$("#select_list_2_id").append(new Option(jsonData[i].title,jsonData[i].id));
}
}
});

Assuming that the request is not cached, this is still relatively simple. You would maintain an object with country names as the keys and options as the values:
var countries = {};
.change(...
var country = this.value;
if (!countries.hasOwnProperty(country)) {
countries[country] = [];
$.ajax ...
for (var i = 0; ...
countries[country].push(new Option(...
}
//Iteration may be needed
$("#select_list_2_id").empty().append(countries[country]);

Simple client-side framework/pattern to simplify doing async calls?

We're currently not using any serious client side framework besides jQuery (and jQuery.ui + validation + form wizard plugins).
A problem that surfaces a few times in our code is this:
We have a button that initiates an Ajax call to the server.
While the call is taking place, we display a "loading" icon with some text
If the server returns a result too quickly (e.g. < 200 ms), we "sleep" for 200 millis (using setTimeout()), to prevent flickering of the waiting icon & text.
After max(the call returns, a minimal timeout), we clear the loading icon & text.
We then either display an error text, if there was some problem in the ajax call (the server doesn't return 500, but a custom json that has an "error message" property. In fact, sometimes we have such a property in the response per form field ... and we then match errors to form fields ... but I digress).
In case of success, we do ... something (depends on the situation).
I'm trying to minimize code reuse, and either write or reuse a pattern / piece of code / framework that does this. While I probably won't start using an entire new heavy-duty framework just for this use case, I would still like to know what my options are ... perhaps such a client-side framework would be good for other things as well. If there's a lightweight framework that doesn't require me to turn all my code upside down, and I could use just on specific cases, then we might actually use it instead of reinventing the wheel.
I just recently heard about Ember.js - is it a good fit for solving this problem? How would you solve it?

$(function(){
var buttonSelector = "#button";
$('body').on({'click': function(evt){
var $button = $(this);
$button.toggleClass('loading');
var time = new Date();
$.get('some/ajax').then(function(data,text,jqXhr){
// typical guess at load work
$button.empty();
$(data).wrap($button);
}).fail(function(data,text,jqXhr){
alert("failed");
}).done(function(data,text,jqXhr){
var elapsed = new Date();
if((elapsed - time) < 200){
alert("to short, wait");
}
$button.toggleClass('loading');
});
}},buttonSelector,null);
});

Just wrap the $.ajax in your own function. that way you can implement your own queing etc. I would suggest to do a jquery component for this. It can get pretty powerful, for example you can also pass http headers etc.
Regarding frameworks it depends on your requirements.
For example, you may consider Kendo UI, it has good framework for creating data sources:
http://demos.kendoui.com/web/datasource/index.html.

Working Sample Code (well, almost)
I was going for something along the lines of #DefyGravity's answer anyway - his idea is good, but is still pseudo-code/not fully complete. Here is my working code (almost working demo, up to the Ajax URL itself, and UI tweaks)
The code & usage example:
jQuery.fn.disable = function() {
$(this).attr("disabled", "disabled");
$(this).removeClass("enabled");
// Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
$(this).filter("button").button({disabled: true});
};
jQuery.fn.enable = function() {
$(this).removeAttr("disabled");
$(this).addClass("enabled");
// Special handling of jquery-ui buttons: http://stackoverflow.com/questions/3646408/how-can-i-disable-a-button-on-a-jquery-ui-dialog
$(this).filter("button").button({disabled: false});
};
function AjaxCallbackWaiter(ajaxUrl, button, notificationArea, loadingMessage, errorMessage, inSuccessHandler, inFailureHandler) {
// Every request that takes less than this, will be intentionally delayed to prevent a flickering effect
// http://ripper234.com/p/sometimes-a-little-sleep-is-ok/
var minimalRequestTime = 800;
var loadingIconUrl = 'http://loadinfo.net/images/preview/11_cyrcle_one_24.gif?1200916238';
var loadingImageContent = $("<img class='loading-image small' src='" + loadingIconUrl + "'/><span class='loading-text'>" + loadingMessage + "</span>");
var errorContentTemplate = $("<span class='error ajax-errors'></span>");
var requestSentTime = null;
button.click(clickHandler);
function displayLoadingMessage() {
clearNotificationArea();
notificationArea.html(loadingImageContent);
}
function clearNotificationArea() {
notificationArea.html("");
}
function displayError(message) {
var errorContent = errorContentTemplate.clone(errorContentTemplate).html(message);
notificationArea.html(errorContent);
}
function ajaxHandler(result) {
var requestReceivedTime = new Date().getTime();
var timeElapsed = requestReceivedTime - requestSentTime;
// Reset requestSentTime, preparing it for the next request
requestSentTime = null;
var sleepTime = Math.max(0, minimalRequestTime - timeElapsed);
function action() {
clearNotificationArea();
button.enable();
if (result) {
inSuccessHandler();
} else {
displayError(errorMessage);
inFailureHandler();
}
}
if (sleepTime <= 0) {
action();
} else {
setTimeout(action, sleepTime);
}
}
function failureHandler() {
}
function clickHandler(){
if (requestSentTime !== null) {
logError("Bad state, expected null");
}
requestSentTime = new Date().getTime();
displayLoadingMessage();
button.disable();
$.get(ajaxUrl, 'json').then(ajaxHandler, failureHandler);
}
}
// Usage:
var ajaxUrl = 'FILL IN YOUR OWN URL HERE';
var button = $("#clickme");
var notificationArea = $(".ajax-notification-area");
var waitingMessage = "Doing Stuff";
var errorMessage = "Not Good<br/> Please try again";
$(document).ready(function(){
new AjaxCallbackWaiter(
ajaxUrl,
button,
notificationArea,
waitingMessage,
errorMessage,
function(){
alert("All is well with the world");
},
function(){
alert("Not good - winter is coming");
});
});