I am facing some problem with pagination inside of jquery tabs .I have used Ajax pagination for that it works good but unfortunately when I click on any page no (in pagination) second time .Then it breaks the link .
Please look at the front view how it works:
http://kelts.wpengine.com/7664-top-o-the-morning-312/
open recent related posts->click on any page of pagination
please make sure that I am using wp-pagination();.
<script type="text/javascript">
jQuery(".larger.page").live("click", function(e) {
e.preventDefault();
var href = jQuery(this).attr("href");
show_posts(href.replace(/.*page\//, ""));
});
show_posts(1);
});
function show_posts(l) {
jQuery.get("<?php bloginfo('template_directory')?>/fetch-blog-post.php", {
pageno : l
}, function(data) {
jQuery("#show_posts").html(data).show();
});
}
</script>
Change your selector jQuery(".larger.page").live(...) to jQuery(".larger.page, .page.smaller").live(...).
Onces you visit a link the class larger is replaced by smaller that is why the link is broken in the second click.
why don't you try
$('.wp-pagenavi').on('click',function(){
// code
});
because .live is deprecated from now on.
From what I see the problem is that you get paginator itself as part of the AJAX response and don't bind events to a new DOM elements.
Related
I have a button that does not work in jquery. A button is passed from php to Jquery using json object. I have removed all other code just the button to test to try and solve this.
I create the same link and place it on my page in php. when the link is clicked a alert appears and works.
On the same page I have an additional button which is the same button, but this button has been returned from PHP via json to Jquery and
appended to the div. This link/button does not work? why is this? both appear the same!
Hope someone can advise as to what is happening here
Thanks
button returned from PHP
//Jquery basic test button for functionality (works if link button is already on HTML page)
$("[href='#test']").click(function() {
alert("has been clicked");
});
//JQuery extract of my code
var content;
$.each(data, function(i, item) {
content += item;
});
$(content).appendTo('#theframe');
},'json');
have also tried
$.each(data, function(i, item) {
content += item;
});
$('#theframe').html(content);
},'json');
//php returned
$json[] = 'View Post';
echo json_encode($json);
//php button on page
View Post
Thanks
SOLVED with help from all posts, thank you! #Anthony's example added the frame
$('#theframe').on('click', '[href="#test"]', function(e) {
alert('has been clicked');
});
You will need to use the jQuery on() or delegate() functions to add the click event to new page elements that are added dynamically (after the page is loaded).
If you are using jQuery 1.7 and greater you should use on(): http://api.jquery.com/on/
If you are using an older version of jQuery use delegate: http://api.jquery.com/delegate/
The .click() function only adds the event handler to elements that exist when the code is run, so won't affect any elements that are added dynamically later on. The easiest solution to get around this is to set up event delegation, using either the .on() (jQuery 1.7+) or .delegate() (prior to 1.7) functions. The .on() example would look like this:
$('body').on('click', '[href="#test"]', function(e) {
alert('has been clicked');
});
the reason it does not work is that your document ready function only fires once. This means that after your second button loads via ajax, there is no event handler attached to it.
Try using "on" or "live":
$("body").on("click", a[href="#target"], function(event){
alert("has been clicked");
});
http://api.jquery.com/on/ <- Docs for "on"
http://api.jquery.com/ <- Your new favorite website!
Hope this helps!
I am developing a web-page in PHP that needs following functionality:
1. When User click on "Say Thanks" it should be changed with "Done!".
2. At the same time I want to call an action in indexController.
3. At this time I want to show "loading...."
4. The current page has a lot of dynamic contents that should also not change.
Please suggest me what should I do to complete above tasks......
I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate action, ofc). Then I use jQuery for the AJAX magic:
$(function() {
$("a.CommentsListBtn").click(function() {
var tmpHref = $(this).attr("href");
var tmpLayer = $(this).parent().children("div.CommentsList");
tmpLayer.load(tmpHref, function() {
tmpLayer.stop().slideDown("medium");
});
return false;
});
});
I hope this helps.
Learn to use JQuery, JQuery UI. It isn't that hard! What I think you need to learn is the following for your problem:
.click()
.html()
jQuery.get()
Trying to load an external php file into another onClick. Iframes will not work as the size of the content changes with collapsible panels. That leaves AJAX. I was given a piece of code
HTML
Get data
<div id="myContainer"></div>
JS
$('#getData').click(function(){
$.get('data.php', { section: 'mySection' }, function(data){
$('#myContainer').html(data);
});
});
PHP:
<?php
if($_GET['section'] === 'mySection') echo '<span style="font-weigth:bold;">Hello World</span>';
?>
I have tested it here http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/programme-pages/dahab-divemaster/divemaster-trainingA.php and get the most unexpected results. It certainly loads the right amount of items as it says in the lower bar on safari but I see three small calendars and that is it. Can anyone see where I have made a mistake?
First things first, you want to have the jQuery bit inside the ready function $(document).ready(function(){..}. In your test page, there is already a ready function at the top which contains the line $('a[rel*=facebox]').facebox(), so you might want to put the code there.
Secondly, you want to prevent the link from going to the default action, which is to load the url '#'. You do that with the preventDefault() method.
I tested and confirmed that the following code should work for you:
<script type="text/javascript">
$(document).ready(function(){
$('#getData').click(function(event){
event.preventDefault();
$.get('test.php', { cat: 16 }, function(data){
$('#myContainer p').html(data);
});
});
});</script>
You can find more details and examples of jQuery's get function here.
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/ this tutorial may helps you
I have a form which I want to submit and show in Colorbox.
The form is Mals Ecommerce View Cart.
See: https://www.mals-e.com/tpv.php?tp=4
I want it to Show the Cart contents in a colorbox iframe. Is this possible to do using the FORM method rather than the Link method?
here the best answer..
add this to your submitbutton : id="SearchButton"
then use this:
$(document).ready(function() {
$("input#SearchButton").colorbox({href: function(){
var url = $(this).parents('form').attr('action');
var ser = $(this).parents('form').serialize(); //alert(url+'?'+ser);
return url+'?'+ser;
}, innerWidth:920, innerHeight:"86%", iframe:true});
});
test at: http://wwww.xaluan.com or http://wwww.xaluan.com/raovat/
I recently faced this problem, spent some time searching the solution and found this:
$("#submit_button").click(function () { // ATTACH CLICK EVENT TO MYBUTTON
$.post("/postback.php", // PERFORM AJAX POST
$("#info_form").serialize(), // WITH SERIALIZED DATA OF MYFORM
function(data){ // DATA NEXT SENT TO COLORBOX
$.colorbox({
html: data,
open: true,
iframe: false // NO FRAME, JUST DIV CONTAINER?
});
},
"html");
});
I.e. Colorbox uses submitting the form via standard jQuery methods. Hope this helps someone.
Try
$("input#formsubmit").colorbox({title: function(){
var url = $(this).parents('form').attr('action');
}});
Not tested, I just took the syntax from the Colorbox page. You'd have to give your submit button an id of "formsubmit" for the above to work.
you can open colorbox independently using:
jQuery.colorbox({href:,iframe:true, opacity:0.6 ,innerWidth:760,innerHeight:420,title:});
and you can call this function on any event like:
jQuery("document").ready(function(){ jQuery.colorbox.. });
when u submit a form send a query parameter along with it. When after submission you reach back the form. see if that parameter is populated.
and then call jQuery.colorbox()
I'm using jQuery to dynamically load php pages into my page using the .load() function, so far this has been successful but if you click on various links to update the div with the .load() it starts to flicker between the new clicked page and the old one, this is pretty annoying and has anyone got a fix?
Current code:
$(document).ready(function(){
$('a').click(function() {
$('#content').load($(this).attr("href"));
return false;
});
});
The flickering is possibly caused because the dimensions of the #content div vary between loads, try to slideTogle it before loading or use another transition between loads
example :
$(document).ready(function(){
$('a').click(function() {
$('#content').slideUp('slow',function(){
$('#content').load($(this).attr("href"),function(data){
$('#content').slideDown('slow');
});
})
return false;
});
});
I hope it is ok to question the premise. You're making all links use ajax to replace #content's contents? Doesn't that break the browser's forward/back button behavior? If so, I personally would not like to use such a site.