I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
Related
pls help me out. i recent used ajax for my laravel pagination. Whenever i click he back button. it does not go back to the page i am coming from. it goes back to page 1. let me Illustrate this clearly.
(1) i have a list of items paginated with jquery ajax.
(2) when i visit the 5th page( for example) and click an item to view details of that item and decided to click the browser back button, i am expected to be taken back to page 5 where i was. instead, i am taken back to page 1.
(3) This is only happening in chrome related browsers. it works well in Firefox;
//BELOW IS MY AJAX CODE;
$(document).ready(function(){
$(document).on('click','.pagination a',function(e){
e.preventDefault();
var pageNumber = $(this).attr('href').split('page=')[1];
getMorePage(pageNumber)
});
function getMorePage(page) {
$.ajax({
url: "/all-products-ajax/"+"?page="+page,
type: "get",
datatype: "html"
}).done(function (data) {
$('#product-view').html(data);
}).fail(function () {
alert('Posts could not be loaded.');
});
}
});
Ajax queries are different than browsing a webpage. You may need to register new routes to browser's history.
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
You might want to check out here.
I have a page with button on it. When click the button jquery start running. It calls a function using ajax. I change the js file on project and try to see whats happening in localhost but js file is still runs old version before i changed and i can see on page source old version. why i can not change the file?
$(this).click(function (e) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "test.aspx/function",
data: $(this).text(),
dataType: 'Json',
success: function (Result) {
Result = Result.d;
data = Result;
}
});
};
i want to change data but it still running as above
data: $(this).parent().text(),
If you try to reload the test.aspx/function that is ajax called, you can open the developer tools (right click on page, click on inspect).
After the developer tools have been open, click on reload and keep that click until a menu opens. There click on "Hard Reload", or even the Empty Cache and Hard Reload
Other way is to use cache of jQuery ajax call for your tests.
And one other way is to disable the page cache for test.aspx/function on code behind. For example add that on your response.
Response.Cache.SetExpires(DateTime.UtcNow.AddYears(-4));
Response.Cache.SetValidUntilExpires(false);
We are expecting the below things:
Would like to show the page with updated values.
Then show the session attribute.
What is happening for the below code, session message displayed first and then the page is getting reload.
$.ajax({
type: "POST",
url: "startSelectedServer",
data: { selectedJvmHostIp : selectedJvmHostIp, selectedJvmPort : selectedJvmPort },
success: function(result){
1. location.reload();
2. $("#save-message-div").show();
},
error : function(e) {
}
});
<div id="save-message-div" style="background-color: #DFF2BF; padding: 8px;display:none">
<h2 id="save-message" style="color: #4F8A10"></h2>
</div>
But we are expecting to show message after reloading the page.
In above 2 is executing first then 1 is executing.
ok it appears to me that you are trying to perform a server-side functionality and then refresh the page and have a message appear that the functionality has occurred.
This is fine as far as it goes but will not work the way you have it. To do it closest to the way you invision you will want to put in conditional logic on page load to determine if it is appropriate to show the div.
Even if your page did not show the div prior to reloading, the way it is written, when the page reloads it will not still be executing the same piece of script - it is a blank slate with only what you pass to it.
I am not sure why you want to reload the page at all actually; you can, and should [to make use of ajax], just use the information client-side that is returned from the server asynchronously.
I am trying to Implement functionality with code as shown in link below, But Instead of "Next" and "Previous", I am putting "Save" and "Next". When I click on "Save" - without the page getting refreshed, I should be able to navigate to next tab by saving data to backend (Rails).
1 Method of doing it is "Ajax", But I don't know How to start with it.
CODE LINK HERE
// Code in js-fiddle
try below code to click on save button, run ajax, save data and then show next tab:
$(".save_btn").click(function(){
$.ajax({
type: "post",
url: "/path",
data: "params1=data",
success: function(){
$("#tab2").show();
}
})
})
I want lo show some button on webpage according login status of user in mvc view page.
I'm using ajax function to check login status of user then according that button hide and show.
since page got load before ajax response come.it seem odd to hide and show button on after page page load
$(document).ready(function () {
$.ajax({
type: "GET",
url: url,
dataType: 'jsonp',
success: function (result) {
if (result.IsuserLogin == "true") {
$("#withlogin").show();
$("#notlogin").hide();
} else {
$("#withlogin").hide();
$("#notlogin").show();
}
}
});
});
Is there any way to call ajax function first take response then load page.
i'm already calling ajax function at time document ready function.
So what if you put this in your page and display appropriate text based upon if request is authenticated or not.
#if (Request.IsAuthenticated)
{
<div> Authenticated</div>
}else{
<div>Anonymous </div>
}