Develop Reference

Refresh Page with URL Hash after Submitting Form with jQuery Tabs

I'm a long time self taught user, just never had an issue that wasn't already answered in some form or another. Awesome community thank you all!
So I am dumbfounded as to why javascript will not properly refresh my page.
I have a very large page that I use with jquery and vertical tabs tagged with url hashes. This is a new function I recently added after updating to the newest version.
Upon clicking submit the form refreshes and if $_POST[update] is set it will run a set of queries. Then I have a javascript timeout that refreshes the page (ideally to the correct tab ex: home/database.php?file=101#tab3)
an excerpt of my messy code:
if(isset($_POST['update']))
{ do a bunch of sql stuff
....
<pre>
<?PHP
//unset update variable
$_POST = array();
//print_r(get_defined_vars());
?>
</pre>
</br>
<script type="text/javascript">
function Redirect() {
$('#redirect').trigger('click');
}
var currenturl = window.location.href;
document.write("<form action=" + currenturl +"><input type=submit name=redirect value=Redirect></form>");
document.write("</br>You will be redirected back to the file in 2 seconds.");
setTimeout('Redirect()', 2000);
</script>
<?php
mysql_close($conn);
}
else
{ display usual data....check boxes etc
Now I've tried refreshing in every conceivable way. I clear out the $_POST array so the page should reload displaying information, but it doesn't. However my confirmation of queries being ran show that 0 rows updated, so its not triggering the sql but also isn't properly refreshing still.
I found a function that stored the last clicked tab in the browsers session, however when you switch files, it would skip to that tab. Instead I would want to show the default tab.
I even tried made a button that on click it goes to the proper url which is shown above. It works when I click it manually but does not work when I trigger it via javascript. Even goes to the appropriate tab.
I am updating the url in the address bar using the below function. Also using the latest version of chrome.
<script>
$( "#tabs" ).tabs({
activate: function(event, ui) {
window.location.replace('#' + $(ui.newPanel).attr('id'));
var curTab = $(ui.newPanel).attr('id');
console.log(curTab);
}
});
</script>

Why don't you instead of sending that number after <form_url>?<params>#3 send that number as a request param in the url, for example like this <form_url>?tab=3?

Page reload after ajax request for delete

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.

window.location not refreshing to the existing URL

I have a PHP page with implementation of jQuery horizontal tabs. I have added a jQuery script so that the page URL reflects the tab#. I have a form on the page and upon form submission I need to refresh and stay on this same page to include the jQuery correct tab number.
This is the code to add the jQuery tab number to the URL:
<script>
jQuery(function($) {
$("<p>").html("Loaded at " + new Date()).appendTo(
document.body
);
showTab(location.hash || "#tabs-1");
$("#nav a").click(function() {
var hash = this.getAttribute("href");
if (hash.substring(0, 1) === "#") {
hash = hash.substring(1);
}
location.hash = hash;
showTab(hash);
return false;
});
function showTab(hash) {
$("div.tab").hide();
$("#tab-" + hash).show();
}
});
</script>
The full URL of the page is http://somedomain.com/includes/nonadmin_user_profile.php#tabs-5 and includes the tab number for the jQuery horizontal tab.
I am using this script to refresh and stay on the same page: echo "<script>window.location=window.location</script>";
On refresh here is the problem as it lands at this URL which does not include the tab number. http://somedomain.com/includes/nonadmin_user_profile.php
Any suggestions would be appreciated very much.
Here is another detail: The problem described above does not occur if I merely refresh the page with the browser refresh button or if I right click the page and refresh. In this instance the page refreshes and stays on the full url with the tab#.

Per Disaster Faster's request, the issue encountered was simply that the browser was not going to the desired location of the page. The form data was successfully submitted and correct page was loaded.
The solution to his issue was modifying the form's action attribute to include the location information (similar to adding location information to an anchor).
Original:
<form action="nonadmin_user_profile.php" method="post">
New:
<form action="nonadmin_user_profile.php#tabs-5" method="post">
Original Post:
The window.location = window.location redirect should include the location information.
JSFiddle: http://jsfiddle.net/6dqcmh9d/
If you click the button first, it'll report the URL with the location information because it hasn't been added to the URL. Then click the link and re-click the button. You'll receive the URL with the location information added.
If you want just the location information, you can use window.location.hash, but this will only produce the location on the page, not the URL of the page.
The problem you'll run into will be with the form submission. To submit a form without changing the page, you'll either have to submit the form to a new window (add target="_blank" to the form) or implement AJAX. In either case, we'd need a little more of your code to help with integrating it properly.

It is likely that the tab controls are being handled with onclick events or something similar, and are not listening for hash changes onload. You'll likely need to add some custom JS to force the tab change if there's a hash change.
What's wrong with using the reload() method?
document.location.reload(true);
From the docs:
The Location.reload() method Reloads the resource from the current
URL. Its optional unique parameter is a Boolean, which, when it is
true, causes the page to always be reloaded from the server. If it is
false or not specified, the browser may reload the page from its
cache.
If you need to integrate it into a PHP echo struct, use:
echo '<script>document.location.reload(true);</script>';

You should use reload() to refresh the page, eg:
window.location.reload();
Or given your example:
echo "<script>window.location.reload();</script>";

How to change URL path when paging using ajax + jQuery

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.

Is there any way to redirect to a new page and write some content with jquery on that page?

I am making a function which searches the database for flight information. I want user to be redirected on "ticket.php" if the response is true. I want to update the content of the page "ticket.php" using jquery. But jquery doesn't work. Am I doing something wrong here ? Here's part of javascript. It's an external javascript. It's included in both "search.php" and "ticket.php" page. This function gets invoked by clicking on search button in "search.php" page.
if(data){
setTimeout("location.href = 'ticket.php';",3000); // Redirect to new page
//Change content of "ticket.php" using jquery.
$("#source").text(x);
$("#destination").text(y);
$("#date").text(z);
$("#no_person").text(person);
$("#trip_type").text(type);
}
else
$("#alert").text("Oops! No Flight matches your criteria ! ");

When you set location.href to ticket.php, the user is then redirected to that new page (ticket.php). Then the browser will load that new page and will no longer use the javascript you have on your current page.
You will have to make the data appear on ticket.php, using e.g. url parameters taken from what they searched like this:
window.location.href = 'ticket.php?from=norway&to=sweden';

The reason this is not working for you is because when you redirect to ticket.php the page is reloaded and all of the javascript on the page is refreshed, losing whatever value they had before. To keep the data you have to send the information to ticket.php
There are a couple of ways to accomplish this, ordered in preferred method.
all assuming you are requesting the page like this: ticket.php?from=norway&to=sweden
php on the page ticket.php
<?php
echo $_GET['from'];
echo $_GET['to'];
?>
javascript on the page ticket.php
solution for getting params from this post:https://stackoverflow.com/a/1404100/2033671
alert(getURLParameter('from'));
alert(getURLParameter('to'));
jQuery from a different page on the same domain
$.get('ticket.php',function(response){
$html = $(response);
$html.find("#destination").text(y);
$html.find("#source").text(x);
$("html").html($html);
});