I have a really simple question; I'm developing a wordpress site that uses a filtering plugin. This plugin loads the results using ajax. The goal is to open the results in a lightbox (I'm using colorbox). I can get it to work on the first page, but after the results are dynamically added, it doesn't work anymore.
I know I have to reinitialise my colorbox after the ajax load, and the plugin also provides a code (http://www.designsandcode.com/wordpress-plugins/search-filter-pro/faqs/), the thing is I'm not exactly sure where to place it.
I've added the following to the page's footer:
<script>
//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
console.log("ajax start");
});
//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$('.colorbox-link', context).colorbox();
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
console.log("ajax complete");
//so load your lightbox or JS scripts here again
$('.colorbox-link', context).colorbox();
});
//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
console.log("S&F JS initialised");
});
</script>
Thanks!
Related
I have a page I'm working on where a user clicks a link and it loads a new php file into an existing div. It works but the page that loads into the div will not function with existing Javascript stuff in the page.
I can include the
<script type="text/javascript" src="js/admin.js"></script>
into the loaded pages but when you flick back and forth between the pages I notice that RAM usage starts to go up and up, so I don't think this is the best way of doing it.
Any ideas how the loaded page can function with the already-loaded javascript from the index page?
Thanks!
bind your events like this :
$(document).on({
"event" : function(e) {},
...
}, "selector");
If you are using bind or click type events change to using something like on (or live or delegate if you are required to use jquery version less than 1.9)
OR/AND
In your function that loads in the page via ajax provide a call back that initiates only what is needed. Example:
$('#myDiv').load('ajax/page.php', function(){
$('#myDiv a').customPlugin('whatever');
$('#myDiv button').bind('click', function(){
window.open('http://www.google.com/', 'some-window');
});
});
Here is my current setup.
I have two pages running on the jquery mobile framework.
index.php
article.php
In bother headers I have a js file called ratings.
here is my js ratings.js:
$(document).ready(function(){
$("#rating_1").click(function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
When I load index.php and then go to article.php none of my triggers to ratings.js work.
If I add rel="external" or data-ajax="false" my triggers work.
However then I lose the ability to have my loader wheel come up.
Any suggestions?
Thanks!
Important: Use $(document).bind('pageinit'), not
$(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Try:
$(document).bind('pageinit', function() {
$("#rating_1").click(function() {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
You should put everything inside:
<div id="page" data-role="page">
<!--here-->
</div>
Script in the <head></head> section will not be loaded while ajax loading.
The problem is that jQuery loads pages via Ajax and therefore, it only loads the
<div data-role="page"> </div>
parts of the page.
You can do 3 things to solve this kind of an issue.
1.) The one which you have already tried ( which is to make a data-ajax=false ) which makes your page load completely again and not showing your loader wheel.
2.) You can make the event a live event:
$("#rating_1").live('click', function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
This will make it look for any new #rating_1 and will add the click event to it.'
3.) Instead of using $(document).ready you can use $( '#myPage' ).live( 'pageinit',function(event){}; function.
I have a php script which when fired, collects some data on different sites using an AJAX call in jquery, and displays the results in a Div.
I also have a lightbox plugin which needs to be reinitialised after the result of the ajax call has loaded. To enable this, I've turned async off ($.ajaxSetup({async:false});) so it doesnt load before the results div has finished loading.
This works fine, except for in Chrome (and I would assume IE) where the 'loading' image is not displayed when this setting is in use.
Is there a smart way around this?
you can still do it asynchronously, just do your initialisation inside the success callback function:
$.ajax({
url:'',
data:'',
success:function(response){
// init your lightbox here
}
});
I have 2 php pages named "personal_info" and "portfolio". I load them via php functions in codeigniter http://www.mysite.com/controller/personal_info and http://www.mysite.com/controller/portfolio.
I have a page with menu tabs linked to personal_info and portfolio and I want to load the pages via ajax when a tab is clicked. If js is turned off in the browser the tabs should just go to the url.
I am using the jquery .load() function to load the pages.
<script type="text/javascript">
$(document).ready(function(){
$('#personal_info').click(function() {
$('#result').load('personal_info #load'); //load fragments from #load div
});
$('#portfolio').click(function() {
$('#result').load('portfolio #load');
});
});
</script>
HTML
<div id="tab">General Info</div>
<div id="tab">Portfolio</div>
<div id="result"></div>
Issue: When I click on a tab it treats it as a link and goes to the URL instead of loading the page via jquery. How can I disable the link if javascript is on? Also, I noticed that javascript is not loaded from fragments in the pages, and if I put the javascript in the page I load data it doesn't pick it up.
What is a good solution for this?
EDIT:
For loading js, I just wrapped the entire page in the result div and am loading the other pages with the js and header, footer.
For the first issue: put return false; at the end of each 'click' function:
$('#personal_info').click(function() {
$('#result').load('personal_info');
return false;
});
Edit: For the second issue, maybe pull out any jquery/javascript and run it from a central application.js file?
You need to prevent the default action of the <a/> element. You can accomplish this by using event.preventDefault()
$('#personal_info').click(function(e) {
$('#result').load('personal_info');
e.preventDefault();
});
$('#portfolio').click(function(e) {
$('#result').load('portfolio');
e.preventDefault();
});
To stop the default action from occurring (following the link) you need to use return false at the end of your jQuery click() functions.
With regard to your second issue ("javascript is not loaded from the [dynamically loaded] pages"), ensure that you are using jQuery's .live functionality to attach handlers.
I'm facing a trouble with jquery ajax under IE8. I have a form which at the base level displays a list of few items, each with buttons to edit and remove. The list, along with those two buttons, is loaded via jquery ajax call. Although it works fine on Firefox and Chrome, on IE8 it won't trigger functions behind edit or remove buttons.
So basically, on a base page, jquery works and loads the list. Within that list tho, jQuery doesn't work as it won't trigger edit or remove functions
I have a similar problem with the modal window call. IE8 is able to open the modal window (content is loaded with jquery ajax) but won't trigger any function within the content of the modal
Example of a simple call
$('#form-modal').load('/form/' + path + '?id=' + id).modal();
This works on IE8 from the base page, but doesn't when triggered within ajax-loaded content
All js scripts definitions are being loaded in the <head> of the main base page. I tried adding definition to the ajax-loaded file header, but didn't help so it must be something else
Any ideas? If you need more details, will gladly provide
Let me show you the easiest example. Each item on the list loaded with ajax has a 'remove' button.
Remove
DeleteItem definition is in external lib.js file
function deleteItem(id){
$.ajax({
type: "POST",
url: "/ajax/deleteitem.php",
data: "id=" + id,
success: function(msg){
loadItemsList();
}
});
}
This is it... That simply doesn't work on IE8... Nothing happens, not even javascript error. Same thing works no problem on Firefox and Chrome
It would be nice if you show the event handlers for those buttons, since if you're using bind(); for example, it loads when the dom is ready, and your ajax call is made. That means that the dom elements loaded through the ajax call wasn't there when bind was called to bind the buttons.
The solution to this is to use live();
$(".button").live("click", function () {
// do stuff
});
I don't know what event binder you're using, but if you're using anything other than live, you could try live and it should work.
EDIT
Read my comment first on the alert(id), if your function doesn't run at all in IE8, try doing this instead. Give the link element the id instead like this
<a id="item_10" href="#">Remove</a>
Then somewhere in your javascript
$("document").ready( function () {
$("a").live("click", deleteItem);
});
function deleteItem (event) {
event.preventDefault();
var id;
id = $(this).attr("id").replace("item_", "");
//this will now provide you with the current id
console.log(id);
your ajax-stuff here..
}
This should work in IE8, no problem. You might wanna specify the selector though for the click event by giving all the delete links some class or something.