Develop Reference

Jquery Ajax call HTML5 History and back button

I've read a lot about this and feel that while I understand all the parts, I can not figure out how to put it all together without redoing my project. I have ajax set up and working really well on my site. I was able to add a # in the URL when new content comes in. The back button works, and goes through all the correct URLs without reloading the page, but the ajax doesn't refresh.
This is my HTML for the buttons:
<a class="portfolioThumbnail" onclick="return false;" data-name="myPage" href="myPage.html">
<img src="imagepath" />
</a> <!-- portfolioThumbnail -->
and here is my Jquery:
$('.portfolioThumbnail').on('click', function(){
var thisProject = $(this).attr('href')
$.ajax('http://oursite.com/' + thisProject, {
success: function(response) {
$('.projectWrapperReplace').html(response);
},
error: function() {
alert('error');
},
timeout: 5500,
beforeSend: function() {
$(this).find('.portfolioThumbnail').addClass('loading');
},
complete: function() {
$(".blurable").addClass('blur');
$(".blurable").addClass('whiteOut');
$('.projectWrapper').fadeIn('slow', function(){
$('.projectWrapper').addClass('noBlur');
window.location.hash = thisProject;
});
}
});
});
I have a div called projectWrapperReplace in my HTML too. Looking if anyone can help me get this working. Thanks

