I have a login screen which the user logs in using Jquery and AJAX. That's fine. Now what I want is that if the user logs in correctly, I want to load another page.
I tried using document.location = "home.html"; but that refreshes my page. What I want is like that transition that normally we have when we click on tag like
<a href="SchoolMaterials.html"> <!-- this does not refresh -->
I don't know if I explained myself clearly.
Thanks
It will be better to load the page in your callback function of successful login with:
$("#the_div_container_for_new_page").load("SchoolMaterials.html")
UPDATED:
it is something like this:
$(document).ready() {
function login() {
//post with ajax to login
$.post(......, function(result){
if (result.success) {
// load some page after successful login.
$('#id_of_container_div').load("thepage.html");
return;
} else {
// handle error
}
})
}
}
window.location is just what you need. You can also create an anchor element using jQuery and simulate a click on it :
$("<a href='your url'></a>").click();
But i wouldn't recommend that, it's better to post your data to the server and redirect to the page you want.
Related
So basically i have everything ready, but i'd like a pop-up message appear after the user redirect to another page.
so i am currently use jquery
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
I do not know if i should use ajax instead, i know i may use route and if(session) to do it but i am new to ajax and will happy to got an example as reference.
Many thanks
UPDATE 1:
This the part of my submit button which redirect the user after submit:
var $btn_save = $("#btn_save");
$btn_save.click(function () {
//todo form validation
if(!$(".sa-alert-name-existed").hasClass('hidden')){
return
}
$.post(api_submit, postData).done(function (data) {
location.href = "/buzz#tab_pane_fbpage";
});
Then we should come to the js part, which popup a message when onclick the submit button
$('#btn_save').click(function (){
$('#message-box').slideDown('slow').delay(3500).slideUp('slow');
});
enter code here
The context is a game. When user refreshes his page (F5 or ctrl+R), I want the page to be redirect to gameOver.php page.
Can this be done in pure JS ?
One way to go about is to use a cookie variable as a counter. Every time the user starts the game, you set it to 1 and then increment it on every page load. On page load, you can check the variable's value and redirect using
window.location = 'gameOver.php'
or you can use beforeunload event.
$(window).on("beforeunload", function() {
//your redirect code logic here
})
You can do easily with this code when you want solve with pure javascript:
window.addEventListener("beforeunload", function (e) {
window.location = "gameOver.php";
});
Or you can do with jQuery like below:
$(window).on("beforeunload", function() {
window.location = "gameOver.php";
})
To solve this problem you could use cookies.
As mentioned in this stachoverflow thread, you store a cookie the first time someone visits your page. If you check on every page load if the cookie is set, you can detect if somebody has reloaded the page.
If you plan to create a "Play again" function you can simply destroy the cookie.
To get a look of the code look to the linked stackoverflow question above!
use cookie or localstorage first time someone visits the page. On refresh the check if your cookie or localstorage value is exists and if it does then redirect them to gameOver.php using javascript.
function checkUserVisit() {
if(document.cookie.indexOf('visit')==-1) {
document.cookie = 'visit=true';
}
else {
window.location = "gameOver.php";
}
}
call this function on body load of page.
<body onload="checkUserVisit()">
I have a button call this script, so it does the post in the background, but I need to reload the current page to display an updated php query, I realize there was probably a better way in jquery to the query part, but its crunch time, and all I want to do is get a successful page refresh.
Because the buttons were generated in php, the javascript code is at the end of the body.
I've tried location.href, window.location.reload(true);, document.write which only wrote to the page, document.location.href did nothing.
We are using jQuery/jQuery mobile, I was not on front end dev team, so I'm desperate to get this to work. to clarify, I need a page refresh after the $.post() command, within this code, which does work
<script type="text/javascript">
$('#reserveBook').click(function () {
var isbn = sessionStorage.getItem('isbn');
$.post(
"../inventory/postpage.php",
{ isbn: isbn }
);
});
</script>
There's no point in using AJAX if you need a page refresh regardless. As Dan Bracuk said in his comment, you'd be better off just doing a traditional form submission.
However, if you're set on having the page refresh, just add window.location.reload() in the success handler for your AJAX call:
$.post(
"../inventory/postpage.php",
{ isbn: isbn },
function(response) {
window.location.reload();
}
);
i have a problem when i redirect an user after edit profile and he edits the profile pic. I redirect him to his user page but it doesnt display the edited pic only if he manualy refresh page. Here is my code of the profile_edit.php page that redirects to profil.php:
<script type="text/javascript">
$(document).ready(function() {
var f = $(\'form\');
var b = $(\'#submit1\'); // upload button
b.click(function(){
// implement with ajaxForm Plugin
f.ajaxForm({
beforeSend: function(){
},
success: function(e){
window.location=\'profil.php?user='.$user_session.'\';
},
error: function(e){
}
});
});
});
</script>
add one more parameter with your url for cache busting some thing like this
window.location=\'profil.php?pram='+Math.random()+'&user='.$user_session.'\';
At first - you can add some hash, to prefer caching like
window.location=\'profil.php?user='.$user_session.'&rand='.mt_rand().'\';
This will create new url - so browser will load page as new
And it is possible, that you need add this trick to image url -- please check this moment
if you need to refresh page ( your current url equal to new one ) - use
window.location.reload(true);
at success callback instead redirect - true say to browser to refresh page
I have use modal for user sign up and its working correctly when user click on register link the modal popup load perfectly now i am making comment box where user can comment on pictures and if user is not login i want to load the same popup modal which is bind with register link some how i am successful but the error is that the load() function load the entire page for me on the same page i am totally confuse. here is my coding .
$("#button").click(function(){
var user=$("#username").val();
var message=$("#form-s-t").val();
if(user != ""){
if(message != ""){
$.ajax({
type:"post",
url:"retriveing.php",
data:"name="+name+"&message="+message+"&action=addcomment",
success:function(data){
showComment();
}
});
$("#form-s-t").val('');
}
else {alert("you can not post empty comments");}
}
Here in else portion i am loading the popup.
else{
$('.topopup').load("#toPopup");
}
});
});
The popup which loads with register link is this.
User which is not login want to comment it load the page twicly and oppositly as shown in picture.
There is no need of load() function if the model resides in the same page . try to trigger the register link which can be done like that.
Remove the load function in your else portion and just write the code I have give below.
$('.topopup').trigger("click");
.topopup
is a id of register link and you want to load this popup when user is not sign in and want to comment. I hope it will work for you. if the model resides in the same page.
From you screenshot, you send the wrong argument to the server.
$('.topopup').load("#toPopup");
// you just load "/#toPopup" page from the server
// and the server return a new page to you
// then jQuery update '.topopup' with the new
// page
You are loading an anchor, so the same page is getting injected into the elements with class .topopup. Just check your register button's onclick function and use else { thatFunction(); } if you want to recreate the same behaviour. [Also try using retrieving.php as a filename.]
To clarify: load("#toPopup") is equiv. to load(currentURL+"#toPopup"). First parameter is an URL string, not a selector string.