My End goal is to have ajax displayed content be clickable to shove whatever it's value is into a text box.
Right now I have the ajax loading but when I click on it, it doesn't work. As of now I have jquery assigned the 'a' tag so when it's clicked it puts the static text "works" in the textarea with the id=email-body.
$(document).ready(function() {
// Expand Panel
$('a').click(function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
This works just fine for a tags that aren't part of the ajax content but it doesn't work for the ajax content. Is there a special pull system I should use to have jquery effect ajax content?
Also static text and clicking on an a tag isn't really want I want.
Right now my ajax is doing the following:
foreach($search_found as $search_row){
$hint=$hint . '<a>'.ucwords($search_row['email_module_name']).'</a>';
}
echo $hint;
Is there a way I can have it be:
AJAX:
<div class="module" value="'.ucwords($search_row['email_module_name']).'">
'.ucwords($search_row['email_module_name']).'
</div>
JQUERY:
$(document).ready(function() {
// Expand Panel
$('.module').click(function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
});
What you want is to delegate the events, to do this you can use .on()
$(document).ready(function() {
// Expand Panel
$(documnet).on('click', 'a', function(){
$('#email-body').val($('#email-body').val()+'works');
});
});
You need to use the .on function:
$('div').on('click', '.module', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
This allows the 'click' function to attach to the elements that are brought in via ajax.
You can use .on() to bind an event to current and future elements.
$(document).on("click", "a", function(){
$('#email-body').val($('#email-body').val()+'works');
});
Or,
$(document).on("click", ".module", function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
$('.module').live('click', function(){
$('#email-body').val($('#email-body').val()+'$this->value');
});
I figured it out and came back on to see someone posted .on
I tried this and it did not work. What did work was .live
Related
This is my index.html page where am trying to implement a simple AJAX when clicked on anchor tag the text will be passed to PHP data.php page and that page will display the page being clicked. Yes, the code is working, but when I first click on the link nothing is displayed and from the second time it stars working. Where is the problem actually?
This is my script
<script>
$(document).click(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
</script>
And this is my PHP for the AJAX
<?php
$anchortext=$_GET['page'];
if(isset($anchortext))
{
echo 'this is a'.$anchortext;
}
?>
You misplaced $(document).click(..) for $(document).ready(....), so only after the first click the click handler is registered to the a element
$(document).ready(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
Use $(document).ready instead of $(document).click.
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!
Why does the JQuery script I use in all my pages seems to only works before beginning to browse my tabs if the content of my tabs is the same everywhere ?
I have a tab view web page built with JQuery and AJAX.
This is my JQuery functions:
$(document).ready(function(){
$(".box .more").click(function(event){
alert('test');
});
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});
});
This is my body web page:
<div id="header">...</div>
<div id="body">
<div class="box">
<p class="more">LinkLike</p>
</div>
</div>
<div id="footer">9</div>
loadPage.php only include needed page that Ajax script sent.
My tab system works perfectly, I can navigate in the page I want. Before navigating, When I click on the LinkLike, the alert appears. But, when I browse tabs, When I click, there is nothing.
Why does the JQuery script seems to only works before beginning to browse.
Important, the file I imports from php contains exactly the same body than the first one. The file contains:
<div class="box">
<p class="more">LinkLike</p>
</div>
try
$(document).delegate(".box .more","click",function(event){
alert('test');
});
the reason probably is you can generating the link dynamically, and event handlers do not attach themselves to the dynamically inserted elements to the DOM. Previously .live was used but that now is deprecated, if you are using jquery version 1.7+ you can use the .on method or else you can use the delegate method to attach the event handler to the dynamic content. However you can also re-bind the events in the success callback of ajax request
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
$(".box").bind("click");
}
});
jQuery.on version1.7+
jQuery.delegate
You are replacing the entire body of the page when your click event fires; therefore, you will need to re-bind your click events once the new content is loaded.
$(document).ready blocks will only fire when the initial document loads, so the AJAX-ed in content will not cause the click events to be bound again, you'll have to do this in the success callback of the click event that replaces the body content.
function init() {
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
init(); // re-bind events again
}
});
});
}
NOTE: This method will work, but it's probably a bit naive. Check out this jQuery page for more details on how to use the "delegate" jQuery method. The delegate method will bind click events both now as well as in the future.
Here is an example using "on", which supersedes "delegate" as of jQuery 1.7+:
// I'm not sure if you're referring to "body" the body tag or "body" the id of your div.
// Please adjust accordingly.
$("body").on("click", "a.linkTab", function() {
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});
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()