You need an event listener for when the back or forward buttons are pressed (right now you're only loading the ajax content when you click the .portfolioThumbnail buttons).
Make the ajax load and state classes a separate function, say hashChange()
Checkout onhashchange
//call hashChange on window hash chage
window.onhashchange = hashChange;
//and also on buttonclick
$('.portfolioThumbnail').on('click', function() {
hashChange();
})

Bootbox modal is not showing up if I click on a link that contains an "href"

Ok so I am using bootbox which works perfectly, but when I want to send variables in a link with PHP then all javascript works but not the bootbox.
----This works----
I dont have an href
<script>
$(document).ready(function()
{
$('a.alert_without_href').on('click', function()
{
alert('This works');
bootbox.alert("This ALSO works");
});
});
</script>
----This doesn't work----
I have an href<br><br>
<script>
$(document).ready(function()
{
$('a.alert_with_href').on('click', function()
{
alert('This works');
bootbox.alert("This one DOESNT work"); <---- PROBLEM IS HERE
alert('This also works');
});
});
</script>
----And then finally to display----
<?php
if ($_SERVER['REQUEST_METHOD'] === 'GET')
{
echo 'Hello ' . $_GET["name"];
}
?>
I do need to pass a variable in the link, it cannot be taken out. How can I fix this?
Thanks in advance
----EDIT----
I added an image of a table below with an explanation of what exactly has to be done
Table of users
--ONLY READ IF YOU SAW THE IMAGE--
So each link under "Action" in the table creates a link with a variable of the user's unique ID. When it is clicked I check if $_GET['remove_id'] is set and then run a MySQL query to delete that person with that ID.
So basically the idea of Bootbox is to be a confirmation message if you want to delete the user, I don't want to use normal alert('') because that can be disabled.
p.s. the delete function does work, I just want to add a confirmation now using bootbox.

Bootstrap (and therefore Bootbox) modals do not generate blocking events, so if you want something to happen when you click on a hyperlink, you need to prevent the default behavior (page navigation). Something like:
I have an href<br><br>
<script>
$(document).ready(function() {
$('a.alert_with_href').on('click', function(e) // <-- add an event variable
{
e.preventDefault(); // <-- prevent the event
bootbox.alert("I am an alert!");
});
});
</script>
Since you said you want to confirm something, use bootbox.confirm and some AJAX:
I have an href<br><br>
<script>
$(document).ready(function() {
$('a.alert_with_href').on('click', function(e) // <-- add an event variable
{
e.preventDefault(); // <-- prevent the event
var data = { name = $(this).data('name') };
bootbox.confirm("Really delete?", function(result){
if(result){
$.post('your-url', data)
.done(function(response, status, jqxhr){
// do something when successful response
})
.fail(function(jqxhr, status, error){
// do something when failure response
});
}// end if
}); // end confirm
});
});
</script>
I also added a data-attribute to make it easier to get the value for posting (don't use a GET request to perform a delete action). I would assume you would reload the page on a successful delete, or you can use .remove to remove the "row" containing the item you're removing

Javascript/Jquery : Back button not changing content at all

<script>
$(function(){
$("a[rel='tab']").click(function(e){
e.preventDefault();
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
</script>
I pulled this code off a demo and am modifying it to fit my particular project; however, am attempting to run it as it is to test out features. The demo worked perfectly. The only major difference is they are using jquery 1.4.4 and I am using jquery 1.9.1. I cannot seem to get the back button to work correctly. The url changes when hitting back; however, the #right_column doesn't update at all. I copied this code directly off a demo and adjusted the div id to match mine, and it still doesn't work. The below line of code is the questionable code.
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});
Also, can I use location.pathname.replace('index.php', 'view.php') ? Not sure if this is the correct way of writing that particular code to replace index.php?variables... with view.php?variables... to load that page into the right column. See my other post if this part of the question confuses you... javascript/jquery: Need to substring in jquery (modified code)

For those that this may help, this ended up fixing my code and it now responds to back button.
$(window).on('popstate', function() {
$.ajax({url:$(location).attr('href').replace('index.php', 'rightcolumn.php') +'&rel=tab',success: function(data){
$('#right_column').html(data);
}});
});

load gif image while loading the other page using ajax

is there any way that loading GIF image while onclick and simultaneously, navigation should happen.
i tried this way..
$("#Videop").click(function ()
{
//till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
$.post("http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx",
function (data)
{
//get the new HTML content
$("#root").html(data);
});
});
but how about the script files and background function calls associated with that page?

what I understood from your question is, to redirect when #Videop is clicked and show a loading GIF image
$("#Videop").click(function ()
{ //till the time the post function below doesn't return the following image will be displayed
tactile.page.getComponent("loadingnext").show();
window.location.href('http://cloud.netbiscuits.net/1305494/SyngentaMobileStage/aspx/Video.aspx');
});
The above code will show the GIF image, until your page is redirected. Now you will not have the head ache of bringing all the css and script files from that page to here.
EDIT:
in your new page Video.aspx add this, hope this will solve your problem
$(document).ready(function(){
//Display your GIF Image
//tactile.page.getComponent("loadingnext").show();
console.log("I'm loading");
});
jQuery(window).load(function () {
//Hide your GIF image
// tactile.page.getComponent("loadingnext").hide();
console.log('page is loaded');
});

I think what you need is a progress function, and show a waiting image before ajax starts, and hide after ajax ends.
Add a element hidden in the body tag, that could be a image or a loading div.
Define a function.
Call it before and after ajax.
Here is a small demo, hopes to help you out.
#loading{display:none;position:absolute;left:50%;top:50%;width:100px;border:1px solid #ccc;}
<div id="loading">loading...</div>
$.progress = function(stop){
if(stop){
$('#loading').hide();
} else {
$('#loading').show();
}
};
$.ajaxSetup({
beforeSend: function(){
$.progress();
}, complete: function(){
$.progress(true);
}
});
You can change the style by yourself.
jsfiddler was down, I can not write code, sorry about that. :D

Display image while running POST

I have this code that I use to POST without reloading the page, but I wonder how I can add that in the script being executed display an image. example loader.gif
Thanks for your help.
<script language="javascript" src="jquery-1.6.4.min.js"></script>
<script language="javascript">
$(document).ready(function() {
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('slow');
});
$('#form, #fat, #form').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})

Not sure if I understand, but it seems you're quite near to it
// #loading could be an img tag pointing to loader.gif or a div containing the img
$('#loading').ajaxStart(function() {
$(this).show();
$('#result').hide();
}).ajaxStop(function() {
$(this).hide();
$('#result').fadeIn('slow');
});

Use JQuery to add the image to the page. Generally this is added close by the button the user clicks to start the AJAX request. This allows the user to see that something is happening in the background while your scripts run.
Alternatively, since your script is being run on document.ready, you could have the image from the get-go and then remove it once the ajax call completes.

put the loader in a hidden div (display:none) you can then use
$('#div').show();
before the ajax request and then hide it again in the success callback:
$('#div').hide();

at the first line of submit function:
$('#loadingImg').show();
and at the first line of callback success function:
$('#loadingImg').hide();