Below is my code I used to load some data when click on my divplease advice
$('#data).on('click', function () {
});
function searchData(section) {
$.ajax({
type: 'GET',
dataType: 'json',
url: '/user/getresults',
data: {q: section},
success: function (data) {
var result = data;
if (result.success) {
}
}
});
}
To avoid multiple calls, add below line to your first click function, but still your code may be executing per clicks where you may need to have overlay on page or some spinner that covers whole page to avoid multiple clicks
//Prevent form submission
e.preventDefault();
e.stopPropagation();
Will be together:
$('#search').live('click', function (e) {
searchData(section);
//Prevent form submission
e.preventDefault();
e.stopPropagation();
});
Try to put following lines inside success handler
var $resultList = $('.search--results');
$resultList.html('');
EDIT: Have you changed it to:
$.ajax({
type: 'GET',
dataType: 'json',
url: '/user/getresults',
data: {q: section},
success: function (data) {
var result = data;
if (result.success) {
var $resultList = $('.search--results');
$resultList.html('');
//putting data inside element
}
}
});
Your code appear to need a closing single-quote after #data
.
My suggestion is to clean the script and it might work.
HTML
...
<div id="data">...</div>
...
JavaScript
$('#data').on('click', function(evt) {
searchData('query string');
});
function searchData(section) {
$.ajax({
type: 'GET',
dataType: 'json',
url: '/user/getresults',
data: {
q: section
},
success: function(data) {
if (data.success) {
console.log("data from response" + data);
}
}
});
}