Hi guys I am using this script https://github.com/browserstate/ajaxify to ajaxify all of my links. On one of my pages, I am loading in data using the jquery .load() function.
$(function () {
$('#container').load('/load/load-trending-artists.php?n=1', function() {
$('img').lazyload({ event : 'load', effect: 'fadeIn'});
$('.loadmorecontent').show();
});
});
In this script, I am loading a bunch of images and links that go to other pages of my site. However, when i click on any of these links that have been loaded through jquery .load(), the link is not ajaxified and instead acts normally. This is a huge problem for me and a large inconvenience to my site. Is there any way that links loaded through .load() can still be affected by the ajaxify plugin? Thanks for the help!
Checkout this one if this helps: http://max.jsrhost.com/ajaxify/demo.php
<a id="options" href="#">Setting up options</a>
its been ajaxified with this:
$('#options').ajaxify({
link:'example.php?action=options&ajax=true',
target: '#container',
loading_img:'images/orange_loading.gif',
title:'Setting up options', // change page title. Since v2.0
method:'POST'
});
Related
I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!
You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});
You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});
Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})
I've never done Javascript,
On the website I've added rel="shadowbox" to the posts to pull up the lightbox of the post. The template has infinity-scroll built in and I've seen that you have to use a callback to make shadowbox work on the new posts. The problem is where do I put the code and how?
Example:
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on
Do I put this in the head in a script tag?
You could include it in the head of your website if you'd like... something like this may work for you:
<script>
$(function(){
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({
// fancybox API options here 'padding': 0
}); // fancybox
});
});
</script>
If you're not so much a programmer and want a top-notch modal plugin (lightbox), I suggest checking out Easy Fancybox. It works and looks great. http://wordpress.org/extend/plugins/easy-fancybox/
Scratch that, Took Shadowbox & Easy FancyBox out completely.
Used Wordpress Built in Thickbox
Above the post added
<?php add_thickbox(); ?>
add a class
class="thickbox"
At the end of the link added because it was an iframe
?KeepThis=true&TB_iframe=true&height=400&width=600
Which I think does it's own callback (I Can't find if I put it in)
If so add the following to the header.php
<script> tb_init( $('a.thickbox, area.thickbox, input.thickbox',this) );</script>
Like I said I don't think it needs it.
Thanks for your help though.
i have project in MVC CodeIgniter framework and i have for each view its javascripts, and it is on end of that view.
Now when pjax load that page, it should load script, but it doesnt.
Script tag is there, but its not loaded, need somehow to load it on pjax ?
<script>
$(document).ready(function() {
$('body').on('change', '#grad, #adresa', function() {
adresa = getAddress();
marker.codeAddress(adresa);
});
$('#form').validator({message : ''});
.
.
. // more functions
} );
</script>
Any help ?
I'm a little late, but for others finding this through Google:
Scripts loaded in a PJAX request shouldn't be in a .ready wrapper since the document will not trigger the loaded event. The main document stays in place, only a fragment is replaced.
This means that you should init plug-ins and stuff again after the PJAX request has finished. This can get tricky sometimes.
pjax:success would be a great event to listen for to do this.
New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
For example, the popover seems to work if I manually add this directly to my HTML document:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
UPDATE:
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.
UPDATE
If you are using jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
OR a catch all for jQuery ajax requests
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
In the success function of the ajax you need to call the popover. Something like this
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
I'm having huge troubles getting jQuery Mobile to work with other Javascript libraries - in my case Flexslider 2 (http://flex.madebymufffin.com/examples/basic.html).
I have a couple of pages where I want to use the flexslider in addition to jQM. Unfortunately, the slider doesn't work / isn't loaded when I click on links on my site.
I know this is because of the way jQM loads pages - by loading them with AJAX and adding them do the DOM.
I've been looking around for hours now to find out how to use events like "pageshow" and "mobileinit" etc but I just can't get it to work, so any help is really appreciated.
Heres what I'm doing now:
In each < head > part of my pages:
<script src="js/jquery-1.7.2.js"></script>
<script src="js/jquery.mobile-1.1.0.js"></script>
<script src="js/jquery.flexslider2.js"></script>
<script type="text/javascript">
$('#flexslider').bind('pageshow', function(){
$('.flexslider').flexslider({
animation: "slide",
});
});
</script>
This works when I reload the page manually, however it doesn't work when I visit the page through a link on my site.
You can add rel="external" or data-ajax="false" to the link of FlexSlider page, which can disable the Ajax loading of page. You can refer to the document here
Try putting it inside a callback of pageinit. Like so...
$(document).bind('pageinit', function(){ $('.flexslider').flexslider({ animation: 'slide' ); });
I'm sure someone more knowledgable can chime in as to why this is necessary, but I'm 99% sure it's the way to go.
Enjoy!
I had this same problem. Flexslider on the index page of a Jquery Mobile site would work when first navigated to, but not if returned to through the menu or back button.
I used the 'pageshow' event rather than the ''pageinit' event and it worked perfectly:
$(document).bind('pageshow', function() {
$('.flexslider').flexslider({
animation: "slide",
});
});