I'm trying to refresh page on Ajax success.
var lastId = "#" + id;
window.location.replace("/myurl" + lastId);
It is writing the correct URL to my browser but I don't see the changes made. If I refresh (F5) the page, I see the changes correctly because the ajax was correctly sended.
So I think that page won't force refresh if the url is the same.
In this example, I'm already on http://mypage.com/myurl, it is supossed to redirect me to http://mypage.com/myurl#38174 for example, so my browser will focus the DOM element with id="38174".
As I said, if I submit the ajax request, my url changes to http://mypage.com/myurl#38174 and focus id="38174" but I don't see the changes made to that element on my DB, if I hit F5, it focus the same element but with the changes correctly shown.
Why is this hapening?
I've also tried with window.location.href and window.location without success.
If I use window.location.replace('http://stackoverflow.com'); it's sending me to this website correctly...
So I think the problem is when replacing with the same url + some hashtag... maybe?
As I've said, in this case in particular we need to refresh after an AJAX request only if it's a success, yes, it sounds weird and counterproductive but it is needed.
var lastId = "#" + id;
window.location.replace("/myurl" + lastId);
window.location.reload();
Updating a hash from the URL will not trigger a new pageload.
You'll need to listen to the hashchange event in javascript to initiate your ajax call, without the need for your page to refresh. This will give you a better user experience
If you use jQuery, you can use something like:
$(window).on('hashchange',function(){
//Do ajax call here
});
Related
I have a page where there is a form which is used to Add / Edit Addresses.
In the right section of the page, there is a saved address Which has Edit link and it gives call to the same page URL with adding a new parameter say "billingID.XXXXX".
After clicking on this link, page is re loaded with the default address data auto filled.
I need this to happen on the first time load. I tried triggering click event on this Edit link on load, but I suppose it is not allowed by jQuery.
What are the other options I have with jQuery / javascript to add this URL parameter on load of page.?
You could try the Javascript History API.
https://developer.mozilla.org/en-US/docs/Web/API/History_API
It depends on what you want to do, I didn't understand you quite clear.
If you need the page to be reloaded and show the page by url, you can get 'href' value by jquery and then call window.location = $('.mylink').attr('href') + '?billingID.XXXXX';.
If you just want to replace url in browser panel, you can use History API as Kahuna suggested. E.g. you can call
window.history.replaceState(null, document.title, window.location.path + '?helloworld=1');
but then you have to update the page contents by yourself, using JS and jQuery.
you can try this:
if(window.location.href == 'requestd page href'){//http://localhost/test/test.php
window.location.href += "?billingID.XXXXX";
}
Okay let's say I have a page that inserts data into database
page1.php
//INSERT CODE
//HTML FORM
Whenever I access page1.php, url at the top seems like this
www.abc.com/page1.php
if I am at the home page of website and url seems to be
www.abc.com/home
At the same page I can call other page's div through jquery ajax call but the url seems not to change. Even if i call any other page url won't change at all...
What I am looking for is that a solution that when I call the page1.php to the same page that is home.php url changes like this
www.abc.com/home?view=page1
or
www.abc.com/home/page1
and also do I have to write page1.php functionality of DATABASE INSERT in home.php?
So you can't change the URL without redirecting. What you can do though is to change the hash. This will not redirect, but it will show the value in URL.
// AJAX CALL
// GET NAME OF PAGE YOU CALLED
// SET IT TO "var toHash"
// Whenever AJAX call finishes make a callback function with this code.
document.location.hash = toHash;
// or you can something like this for each time it changes at all.
window.onhashchange = function(){
var doThis = document.location.hash;
if (doThis=="#thisLink")
doSomething();
}
You can change your URL by
var myNewUrl = 'www.abc.com/home?view=page1';
window.history.replaceState('', '', myNewUrl);
jQuery is not required. window.location.replace() will simulate an HTTP redirect.
window.location.replace("http://google.com");
At URL www.here.com/article1.htm, I have Javascript that fills a modal with an HTML login form whose action is www.not-here.com/login.php and authentication works fine, except after completing the login.php action, the browser ends up at www.not-here.com/login.php, rather than remaining at the URL where the modal was activated, www.here.com/article1.htm.
To instruct the browser to remain at www.here.com/article1.htm, I first added id="loginTrigger" in the submit input tag like this:
<input id="loginTrigger" type="submit" name="doLogin" value="Login">
Then, in my Javascript I added a click event handler to override the form's default behavior and remain at the URL detected when the document loaded (modal Javascript is omitted for brevity):
$(document).ready(function(){
hereSecureURL = window.location.protocol;
hereDomain = window.location.hostname;
herePath = window.location.pathname;
hereAnchor = window.location.hash;
hereURL = hereSecureURL + '//' + hereDomain + herePath + hereAnchor;
$('#trigger').click(function(e){
modal.open({content: $form});
});
$('#loginTrigger').click(function(e){
e.preventDefault();
window.location = hereURL;
modal.close();
});
});
How can the browser be instructed to remain at www.here.com/article1.htm and just have the form process and modal close?
When you submit a form action, it's making a POST call to your server. Once validated, your server should then redirect the person to wherever you want them to be.
Some people handle this using a REFERRER param in the POST call, then redirecting to that REFERRER after the user has been authenticated.
so essentially, you should be rendering your form with an action that looks something like this:
<form action="/login.php?REFERRER=/ThePageIwasOn"... >
Your server code would look something like this:
<form action="/login.php?REFERRER=<?php print $_SERVER["HTTP_REFERER"] ?>" ...>
Of course, I don't know what kind of app server you're running, so YMMV.
By the way, this is just one of many ways to do this. If it were me, I'd probably store the value in a session. I don't like exposing values like this. It looks crummy.
Edit: As Sancao mentioned, it's not always a POST request... ok, whatever. Second, he's right, it'll be available in the $_GET variable, since it's a url param, and yes, it probably is better to hide it in an input, especially if you're working on HTTPS.
the problem lies in this part
$('#loginTrigger').click(function(e){
e.preventDefault();
window.location = hereURL;
modal.close();
});
you need to select your submit button by the parentID of the modal itself
then try modal.close(); , if didn't work try modal.toggle();
then you have to check against something in order to reveal information
a cookie or whatever ,
another work around is to send a redirect header from the php after fully authentication to the 1.html page and write down a cookie to tell the browser that everything is fine to not display the modal again
I have a code that after clicking on a link ('#versionPageFromProdLink'), will redirect the page to the index page. The index page has that contains the content. I want to hide this after the page is redirected and show the next div that i have ().
The page is redirected however the jQuery function after the window.location.replace( url ); line is not called.
How will I be able to redirect and call the jQuery after page redirection?
Code:
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
// jQuery code below is not called, <div id="versionMainContent"> is not hidden
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});
});
As stated, the location.replace means the code "after" it won't execute. What you will need to do, is append a hash "index.html#divCode" or some such (you could also use a query string in this case) and then detect that onload / on document-ready for the index page, then update the hide/show status there.
This is fundamentally impossible.
Once you navigate to a different page, the previous page, including all of its Javascript, is gone.
You must handle the secondary executation after the redirect in the page you are redirecting to.
Example:
Page 1
jQuery( '#versionPageFrmProdLink').click( function(){
window.location.replace( url );
}
Note during redirection you can pass a query string in the URL to check a condition in the next page.
Page 2
Now that you redirected to the next page. You can place a document.ready function and run what is needed.
$(document).ready(function () {
jQuery(".versionMainContent").hide("fast", function(){
jQuery( ".versionProductContent" ).show();
});
Your design is the problem. Redirecting stops the flow of execution. You can use ajax to make a server call and continue execution.
Or, if you prefer you can perform a redirect and pass a URL parameter like ?hideVersionMainContent=true and perform the hide server side.
There are other ways to accomplish the task, but that should give you a few ideas.
The code after your location.replace operates on the page that you're leaving (if it is ever run at all; changing the location navigates away from the page and may well terminate your code right there).
You'll need to pass the information to display to the new page, and have code on the new page fill in the stats. There are lots of ways to do that:
On the query string
Via web storage (sessionStorage would probably make sense)
Cookies (but don't, it's not what they're for)
In facebook, whenever you navigate to a different URL (in some situations), the URL changes but there is no feeling sensed as going to a different page.
For example: when we view pictures in facebook, and when we move to the next image the URL changes in the address bar
FROM >facebook.com/foo?bar=foobar&xxxx=
TO > >>facebook.com/foo?bar=boobar&xxxx=
and this is not hashed change also
like
FROM >facebook.com/xxxxx#xxx=xxxx
TO > >>facebook.com/xxxxx#xxx=yyyy
How is this possible seamlessly. I mean how is that only a container is modified on URL change. URL change is supposed to navigate to a different page which can contain cached information from previous page and THIS navigation by URL change can be seen obviously by browser's screen going blank for a moment.
If using an iFrame, how to implement this ?
I use somehting similar to this
try {
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page", href);
loadPage(href);
}
catch(e) {
window.location.hash = "#!/"+href;
}
If it supports the HTML5 pushState them change URL, but if it doesn't then the fall back is the window hash.
wow. I just asked it few minutes ago ... use search next time ;)
Dynamic favicon when I'm proccessing ajax data
Modify the URL without reloading the page
There's a jQuery plugin called "address" that will watch for changes and call the function you give. I think it's just checking the URL every 100ms or so.
They issue an AJAX request for the data necessary to fulfil the "navigation", then tell the browser to "go to #xxx=yyy". Since such an anchor doesn't exist, the browser doesn't actually scroll down. However, it does record a new history entry, and also updates the URL so that if someone copy-pastes that URL, they will view the same object that the user is seeing, rather than just the original page.