I am writing an ajax search page that contains a search box and "tabs"; the idea is that a user enters a query, changes the tab, the query is submitted with new options, and results loaded below.
I am having a weird issue where the length(?) of the data ('content') returned seems to stop me running any extra JS.
See below, #resultsArea is designed to have several sets of results in it as a user flicks between tabs so it'll show cached results if the query is the same rather than sending another unnecessary db query.
"Content" is the data returned - and it seems as soon as I use this (whether it be in an alert, or printed on the page), I cannot execute any more javascript. If I remove +content+ from the .append function, the alert following the line will fire. Is this by design?
"Content" contains quite a large quantity of data - loads of s and formatting, so I wonder if this is the issue. However this all works and displays OK as it is! I just want to add some extra JS so I can load adverts into the rendered results, but this is stumping me.
$.ajax({
type: 'POST',
url: formUrl,
data: formData,
dataType: 'html',
success: function(content) {
$('#resultsBit').slideUp(200);
if (query!=prevQuery)
{
$('#results_'+flavour).remove();
}
alert('I will fire');
$('#resultsArea').append('<div id="results_'+flavour+'" style="display:true;">'+content+'</div>');
alert('I will not fire');
}
});
Thanks in advance for any pointers.
If I remove
+content+
from the.append()
function, the alert following the line will fire. Is this by design?
This gives a pretty big clue as to what's going on; that means something inside content
is causing an error (an exception is thrown actually) and this error can be seen from the console.
Without a console you could wrap your code inside a try { } catch
block like this:
try {
$('#resultsArea').append('<div id="results_'+flavour+'" style="display:true;">'+content+'</div>');
} catch (e) {
alert('Oh no, error: ' + e);
}
That should give you a clue as to what's wrong with content.