I'm working on a progressive page loading script where new pages will load continuously when bottom of the page is reached. I'm using ajax to fetch the data dynamically through jQuery ajax from the server, the return data will return the url of the new post as well as its content.
My problem is what code should I use to submit my returned post url to analytic so that it registers as a valid page view?
$.ajax({
type: 'GET',
url: 'http://somedomain.com/fetch_pages.php',
data: { 'page': this.$loadMoreCounter , 'section': that.$section },
dataType: 'json',
success: function (data) {
//analytic code upon each successful callback.
});
Related
The button action does not work after searching in the index page. The action button does not work on the second page.
My Ajax Script
$(document).on("click", "#pagination a, #search_btn, #reset_btn", function() {
if(this.id == 'reset_btn'){
$("#searchform").reset();
}
$.ajax({
url: this.dataset.url,
type: 'get',
data: $("#searchform").serialize(),
processData: false,
cache: false,
contentType: false,
success: function(data) {
$("#pagination_data").html(data);
},
failure: function (response) {
alert(response.responseText);
},
error: function (response) {
alert(responsiveness);
}
});
})
});
Using Ajax Pagination, you can create dynamic navigation links for pages and then load data without reloading the entire web page content. So, by using Ajax Pagination, we can add dynamic page content to the data list without having to refresh the web page content.
Simply solve the bug by inserting the code below into the button function script.
KTMenu.createInstances();
I need to render a Flask template but the ajax data is only accessible within the POST if statement and does not show when I call a get direct after a posted the data.
I have a working ajax here
$.ajax({
type: 'post',
url: "/query",
dataType: 'text',
data: JSON.stringify({hostname:hostname, bf_id:computerID}),
contentType: 'application/json;charset=UTF-8',
success: function () {
window.location.href = "/query";
}
});
});
The data is successfully posted and the redirect is working. But when the redirect calls the function to render the template, the posted ajax cannot be retrieved.
#app.route('/query', methods=["GET", "POST"])
def query():
hostname=""
if request.method == "POST":
#these values only exist in if statement
hostname = request.json['hostname']
bf_id = request.json['bf_id']
return render_template('query.html', hostname=hostname)
Am I using an incorrect work flow?
Am I using an incorrect work flow?
Yes.
You make the POST request with the data.
You get a response which does things with that data
You then make a GET request without the data
You get a response which can't do things with the data that it doesn't have
The point of Ajax is to make an HTTP request without loading a whole new page.
If you want to load a whole new page, then use a regular form submission without involving JavaScript at all.
I have implemented infinite scroll that appends html in the exact same manner as the static item with forms (inclusive csrf), but the dynamic forms that has been appended seems to be submitting without ajax and failing when pressing the submit button.
I get this error on the appended forms in console log:
Resource interpreted as Document but transferred with MIME type application/json:
The ajax submit.
$('.cart_add').on('submit',function (event) {
$.ajax({
type: 'POST',
url: url,
data: data,
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function (data) {
console.log("item has been added to cart");
event.preventDefault();
}
});
});
Edit I noticed that the jquery doesn't select the dynamically appended forms
Try setting your content type. The content type is the type of data sent to the server. In this case, you are sending data to the server which is interpreted as a Document (html) but is sent as json. This is because the browser is trying to infer what type of data your are sending becuase you did not explicitly state it.
Use the contentType to set it.
contentType: "text/html"
So your call should look like this:
$.ajax({
type: 'POST',
url: url,
data: data,
contentType: "text/html",
beforeSend: function (request) {
return request.setRequestHeader('X-CSRF-Token', $("meta[name='csrf-token']").attr('content'));
},
success: function (data) {
console.log("item has been added to cart");
event.preventDefault();
}
});
i have a page loaded via jquery tabs ajax, i have a form within this page that i want to show form response via ajax. response is loading from this code:
$('#whois').submit(function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
return false;
);
but my form submit to parent page instead of /lib/domainchecker.php. so i see headers of my page instead of response!
any idea what makes this happen?
When you are loading content on the page via AJAX and you need to apply events to the loaded content you need to use the jquery live().
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: $('#whois').attr('/lib/domainchecker.php'),
success: function(response) {
$('#reply').html(response);
}
});
This of course goes on the main host page rather than the loaded content page.
problem is solved, no thing related to loading page via ajax but there was an error with code, i shouldn't post to $('#whois').attr('/lib/domainchecker.php') but just '/lib/domainchecker.php'
corrected code:
$('#whois').live('submit', function() {
$.ajax({
data: $('#whois').serialize(),
cache:false,
type: "POST",
url: '/lib/domainchecker.php',
success: function(response) {
$('#reply').html(response);
}
});
i used jQuery with Ajax By this code it works fine
$.ajax({
type : 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data : catdata,
success : function (msg){
$('body').html(msg);
}
});
but i want to show the ajax-loading gif while fetching that information from database?
And , is that way secure Or i have to add some security to it?
$('body').html("<img src='spin.gif' />").fadeIn(100, function () {
$.ajax({
type: 'POST',
url: 'http://localhost/msite/index.php/site/ajax',
data: catdata,
success: function (msg) {
$('body').html(msg);
}
});
});
If you make your database query synchronous on the server then your Ajax will be spinning as long as the request is being processes, including a database query and server request/response roundtrip.
I believe you have to do this yourself within the jQuery. Create a hidden image on the page, call .show() just before calling the ajax command and be sure to call .hide() inside the complete event...
complete: function () {
$("#ticker").hide();
}
You can download a suitable image from ajaxload.info.