any way to stay in the same location when refreshed - javascript

i am working on jquery and javascript. and is there any way to make the page refresh and to restore the same link which is clicked. for example. in gmail.com when we open sent items which is in the lefthand side of the window and refresh the page. it get reloaded with the same sent items tab's contents, same things work for inbox and drafts when refreshed. is there anyother method or example to acheive this. if yes. please help. it would be appreciated.
here is my code to make the page refresh on refresh:
<script>
$(window).load(function(){
$(function()
{
$('#submit').click(function()
{
$('.container').show();
$('#login').hide();
$.cookie('shown', true);
});
if ($.cookie('shown')) {
$('#submit').click()
}
});
});
</script>

Here is a sample ajax form submit script.
// this is the id of the submit button
$("#submit").click(function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data); // show response from the php script.
}
});
return false; // avoid to execute the actual submit of the form.
});

Presuming that you're using Ajax to change your page states, why not look at something like History.js?

Related

ajax or post jquery method do refresh for page anyways

Have problem with snipped of jquery handler for email form submission:
Seems like submission 'hang on' when I use e.preventDefault otherwise it just load email.php page. So Any search, even add to html onSubmit="reutn false;" doesn't help. What's wrong?
if comment out preventDefault then everything works fine, but load email.php, if leave seems $ajax or $post dont do anything...
Search for prevent default, read documentation try to return false directly from script, I use jquery 3.4.1
$(function() {
var form = $('#email_form1');
form.submit( function(e) {
// problematic string
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
window.alert(data);
form[0].reset();
$('#mail_popup').magnificPopup('close');
}
});
});
});
I expect that ajax request will execute email.php in background but it loads this page...
The problem was in using jquery slim instead standard. it hangs on $ajax unknown method :( shame on me....

JQuery refresh ajax data on browser refresh

is there any method in JQuery or Javascript to prevent the page refresh (F5) and then update only some parts of the page with Ajax?
I tried the code below with no results.
$(window).bind('beforeunload', function(event) {
event.preventDefault();
//My ajax refresh code
});
Many thanks for your time.
you can try this with below code:
$('.update').click(function () {
$.ajax({
url: "",
success: function (s, x) {
$('.yourupdatesection').html(s);
}
});
});
You can add update button in that section and then you will click on
it and only that one part will update with ajax

Refresh Div's content after AJAX form submission

I have this Ajax code to submit a PHP form. The code works, however I would like the <div> that the content is supposed to change to refresh without the whole page refreshing.
The div's ID is #container.
Here is the AJAX code:
$('.accept_friend').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function( data )
{
//here is the code I want to refresh the div(#container)
},
error: function(){
alert('ERROR');
}
});
return false;
});
You will have to change the DIV's innerHTML property.. with jQuery it is done like so:
$('#container').html('... new content goes here...');
so in your case add in the success function:
$('#container').html(data);
or
$('#container').html(data.someAttribute);
depending on the type and structure of your returned data.

Delay page unload after submitting form

Is it possible to delay the moment when the unload method is called on a web page?
I have N pages and each page contains a form. I don't want users to click on a submit button so I simulated a click on the hidden submit button via javascript. This is activated everytime the user change page:
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
}
This doesn't work but if I put an alert after .click ()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
alert("submitting form");
}
everything works like a charm. This because the alert gives the form the time to actually submit its data; without the alert the page unloads before the form has been submitted and therefore the changes are not saved.
I tried to put a dummy setTimeout after .click()
window.onbeforeunload = function() {
document.getElementById('submit_id').click();
setTimeout(console.log("dummy"), 200);
}
but it didn't work. Any help or feedback on this would be greatly appreciated.
if you use jquery, you can try to save via ajax. and maybe adding async to false, not recomended but could work in your example if save function is really fast.
http://api.jquery.com/jQuery.ajax/
here is how i save:
var $form = $('#formId');
$.ajax({
type: "POST",
url: $form.attr('action'),
data: $form.serialize(),
error: function (xhr, status, error) {
// error
},
success: function (response) {
// sucess
}
});

How to check if a page's content has been modified?

1 - I have a web page, in that page there are many external links
2 - When user click on any external link then a popup should be come with the message that page has been modified by dynamic action or it not.
3 - How can I check the page status using JavaScript / jQuery?
Thanks in advance.
you can go for "onhaschange" event of window/body on change simply set some flag which you can check on click of link to show whether page is changed or not.
Add some state variable to javascript, like:
wasModified = false;
Subscribe on click event of every external link or whatever you want to react on, like that:
$('.external-link-class-selector').click(function(){
wasModified = true;
//in case click mean it was modified and you should notify user
alert('Page was modified');
});
see
$.ajax({
url: "",
type: "post",
dataType: "" ,
data: ,
}).done(function() {
//sucess
});
make a function in Javascript including above function and Post values by this method to the same page and append success message on the page.

Categories