I am using a rails application, in which I am trying to open a new page, all the static page, https://www.mazzey.com/ is the link, if you click on the header buttons, it opens new page with fade in and fade out effect with the header and footer without refreshing in Mozilla Firefox but in Google Chrome the header also refreshes. I also found that that header and footer refreshes in Firefox as well but it does not that unlike Google Chrome. So can I use to Ajax or any plugin to do that to avoid refresh of header and footer ?
$(function(){
var newHash = '',
$mainContent = $("#main-content");
$(".nav").delegate("a","click",function(){
window.location.hash = $(this).attr("href");
return false;
});
$(window).bind('hashchange',function(){
newHash = window.location.hash.substring(1);
if(newHash){
$mainContent.find("#guts").fadeOut('slow',function(){
$mainContent.hide().load(newHash + " #guts",function(){
$mainContent.fadeIn('slow');
});
});
}
});
$(window).trigger("hashchange");
});
This what I am using with the ba-hashchange plugin
for more information check this
css-tricks.com/video-screencasts/85-best-practices-dynamic-content/
Related
I am using following code to let the user log into Magneto with AJAX. If the correct username and password is entered the page will refresh and display the user navbar in the header. The field works in Firefox, Safari and IE but not in Chrome. I have to refresh the page for the navbar to display.
Why does this problem occur?
Code:
AjaxLoginForm.submit = function(button){
if (this.validator.validate()) {
// show ajax image
// button.insert({"after":osc_ajax_loading_small});
AjaxLoginForm.hideLoader();
AjaxLoginForm.insertLoader(button);
$("ajaxlogin_form").request({
onSuccess: function(transport) {
var json = transport.responseText.evalJSON();
if(json.is_forgot_pwd){
if(json.success){
$("ajaxlogin_form_message").update("<div>"+json.success_message+"</div>");
$("ajaxlogin_form_message").show();
}
if(json.error){
$("ajaxlogin_form_message").update("<div>"+json.error_message+"</div>");
$("ajaxlogin_form_message").show();
}
}else{
if(json.success){
// If the correct username and password is entered
// the page will refresh and display user navbar
// in the header
window.location.reload();
}
if(json.error){
$("ajaxlogin_form_message").update("<div>"+json.error_message+"</div>");
$("ajaxlogin_form_message").show();
}
}
AjaxLoginForm.hideLoader();
//setTimeout("AjaxLoginForm.hideResponseMessage()", 5000);
}
});
}
}.bind(AjaxLoginForm);
You can try it with a setTimeout.Also you can simplify the code,currently you are writting json.success and json.error multiple times which should be written once.
setTimeout(function(){
window.location.reload();
},100);
try this, I am preety sure in chrome window.location = self.location; should work, or try location.reload( true ); otherwise by callback some other function to reload your page.
Otherwise you should get some error that prevents reload, you can get a console in success.
For script is in iframe top.location.reload() works for me.
Trying to load contents from an element into another element from another page, problem is in chrome it loads the entire page in to the element. See for yourself here: http://www.monsterhighshop.co.uk/gadgets-electonics
$(function(){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
$("a[rel='sort']").click(function(e){
pageurl = $(this).attr('href')+"?rel=sort #categoryproducts-productlisting";
$('#categoryproducts-productlisting').load(pageurl);
//to change the browser URL to 'pageurl'
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=sort',success: function(data){
$('#categoryproducts-productlisting').html(data);
}});
});
i am trying to load external sites in a div on clicking to the respective tabs. i am new to ajax jquery cud any one can suggest for correct solution.
i have tried this
You can only do this using an iframe due to cross domain restrictions. See http://en.wikipedia.org/wiki/Same_origin_policy
To get around this you can change the #test element to be an iframe
and rather than ajax loading try something like:
$("#test").prop("src", link);
I've updated your fiddle to show a working example.
http://jsfiddle.net/Ztxsx/5/
Essentially all you need Javascript wise is:
$('#nav ul li a').on("click", function(e) {
var url = $(this).text();
var li_link ='http://www.' + url + '.com';
e.preventDefault();
$("#test").prop("src", li_link);
});
I have a jquery to show links in a div without reloading page:
jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$("#content").load( $(this).attr("href") + " #content");
})
});
</script>
everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?
and second question, is there any way to show a new page link in address bar after loading?
You can use the call back function to remove the loader.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$('#loader').show(); // Show some hidden loader on the page
$("#content").load( $(this).attr("href") + " #content", function() {
$('#loader').hide(); // Hide the loader when it completely loads the given URL.
});
})
});
</script>
For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript
I have been trying for two days to get ColorBox to return post results back to the same open box but it just will not do it.
I am using Jquery Form Plugin to Post from a ColorBox. It seems to work in IE 8, but not Safari or FireFox.
In IE 8 it returns the result from the post page "action" and returns the result in the same ColorBox but in FF and Safari it closes the box and sits on the load page (i.e. process1.php)?
I have a page say "process1.php" which loads the ColorBox onLoad (it does this no problem)
Load Page ColorBox Code For process1.php:
var $j = jQuery.noConflict();
$j(document).ready(function() {
$j.fn.colorbox({
href:"process2.php",
escKey: false,
overlayClose: false,
width: "60%",
height: 350,
title: "Process Secure Order",
open:true
});
});
Upon Page Load it will load the "process2.php" displaying a form for the user to submit data.
This is my JQuery Form Plugin Code:
var $j = jQuery.noConflict();
$j(document).ready(function() {
var options = {
beforeSubmit: showSpinner,
success: showResponse,
//resetForm: true,
timeout: 3000,
target: '#output1'
};
function showSpinner() {
$j('#sterms, #accept, #decline, #side-cart').hide();
$j('#working').show().html('Please Wait');
return true;
};
function showResponse(){
$j('#working').hide();
$j('#result').show();
return true;
};
// bind form using 'ajaxForm'
$j('#secure_process01').ajaxForm(options);
});
It posts fine and then just tries to reload the same page with out the ColorBox opening on Load.
It has me stumped why it works in IE and nothing else, any help would be appreciated.
Using JQuery 1.5.2 (JQuery Form Plug In is not working with anything higher has permission issues)
Reference For JQuery Form Plugin http://jquery.malsup.com/form/#ajaxForm
This issue has been solved.
It turned out that the Jquery Form Plugin did not like the 1.6.1 JQuery version so I did the code using Jquery Post and it worked in all browsers.
ColorBox plugin big rap, great and easy.