i am using drupal and ihve successfuly loaded a node creation form using jquery load function
<div id='test'></div>
<a href='#' id='test2'>test</a>
so when clicking link it will load form
var ajax_load = "loading...";
var loadUrl = "NODE_CREATE_PATH";
$("#test2").click(function(){
$("#test").html(ajax_load).load(loadUrl);
});
now my problem is all scripts like date popup is not working for this loded form . someone suggested me using http://api.jquery.com/live/ , but i dont know how to use.
please help
This is because the DOM is being reloaded with the new HTML. Therefore your bindings on these nodes will not work anymore.
You could use: http://api.jquery.com/on/ (the live event is deprecated) for other bindings but not for the datepicker for as far as I know.
You could do something like this:
function bindStuff(node) {
node.find('.datepicker').datepicker();
// Do some more bindings here
}
$("#test2").click(function(){
$("#test").html(ajax_load).load(loadUrl, function() {
bindStuff($("#test"));
});
});
$("#example2").click(function(){
$("#example").html(ajax_load).load(loadUrl, function() {
bindStuff($("#example"));
});
});
using Drupal.attachBehaviors() we can :)
example
$(id).load(url, function(){
Drupal.attachBehaviors(this);
});
Related
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.
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 implementing the search functionality through ajax jquery, though I am new in this. I have done that by using keyup event. Whenever type something, according to that letter(s), my searching list has been coming. But thing is that, I am not getting any record when refresh the page. If I search something then only I am getting record and if in that position I delete all the texts typed over the search field, then the correct list of records are coming, but not initially.
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("user-account-other.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
<div id="search_results"></div>
Now please tell me how can solve this issue.
Put ajax_search() funcion in on onload of document and also on blur of a text box element then it will work perfectly
Im not 100% sure what you're asking. I'd be happy to update this answer with some more information once I can understand the problem. I did, however, want to show you how to better streamline your code.
See: http://api.jquery.com/load/
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
function ajax_search(){
var url = "user-account-other.php?search_term=" + $("#search_term").val();
$("#search_results").load(url, function(){
//Ajax Load is Done
}).show();
}
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()
There's a great tutorial on IBM's website which walked me through a simple search/results list using jQuery,PHP and Ajax.
I was able to make it work and it's really cool.
One problem. I want the results to be hyperlinks and I can't get any java script to run on the results.
Here is the script I have (includes what was in the tutorial plus the additional script necessary to ovverride the hyperlink, click behavior):
<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
$("a").click(ClickInterceptor);
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
function ClickInterceptor(e)
{
window.alert("Hellow World!");
return false;
}
</script>
If i put the following html under the <body> tag:
this will work
That will display the alert window.
However, if I change the results to hyperlinks (found in find.php, listing 7 from the tutorial):
$string .= "".$row->name." - ";
It does not work.
Any idea on how to fix this?
The click function binds when it is run. You need to change it to a live binding.
$("a").live("click", ClickInterceptor);
Or you can just bind it when you update the search results by putting the following after $("#search_results").html(data):
$("#search_results a").click(ClickInterceptor);
The problem is pretty simple actually, $("a").click(ClickInterceptor); will only look for items that currently exist in the DOM. All you need to do is change that line to this:
$("a").live("click", ClickInterceptor);
I'd also advise taking the time to read more about jQuery's Events/live.