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
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";
}
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
});
Hi ladies and gentlemen,
I am trying to call the alert from the button, and after the alert I want it to redirect to my home page. However when I call the below code from asp button
ClientScript.RegisterStartupScript(this.GetType(), "Success", "alert('" + "Activation mail has been sent to the email address. Please check your email!" + "');window.location.href('Home.aspx');", true);
It doesn't work. The alert can be call so this javascript is correct.
What I suspect is the postback cause the redirect doesn't work. So I put the update panel as the result the button cannot be call the function at all.
In the end I tried to put return false in the javascript also not working.
I also tried to put response redirect after call the javascript function but the javascript and the behind code running synchronize so the page will be redirect before the alert will call.
How I can achieve my scenario?
try this.
ClientScript.RegisterStartupScript(this.GetType(), "Success", "alert('Activation mail has been sent to the email address. Please check your email!');window.location ='Home.aspx';", true);
href is not a function, so you cannot call it like href('Home.aspx'). Change
window.location.href('Home.aspx')
to
window.location ='Home.aspx'
As the other answers say:
window.location.href = 'Home.aspx'
However that is a relative path, so it only works if the current page is in the same folder as the Home page. Redirecting to a relative URL in JavaScript.
Use '/' to go to the root folder of your website:
window.location.href = '/Home.aspx'
I suggest you instead of using
window.location.href('')
Use
window.location.replace('')
if you want to redirect like an html redirect.
Source: How to redirect to another webpage in JavaScript/jQuery?
However, like racilhilan says you can use :
window.location ='Home.aspx'
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)
Can I pass post variables and reload a page on clicking an hyperlink?
To be clear I have something like this.
Click
If javascript is enabled,
I think I can use "event.preventDefault()" to suppress passing as GET variable.
So now onclick, name should be passed as post variable instead of get.
If javascript is disabled,
Then the above should work.
You could do it, by creating a new form element, pointing it at the href and calling .submit() on it.
<a class="postlink" href="test.php?name=test">Click</a>
<script type="text/javascript">
$('.postlink').click(function() {
var form= document.createElement('form');
form.method= 'post';
form.action= this.protocol+'//'+this.hostname+this.pathname;
$.each(this.search.slice(1).split(/[&;]/g), function() {
var ix= this.indexOf('=');
if (ix===-1) return;
var input= document.createElement('input');
input.type= 'hidden';
input.name= decodeURIComponent(this.slice(0, ix));
input.value= decodeURIComponent(this.slice(ix+1));
form.appendChild(input);
});
document.body.appendChild(form);
form.submit();
return false;
});
</script>
Or you could just do an AJAX request instead and reload() the page afterwards if you prefer.
However, I'm not sure why you'd want to do this. What use is a link that's usually POSTed, except when it's not? (Not just when JS is disabled/unavailable or when it's a search engine, but also when the user middle-clicks the link or tries to right-click-bookmark it or whatever.)
If all you want is something that behaves like a button to submit a POST form, better to actually use a real form and submit button, and then use CSS to restyle it to look like a link if that's what you want it to look like.
Very good hint....
I was first trying to send the form data via an Ajax Post call and reloading the page afterwards, but it was not working properly:
var biq_select_val = jQuery('#biq_search_select').val();
jQuery.post(window.location.href,
{ biq_amazon_item_list_search: biq_select_val},
function() {window.location.reload();}
);
Now I am using just a:
jQuery('#biq_amazon_item_list_search_form').submit();
and it is working fine.
I have some 10 links on a page. When user clicks on those links ajax-reload must take place.
To be clear I have something like this.
one
Two
If javascript is enabled,
Onclick, ajax load must take place.
If javascript is disabled, Then the above should work.
Basically I am using name to limit some values of my search page.