I have a webpage which displays all the records of a table with a checkbox infront of them. I can select the boxes and then make a ajax request for deleting them.
The deletion works fine. but even after refreshing it shows deleted records.
Things I used for redirection
-
window.location.href = '/current_page';
location.reload(true)
I used them success callback. If i click on browser then it works.
Try to use anchor to redirect by call the below function :
function redirectFunc(){
var link = document.createElement('a');
// set your page url
link.href = "url";
document.body.appendChild(link);
link.click();
}
Use the Math.random for generate hash and put this in href of page. This well the page reload with no cache. The cache look adress page for query of content in cache.
Look this example:
function reloadWithNoCache(){
window.location = window.location.href + '?eraseCache=' + Math.random();
}
<input type="button" value="Refresh With No Cache" onclick="reloadWithNoCache()"/>
The way you are trying to do is an hacky way.
If you are trying to refresh the page then using location reload or anyother way then no point making an ajax call, you can simply make a delete call and target the page to a new url just like initial request.
This solution would be a bit bigger but scalable.
I hope you might be rendering the initial table with some front end templating supplying some data as a model to the table. So on success of ajax request instead of reloading the page, try to reconstruct the DOM with the rest over data.
ex : model = {1,2,3}
table contains 1 2 3
after delete update the model to 1 3 (if you have deleted 2)
and call a render method of table with new model {1,3} erasing the old table. If you feel the data is too heavy (unless its too big) that it might really nag the user with performance you can go with this approach.
No need for page refresh. You can delete the rows in the table using jQuery in your ajax success callback.
Related
I am using ajax post requests for doing paging on a feed in my site. When getting the post request data I am reforming the page by clearing previous data and rendering the new data that came from the request. I want to be able to change the URL as well so saving the new page link will get the user to the current page.
Example:
User on page example.com/feed - seeing content of page #1
User clicking to get to page #2 -> ajax post is send and data on the page is changed using js (no refresh)
URL is still example.com/feed but the content is of example.com/feed?page=2
How can I set the URL to point to the new page without triggering a refresh (no redirect) ?
I am using Nodejs + express.
I understand you are aiming at a single page application.
While keeping the url is nice, note you might want distinct urls for directly accessing different parts of your application. Still, you can load content with AJAX and keep a smooth application. The way to go is using the hash part of the location.
The Sammy.js framework gives you a nice base to build upon, you can try it out.
You can use history pushstate but some browsers does not support.
history.pushState({id: 'SOME ID'}, '', 'myurl.html');
And don't forget about window.onpopstate, it pops if user clicks back button.
Redirect the user to an anchor point.
Page 2
And in your document.ready:
if (window.location.hash.length > 1){
var pageNumber = window.location.hash.substring(1);
loadPage(parseInt(pageNumber));
} else{
loadPage(0);
}
I don't believe it is possible to change the query part of the URL without triggering a refresh (probably due to security issues). However you may change the anchor and use an event listener to detect when the anchor is being changed.
//Listener
$(window).on('hashchange', function() {
if(loaction.hash.length > 1) {
//The anchor has been changed.
loadPageWithAjax("example.com/feed.php?page=" + location.hash.substring(1));
} else {
//Load standard page
...
}
});
Change the anchor to load new feed
Page 2
Remember to not use an anchor that is used as an id, since this makes the browser scroll to that element.
I have a below anchor as below
<a onclick="return getFile('/log/sample.log');" href="/log/sample.log" target="_blank"> sample.log </a>
Because at my server, the log directory in href may be not correct. So the function "getFile" would change the href to the correct one after asking the server.
The first click always failed since the link was not correct, then after AJAX process in getFile was finished and the correct href was given, the clicks later on was ok.
The problem is how I forcefully let html wait ever at the first click until the href is changed, then do the query on the server.
Thanks in advance.
I guess my current way could be not in the correct direction by using "onclick" to implement the idea.
You want something like this
$(function() {
//assume you tagged all anchors you want to do this for with class=adjustlink
$('a.adjustlink').click(function(e) {
var thisAnchor = $(this); //save reference for later use
//this will either be true (see below) or undefined (falsy)
if(thisAnchor.data('myapp.linkHasBeenTested')) {
return; //continue on
}
// Stop the link from being navigated (the default for this event)
e.preventDefault();
//I'm assuming this is fetched as text but could just as well be JSON or anything else
$.get('/LinkAdjustment/', thisAnchor.attr('href')).done(function(result) {
thisAnchor.attr('href', result); //set the href
thisAnchor.data('myapp.linkHasBeenTested', true);
thisAnchor.trigger('click');
});
});
});
As an interesting side-note. You might be attempting to do something similar to the way REST is intended to be done. You might consider, first fetching a resource that will tell you up-front what the correct links are.
I would recomend setting the href to # initially. And in your getFile, set the href to the correct value and then programatically click the 'a' on success of your ajax
You will need to find the element to do this. It can either be done by setting an id and then using document.getElementById(), or would be easier to do do this using Jquery selectors, and it even has a .click() you can call after.
If you want persist with this flow make your ajax call synchronous, it will forcibly wait.
But this flow is not suggested, I would have rather updated these hrefs on page load or would have set a default url to my server page, which would then redirect to right log file
Okay, i have a simple button on my page (MyPage) which fades out the current div (fade 1) and fade in another one (fade 2). I have now realised that there might be chances that i would want to go to that page (fade 2) from somewhere else directly. I am able to redirect my page by window.location. However i also want that if that link was pressed (from some other random page), go to page (fade 1) and then fadeOutthe current div and fadeIn another one (fade 2).
Hope this isn't too confusing. This is the code i am using to get to the page (MyPage):
$('#fav').click(function(){
window.location = 'production/produc_order.php';
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
})
If you don't want to or can't re-code your page to support AJAX, the other old-school option is to pass a parameter in the URL as a hint to the refreshed page. (You can hide it by making the redirect a POST if you feel it's really necessary, or use a cookie technique. The point is that the refreshed page needs a token of some form from the prior page.)
eg:
$('#fav').click(function(){
window.location = 'production/produc_order.php?create=1';
})
and put the fade code inside the $(document).ready() function, with a check for the create parameter, cookie or whatever.
I'll agree with #remibreton though, using AJAX is the more hip, modern method.
Changing the window.location will kill all scripts currently running in the browser.
Your only other solution is getting a page via AJAX and run a callback function to execute when the content is loaded. Here is something to get you started.
Also, jQuery as a nice .ajax() method to easily perform AJAX requests and associate callbacks to successful and failed requests.
you can do it with sessionStorage()
$('#fav').click(function(){
sessionStorage.setItem("reloading", "true");
window.location = 'production/produc_order.php';
});
var reloading = sessionStorage.getItem("reloading");
if(reloading == true) {
sessionStorage.removeItem("reloading");
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
}
I am trying to build a web app mainly using html and javascript. I use a number of different variables in the app that are passed through the url.
here are the problems, I have some links that link to the page the app is currently on, just with changed variables, but while clicking on the links does change the url value, the page does not change/reload for the new values when using and an href, is there a clean way to force the page to reload if you link to the current page, or change the url?
currently I am using jQuery to set the window.location with the new variables then reloading the page.
also, I have a similar problem for using the back button on the browser. It will change the url but not refresh the page, so if you have a variable set to 1 you change it to be 2, that works and the page will reload with the variable set o 2, but if you go back using the browser history the url will say that your variable should be 1, but the rest of the page will still act like the variable is 2, until you refresh the page.
is there someway to set a page so that the it will automatically refresh when you go to the page from the same page, either through links or going forward or backward with the browser history?
as per request here is part of the parts of the code I am having problems with:
first is the code for the creating the html elements onload
var sel_tags=document.getElementsByName("selected_tags")[0];
var temp="";
if(Tags==null)
{
temp="\<p>All Notes\<\/p>";
}
else//Tags not empty, and there are tag filters
{
var click= new Array("",a+ AtTagShow);
var GoTo="PageViewNotes.html?"
for (var i=0; i < Tags.length; i++) {
//if we are showing #tags, or a tag is not an #tag
if(AtTagShow||Tags[i][0]!="#")
{
click[0]=t+Tags[i];
if (temp.length>0)
{temp+="\<span class=\"spacer\">\/<\/span>"};
temp+="\<a class=\"selected_tags_label\""+
"href=\""+GoTo+click.join("&")+"\">\<span>"
+Tags[i]+"\<\/span>\<\/a>"
}
};
};
sel_tags.innerHTML=temp;
here is the jquery code for setting the onclick:
$(".selected_tags_label").live("click",function(){
window.location=(this.href);
window.location.reload();
});
an example url for this issue would be:
page.html?Tags=#rediculous,#meeting&AtTagShow=true
by clicking on the rediculous element the url would change to:
page.html?Tags=#rediculous&AtTagShow=true
window.location.href="page.html?Tags=#rediculous&AtTagShow=true"
Take a look at the jQuery History plug-in for setting your site up to have back / forward history. It helps with setting up states on your page, that call data based on what query parameters are in the URL string.
In modern browsers (IE8+, Opera 10.6+, Fx 3.6+, Safari 5+) you have hashchange event.
Instead of reloading page, maybe you can achieve desired results with something like this:
<script>
document.onhashchange = function(){
// do something
}
</script>
MDN might be also helpful.
If you are using query parameters (things after the ? mark in the URL), then changing a query parameter and setting window.location to that new URL should cause a new page load from the server.
If you are using hash values (things after the # mark int he URL), then changing the hash value will not cause a new page load.
So, if you want a fresh page load from server each time you change a value, then you should be using query parameters. Back and forward should also work fine when using query parameters.
If you're purposely trying to do all of this with hash values to avoid an actual server page reload, then you will have to do more coding to intercept hash changes and process them. That is easier to do in modern browsers than older browsers using the window.onhashchange event. See this page on MDN for more info.
Browser reloads the page, whenever any of these parts of the URL are updated via window.location:
Domain
Port
Path
Query string
But it won't load the current document, if you change the fragment_id part (which is simply a reference to an HTML element inside the current document).
Thus from what you say, I guess you're updating the fragment id.
Also this might help to know that window.location.reload() method does the work of F5 key.
I have a piece of code in jQuery that I use to get the contents of an iFrame after you click a link and once the content is completed loading. It works, but I have a problem with it repeating - at least I think that is what it is doing, but I can't figure out why or how.
jQuery JS:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
$("#fileuploadframe").load(function(){
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{action:"savePage",html:response, id: theID},
function(data){
alert(data);
});
});
});
HTML Links ( one of many ):
<a href="templates/1000/files/index.php?pg=0&preview=false"
target="fileuploadframe" class="pageSaveButton" rel="0">Home</a>
So when you click the link, the page that is linked to is opened into the iframe, then the JS fires and waits for the content to finish loading and then grabs the iframe's content and sends it to a PHP script to save to a file. I have a problem where when you click multiple links in a row to save multiple files, the content of all the previous files are overwritten with the current file you have clicked on. I have checked my PHP and am pretty positive the fault is with the JS.
I have noticed that - since I have the PHP's return value alerted - that I get multiple alert boxes. If it is the first link you have clicked on since the main page loaded - then it is fine, but when you click on a second link you get the alert for each of the previous pages you clicked on in addition to the expected alert for the current page.
I hope I have explained well, please let me know if I need to explain better - I really need help resolving this. :) (and if you think the php script is relevant, I can post it - but it only prints out the $_POST variables to let me know what page info is being sent for debugging purposes.)
Thanks ahead of time,
Key
From jQuery .load() documentation I think you need to change your script to:
$(".pageSaveButton").bind("click",function(){
var theID = $(this).attr("rel");
var lnk = $(this).attr("href");//LINK TO LOAD
$("#fileuploadframe").load(lnk,
function(){
//EXECUTE AFTER LOAD IS COMPLETE
var response = $("#fileuploadframe").contents().find("html").html();
$.post("siteCreator.script.php",
{
action:"savePage",
html:response,
id: theID
},
function(data){alert(data);}
);
});
});
As for the multiple responses, you can use something like blockui to disable any further clicks till the .post call returns.
This is because the line
$("#fileuploadframe").load(function(){
Gets executed every time you press a link. Only add the loadhandler to the iframe on document.ready.
If a user has the ability via your UI to click multiple links that trigger this function, then you are going to run into this problem no matter what since you use the single iframe. I would suggest creating an iframe per save process, that why the rendering of one will not affect the other.