|
JavaScript - Back Button And Ajax Issue
I have a website using this pageslide function
http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? Similar TutorialsHow you handle back button scenario in firefox browser. The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache. It works in IE.. Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
i have the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location? this script is generated from easypano tourweaver - Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Tour Created By CAPITA SYMONDS</title>
</head>
<body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg");
so.addVariable("lwBgColor", "255,255,255,255");
so.addVariable("lwBarBgColor", "255,186,186,186");
so.addVariable("lwBarColor", "255,153,0,0");
so.addVariable("lwBarBounds", "-512,-384,1024,768");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "false");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("iniFile", "config_2_Area_Multipix.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf");
so.addVariable("href", location.href);
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
here is the button code - Code: <span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span> I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript. When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page. I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good. Thank Sorry if this is the wrong place for this question, but... I'm having an issue with the difference in behavior between the IE and FF back buttons. I'm using jQuery to create collapsable div regions which contain text boxes on a search form. After submit, if the use clicks the back button in FF, the region(s) the user had previously expanded, show as expanded. Also, there search term is still present. In IE, when clicking the back button, all regions are collapsed, in there original loaded state, but the search term is still saved. I put the following code at the top of the page: onload=function(){ alert('Onload!'); } When clicking the back button in FF, nothing happens. For IE, the alert pops up. This tells me that IE reloads the page (but somehow still saves some things, like the search text). My question is, is there a way to keep IE from reloading when the use clicks 'back'? I will be creating my own 'edit' back button for users to get around this, but I also would like to prevent this from confusing users and causing undesired results. Any help would be greatly appreciated. Hi, I have the following problem: When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not. Code: <script type="text/javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "blabla";
}
</script>
I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) {
if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
staying_in_site = true;
}
});
window.onbeforeunload = popup;
function popup() {
if (staying_in_site) {
return;
}
if (popup_displayed) {
return;
}
popup_displayed = true;
//popup displayed here
}
The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? Hello, I need some script to force the browser to reload/refresh when a page is reached from the back button. EG You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload. Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum). Any JS solution that will trigger a reload on browser back is appreciated. I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe. Thanks. Hello Everbody, I have been at this problem for 10 hours now and am going NUTS!! I am making website to look around an ancient Egyptian Tomb. Feel free to have a look: http://www.campbelltest.co.uk/britishMuseum/online/ I have a flash movie which I have scripted to utilise the browser back button using this script http://www.asual.com/swfaddress/docs/. This works fine until open a lightbox image form within the flash movie using Lokesh Dhakar Light box http://www.lokeshdhakar.com/projects/lightbox2/ and the browsers back button stops working!! The code below is to the JavScript links and the code that lauches the lightbox: Code: <script type="text/javascript" src="js/swfaddress-optimizer.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript" src="js/swfmacmousewheel.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- start | JC -->
<!-- added for flash -->
<!-- added for launch from flash -->
<script language="JavaScript">
function openLightbox(url,group){
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox['+group+']');
objLink.setAttribute('title','caption');
Lightbox.prototype.start(objLink);
}
</script>
<!-- end | JC -->
This code is how I have embeded the flash in the page: Code: <script type="text/javascript">
var so = new SWFObject('container04.swf', 'container04', '760', '450', '8', '#ffffff');
so.useExpressInstall('js/expressinstall.swf');
so.addParam('menu', 'false');
//so.addParam('movie','container04');
so.write('flashcontent');
var macmousewheel = new SWFMacMouseWheel( so );
</script>
I have added a text box to movie that shows the back button function exicuting and what its exicuting. I have never done any work with JavaScript before so I am up the creek without a paddle!! The question is on iframes/bookmarkablity and back button functionality. This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar. The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful. Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue. Gmail and other sites looks like they does something like this. Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> Hi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that. If anyone can help please reply, thank you. Hi, "This happens only in chrome browser" I am trying to design a website and it has a couple of radio button on the first page. I selected one radio button and navigated to the next page. On my second page, if i hit back button, the first page show the radio option that i selected(which is correct) but when I hit save and continue it throws a JS error "please select one option". Chrome forces me to re-click the radio option again. The application is MVC 3.5, C# Here is the snippet of the ascx Code: <%= Html.RadioButton("radAccnt", "abc", Account != null ? (entity != string.Empty ? (entity.Substring(0, 3).Equals("abc") ? true : false) : false) : false, new { id = "radAbc", onClick = "SetEntity('abc');", onBlur = "javascript:ValidateOnBlur(\"ValidateAccount('true');\");" })%>
I had a alert in SetEntity(Value) function and value is empty when the back button is clicked. I did some research and found that Chrome does not cache the form data. If this is true is there a work around for this? Please help. Thanks. It's a well documented issue- when you have a page that contains an iframe, and then navigate inside the iframe, hitting the browsers back button will only affect the contents of the iframe and not the entire page. I've been searching all over for solutions and cant find one that works for my current implementation. Anyone have any suggestions? Here is my code: js Code: function ShowPage(frame)
{
frames[0].location = frame+'.html'
frame.contentWindow.location.replace(newUrl);
}
Buttons that change the contents of the iframe Code: <div id="thumb1"><a onmouseover="ShowPage('frame1')"onclick="ShowPage('frame1')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb2"><a onmouseover="ShowPage('frame2')"onclick="ShowPage('frame2')" rel="nofollow" target="mainbox"></a></div>
<div id="thumb3"><a onmouseover="ShowPage('frame3')"onclick="ShowPage('frame3')" rel="nofollow" target="mainbox"></a></div>
and then the iframe itself Code: <iframe src="frame1.html" type="text/html" style="border-width:0; border-style:hidden;" transparency="true" name="mainbox" frameborder="0" scrolling="no" width="700" height="807"> </iframe> I have these buttons that I need to have switch accounts on and off. They work, but for some reason the words on the buttons are not changing from Activate to Deactivate... It seems as though the button is not updating itself after success of the function. First post on here so I apologize if I am doing this wrong. Problem code in jsbin--> http://jsbin.com/okifa3/ Code: $(function() {
var activateOwner = function(u) {
var dataString = 'oid=' + u + "&a=1";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Activated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'inline');
$('#' + u).val('Deactivate');
$('#spanownernametext' + u).css('display', 'none');
$('#' + u).removeClass('btnActivate');
$('#' + u).addClass('btnDectivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
var deactivateOwner = function(u) {
var dataString = 'oid=' + u + "&a=0";
$.ajax({
type: "GET",
url: "{/literal}{$site_root_path}{literal}account/toggle-owneractive.php",
data: dataString,
success: function() {
$('#spanowneractivation' + u).css('display', 'none');
$('#message1' + u).html("Deactivated!").hide().fadeIn(1500, function() {
$('#message1' + u);
});
$('#spanownernamelink' + u).css('display', 'none');
$('#spanownernametext' + u).css('display', 'inline');
$('#' + u).val = 'Activate';
$('#' + u).removeClass('btnDeactivate');
$('#' + u).addClass('btnActivate');
setTimeout(function() {
$('#message1' + u).css('display', 'none');
$('#spanowneractivation' + u).hide().fadeIn(1500);
},
2000
);
}
});
return false;
};
$(".toggleOwnerButton").click(function() {
if($(this).val() == 'Activate') {
activateOwner($(this).attr("id"));
} else {
deactivateOwner($(this).attr("id"));
}
});
});
When performing an Ajax request I want to change the submit button into a loading image and then swop it back again when the Ajax request is complete. I don't want a loading image anywhere else as on mobile phones it can't always be seen due to small screen size. I have grabbed the event (which references the form, is that right?) and I have something like this: Code: <button type="submit" name="name_can_vary">Search</button> event.name_can_vary.style.visibility = 'hidden'; //(obviously this isn't complete code but no doubt explains what I am talking about) ..which would hide the button and works exactly as I want to this point, but of course it does;t return when Ajax has completed or show the loading image. Ideally, instead of just hiding the button I want JavaScript to swop the button for the loading image. I suppose I could have extra HTML on every page that is made visible with the loading image but I would rather have JS do everything from here (saves editing all pages with submit buttons on). Thanks for any help. I am trying to follow this article on doing a POST request with AJAX and PHP and it works fine, but as soon as I switch from the default submit button to an image I get an error. I would really appreciate any assistance on why switching the submit button to an image would affect it. Thanks http://www.hiteshagrawal.com/ajax/form-post-in-php-using-ajax/comment-page-1 The only way I can figure out to invoke an event handler, like onchange or jquery's change, after an ajax response is rendered to page is by triggering event handler within the ajax call. Is there a better way to do this? It looks like bad code but this is only where I am at right now in rendering a table to page and now allowing user filtering: (function($){ var listview = $('#listview'); $('#dashboard a').click(function(){listLoader(this);}) var listLoader = function(context, options){ for(var i = 0; i < arguments.length; i++){ var data = arguments[1] } var url = context.href.substring(context.href.lastIndexOf('#') + 1); $.ajax({ type: 'GET', url: '/' + url, data: data, dataType: 'html', error: function(){}, beforeSend: function(){}, complete: function() {}, success: function(response) { listview.html(response); $("select").change(function(){ var option = $(this).val(); listLoader(context, option); }) //end for change } }) } })(jQuery) Hello, I am very new on JS and Ajax. It does not work correctly. It posts not only form values but also whole form, box etc. eveything. Also form values disappears after a very short time. Why it is like that? My decisive aim is transfer this form values to php and database via ajax. http://fcbk.imeee.org/test.php Thanks in advance.. |
|||||||