Ajax Load more Articles button not working when posts filtered from tag or month - ajax

I have created a post filter option which allows the user to filter posts by the month or the post tags.
The issue I am having is when I click on any of the filters it filters the posts using ajax and loads the appropriate posts but when I try and click the load more posts button it reloads the page without actually accessing the ajax script.
On the home it works perfectly and for the tags if I refresh the page then use the button it works properly as well.
I am not sure what exactly might be causing this to happen. I think it might be the way I am displaying my posts.
Any help would be appreciated also if you need any code or anything please ask I shall provide you with it.
Thanks.

Related

AddToAny reload after Ajax

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!

How to make the Wordpress admin-bar work with AJAX loading

I'm working on a website that uses html5's push- and popstate in combination with ajax-calls to create a website that dynamically loads in Wordpress posts and pages, without causing a page refresh.
I've got that working fine, but I would love it if the black Wordpress toolbar/adminbar that shows at the top of the site when you're logged in as an admin, also reflected the change of content. Is there any way at all to make this happen? So that when I go from a post to page, for example, the "edit" link in the admin bar updates.
I don't think it's as easy as I hope it is, and if it can't be worked out I think I'll just disable the adminbar on the front-end. But it could be that I'm missing something.
Thanks in advance!
I'm working on this myself. I'm gonna build an ajax action and jquery function to do this. I will post here when it's done. For NOW i've instructed my users to just refresh to get the edit link. if you're using HTML5 history then you're on the permalink you want anyways. refresh and let the server regenerate the bar. not perfect but not terrible.
another option is to put edit post links in your template.

Joomla component - how to convert standard php form into joomla component

Currently i have been using an iframe component to display a php page that i have written. the reason i used iframe rather than writing a joomla component in the first place was for 2 reasons, the information that is displayed in that page is from a remote mssql sever and the second was that i didnt really understand how to write one.
Now i have completed the creation of the php page that i display within the iframe, but now i need to be able to have it inherent within the joomla site, for both display reasons and security.
basically its a single page that displays information in a bunch of drop down boxes and then a submit button is clicked and it posts that information to another php page that again queries the mssql server and displays the results based on the post from the previous page.
query.php, posts some variables to results.php and is displayed in a table.
i have the functionality perfect, but i dont understand the documentation i have read so far. is there any simple component i can see the code of so that i can try and work out whats going on?
You might want to look at http://docs.joomla.org/J3.1:Developing_a_MVC_Component/Introduction and follow the process outlined.

Back button to ajax results, advice request

I am trying solve the back button issue within my app. The scenario is:
I have a home page with a search form which sends and receives data with $.ajax(), then the results loaded through ajax, their links points to a controller that won't be done by GET in ajax so that means that the page will be refreshed (so the home page with the results looks like this: http://url/en/home and a result link may look like this http://url/fetch/data/x123av).
The problem is which is the best way fix that when click back button to return the results from the search box?
I have found some answers in stackoverflow related to my question:
http://code.google.com/p/reallysimplehistory
http://tkyk.github.com/jquery-history-plugin
But from the documentation of those plugins, they all work by checking the hash change which I don't have.
Hope I have explained well enough, and I do have searched stackoverflow and google for a solution but I didn't find one that is close to this or either I've jumped over it...
Please just point me to the right way :D
But from the documentation of those plugins, they all work by checking
the hash change which I don't have.
If you want to handle the back button with AJAX request you will have to redesign your application so that it works with hashes as that's the only way. Changing the fragment portion of an url doesn't trigger a page reload but it is added to the history, so when you press the back button you are able to detect this change without navigating away from the page.
As mentioned by SLaks in the comments section another possibility is to use the HTML5 history API but obviously this assumes that the client browser supports it.

Back button with ajax and iframe

Here is a situation. We have a search feature which uses ajax so that search results can be updated when user changes one of the search filters. The search results page also has 3 ad units that are using iframes. We are using iframes so that when usees use pagination to go different pages or update search results using search filters, the ads can be refreshed.
Now the problem is if user uses pagination to go to different pages and then try to use browser back button, it does not work properly because when you change iframe source, browser add this in history
I would apprecaite any help on how to solve this issue.
You may want to consider loading ads dynamically (i.e. AJAX), instead of using iframes. So, you would simply use a <div> to display the ad (loaded with AJAX) instead of an <iframe>.
Mayby try location.replace("http://yourPage...") to replace the browsers last history entry after iFrame load?

Resources