I'm trying to load my next/previous posts links with ajax. I've written this piece of code, and it works well. However, when the user clicks the 'Back' button, the location in the address bar is not updated.
$(".next a").live("click", function(e){
e.preventDefault();
$("#portfolio_item").load(jQuery(this).attr("href") + " #portfolio_item");
$("#portfolio_item").animate({marginLeft:'98%'});
$("#portfolio_item").animate({marginLeft:'0px'});
$("#right_content, #gallery").fadeOut().delay(1000).fadeIn();
return false;
});
I've read about plugins like 'jquery address' and 'bbq', but how can I apply them to my code? Hoping for help!
I'm not sure if this is what you want but if you need some URL edit + history management (without loading a new page) you should checkout history.js. This is an awesome js library that allows you to rewrite your URL without reloading a page and storing your history in JavaScript variables.
In order to see how it works there is a downloadable demo and a tutorial on the first link I gave you.
Hope this helped.
Related
I want to create a theme in which the website page slides out and slides in. I already have the website link which is not developed in wordpress. I am trying to create the exact same theme for the wordpress the functionality of sliding the page out and page in is the only issue. As we click on the navigation menu the complete page get refreshed can we avoid that and load the page body/content using ajax.? Any help would be much appreciated.
Thanks in advance.:)
this code below works for me with posts:
$('a.ajax').click(function(event) {
$.ajaxSetup({cache:false});
var post_url = $(this).attr("href") + ' #primary-ajax';
nanobar.go(100);
$("#portfolio-content").load(post_url,function(){
$(this).addClass('open');
$('body').removeClass('ajax-wait');
});
event.preventDefault();
});
I just tested it for pages and it works too.
You will need to tweek it for you needs but this entirely possible!
I have a website where I am switching from addThis to addToAny for social sharing buttons. The problem is that the share buttons are contained in content that is loaded dynamically with jquery Waypoints infinite scroll feature (which uses Ajax). When the page first loads (so no Ajax called yet) everything works great, but when a user scrolls and more content is added that contain the share buttons, the new buttons don't work in that they don't show the share options on hover or click.
There are supposedly fixes for this if using templates from the likes of Drupal or Wordpress, but my site is not built using any of these templates. This was also a known issue with addThis, and to get around the problem you simply need to add 'addthis.toolbox('.addthis_toolbox')' into the success portion of the ajax call and things would work.
I haven't had any success getting addToAny to work after ajax returns. They have something that looked promising: a2a.init('page'), but that doesn't work. Has anyone had this problem and have any suggestions on how to fix it? Thanks!
If there so many share button on one page you can call this after ajax success:
$(".a2a_dd").each(function() {
a2a.init('page');
});
Or if there only one share button, you can use this after ajax success:
a2a.init('page');
If want to know more details go through this document
According to the AddToAny API (https://www.addtoany.com/buttons/api/), you should use a2a.init_all(); if you are loading a number of new share button sets at once via AJAX.
Using a2a.init('page'); only initializes the last uninitialized buttons instance on the page. That might be fine for you, depending on how many new buttons that you load at a time.
Example: you have a blog site that loads new posts when the user scrolls to the end of the page. If you are only loading one new set of share buttons for the new content, a2a.init('page'); should work. If instead, you are loading a few new posts at a time, that each get their own set of share buttons, you will want to use a2a.init_all();
Hope this helps someone!
I'm adding a facebook share button to each post on a Wordpress (Using Facebook Share Button New plugin), it works ok for each post/page except when i'm loading them trough ajax, the result it's a normal Facebook like button but the popup (to write a comment) appears inside the button it is not expanded.
To check go to: http://iwanttobeher.com/ and then click on any face at the bottom of the page, then test the like button and you'll see what happens.
I don't know what to do, i tried to FB.XFBML.parse() after loading the content but the result is the same.
Switching to HTML5 didn't help in our case. What did was to remove the FB object just prior to new content being inserted into the page via Ajax:
delete FB;
wrapper.html(response.data);
We reload full pages via Ajax and so new page content recreates the FB object and re-initializes XFBML anyway. Not sure if this workaround would work if we reloaded only parts of the page though.
The original answer is here.
I've managed to fix it by changing the implementation to HTML5 instead Iframe or XFBML using Facebook's tool to generate like buttons: https://developers.facebook.com/docs/reference/plugins/like/
I know there are plenty of plugins can archive this, but I think I want to make a simple one for learning purposes because I have come this far that I can change the url with location.hash when I load an ajax page.
Now I only need to find out - how do I use simply jquery to check there is a fragment on the url when I click back button on the browser?
I came across this simple concept but it works only if I ciick the browser refresh button but not the back button,
$(document).ready(function(){
if(window.location.hash) {
// Fragment exists
var hash = location.hash;
alert(hash);
} else {
// Fragment doesn't exist
}
});
Can you please give me some guide?
Thanks.
You are looking for the hashchange event. But it is not supported the well by older browsers which is why all the plugins exist. Check out the code of Ben Alman's hashchange event plugin to see how it supports all the fun quirks of different browsers:
https://github.com/cowboy/jquery-hashchange/blob/master/jquery.ba-hashchange.js
JQuery has a means of simulating hashchange event for older browsers too - basically it works by polling the URL. You might also want to think about what you want to do with redirects e.g. for authentication) See http://tshrestha.blogspot.com/2013/05/hash-bang-url-fragments-and-http.html
Its really hard to search the any combination of keywords in search engine about this because it used by most popular developer wanted a custom autocomplete by ajax.
Most developer search about the custom autocomplete to get result from db by ajax or about how to disable browser autocomplete due to security reason or they wantted to use another autocomplete extender.
However I am not talking about the autocomplete. I finding about simple normal browser autocomplete or browser saved form either IE or FF that will act like dropdown recent choice during filling a text in a textbox.
It simple and normal filling a form like username and password in a login form. After the form submitted (the form data post) browser will save the autocomplete or event in FF will ask to save along with the password.
Now, think about the login submitted via ajax. The form data not automatically saved by either IE or FF simply because the form not sent by post method. I am pretty sure it is because of ajax vs post method.
CMS like DotNetNuke using this way and its really hard to me to type username and password for 5 user login for development purpose, event I want to let user save their own form data in the browser without any custom or extender. By another example, user can see and use same email to fill an any email form across web site or domain.
How to workaround with this?
Did you have suggestion what keywords is more suitable to search?
CallMeLaNN
I'm having the same problem. I was able to solve it for FireFox by adding a hidden iframe that I submit via JavaScript before doing my AJAX post. I still haven't found anything that works in Chrome/IE.
I've been faced with same issue and searched a bit. I think the solution below is the most convenient way to solve this if you have a login page. If we consider the login submitted via ajax, none of the browsers remember or offer autocomplate feature for user name and password field additionally ask to remember the credentials. But if you use the javascript submit feature (Probably it's not compatible with older versions of browsers), All of the browsers offers to save the username and password except IE. But I've found another javascript tricky for IE to make it offer to save username and password.
In my login page, I've handled the username and password and send them to serverside by ajax request and if the login is succeeded, i submitted the form by the method below otherwise It had been shown an Alert box to the user that the login was failed.
Please Check the link below:
[EDIT]: Link is broken
There is a fixed page about this issue in the page linked, i can not give you another link because of my reputation. Please search for the quotation below in the page:
Look at the fixed page.
Of course,this approach does not fit if you have a login section in the default page because of the form submitting. This causes the page flickering. I wonder if someone has an idea about it?
Here is some unobstrusive js jQuery code that will submit a form both via ajax ($.post method) to a real backend script and also to a dummy script via an iFrame, so the browser will save the submitted data for subsequent autocompletion.
This is working great under chrome. Any feedback is more than welcome!
var formframesindex = 0;
function onSubmitAjax(evt){
var $form = $(this);
var framesubmitting = $form.hasClass('framesubmitting');
var action = $form.attr('action');
var original_action = action;
if(!framesubmitting){
$.post(action,$form.serialize()+"&ajax=1", function(responseText,message,request){
formResponseHandler(responseText);
}, "json");
formframesindex++;
var formframe = $("<iframe name='formframe_id_"+(formframesindex)+"' id='formframe_id_"+(formframesindex)+"' class='formframe' src='/fakeformreceiver.php'></iframe>");
$('body').append(formframe);
var target = $form.attr('target');
$form.data('originaltarget',target);
$form.data('originalaction',original_action);
$form.attr('target','formframe_id_'+formframesindex);
$form.attr('action','/fakeformreceiver.php');
$form.addClass('framesubmitting');
$form.submit();
} else {
var current_target = $form.attr('target');
var original_action = $form.data('originalaction');
var original_target = $form.data('originaltarget');
var $frame = $('#'+current_target);
setTimeout(function(){
if($frame && $frame.length){
$frame.remove();
}
$form.attr('action',original_action);
$form.attr('target',original_target);
$form.removeClass('framesubmitting');
},100);
}
return framesubmitting;
}