This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Update a Select Box on Parent Page from FancyBox2
I'm trying to update an element on my site from a fancybox. In the fancybox I do a $.post() and get back html data that aI want to populate in a div on my page. I'm opening the fancybox in ajax. I can see in firebug that my script is returning the html but the select box on the parent page is not updating. Can anyone help me with the proper way to do that? I'm currently trying from the fancybox:
$("#send-message").click(function () {
$(this).closest('form').submit(function () {
return false;
});
var frm = $(this).closest('form');
if ($(frm).valid()) {
$("#ajax-loading").show();
var data = $(frm).serialize();
$(frm).find('textarea,select,input').attr('disabled', 'disabled');
$.post("../forms/company_add.php",
data,
function (data) {
if (data.success) {
$('#companyselect', $(parent.document)).html(data.success);
parent.$.fancybox.close();
} else {
$("#ajax-loading").hide();
$(frm).find('textarea,select,input').removeAttr('disabled');
$("#send_message_frm").append(data.error);
}
}, "json"
);
}
});
I'm using fancybox-2 and php. Thx!
I think you just need to use the id of the element
$('#companyselect').html(data.success);
$.fancybox.close();
Write a javascript function on your parent like
function UpdateElementOfParent(someValue)
{
// your code
}
And from your fancybox, you can the object of parent and call its function like that..
this.parent.UpdateElementOfParent(someValue);
Related
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 5 years ago.
I called Ajax on button click, and I got response with link. Now I want to do some action on that link but I cant, why?
here is the ajax call:
$( document ).ready(function() {
jQuery(".rateReset").click(function(){
var data_item = jQuery(this).attr("data-item");
var data_target = jQuery(this).attr("data-target");
var me = this;
jQuery.ajax({
type: "POST",
url: "likevoting.php?data_item="+data_item+"&data_target="+data_target+"&interchange=yes",
success: function(data){
jQuery(me).closest("div.rateWrapper").html(data);
}
});
});
I got response like:
some text link lorem ipsume...
Now I want to add click event on 'link' text, how to do this.
Thanks
replace
jQuery(".rateReset").click(function(){
to
jQuery(document).on("click", ".rateReset", function(){
In Select2 I have basic tagging functionality working. The tagging system is works in an insert project page, where I can tag projects with certain predefined tags that are stored in a database and called by AJAX, and also in an update project page where the same mechanism is at play with the addition of bringing up currently stored tags in the tag field.
I want it so that if no tag currently exists, the user will receive a confirmation box that asks whether or not they want to add a new tag, and by hitting ok that tag will then be stored in the database. There should also be a sort of buffer time of a few seconds for Select2 to catch up with looking up the tags otherwise it might create duplicates?
I have read something here that shows how to do the jquery part, albeit its incomplete for my purposes. Can anyone shed light into how I might do this? I am not looking for complete answers, but merely guidance.
Have a look at this question: How do I fire a new ajax on select2 new /remove tag event?
In your case, using your fiddle, you can use something like:
$('#tags').on("change", function(e){
if (e.added) {
if (/ \(new\)$/.test(e.added.text)) {
// A new tag was added
// Prompt the user
var response = confirm("Do you want to add the new tag "+e.added.id+"?");
if (response == true) {
// User clicked OK
console.log("Sending the tag to the server");
$.ajax({
type: "POST",
url: '/someurl&action=addTag',
data: {id: e.added.id, action: add},
error: function () {
alert("error");
}
});
} else {
// User clicked Cancel
console.log("Removing the tag");
var selectedTags = $("#tags").select2("val");
var index = selectedTags.indexOf(e.added.id);
selectedTags.splice(index,1);
if (selectedTags.length == 0) {
$("#tags").select2("val","");
} else {
$("#tags").select2("val",selectedTags);
}
}
}
}
});
Draft fiddle here.
I have a a script that on click do a ajax call connect to the database get imagename and set the image name inside an < -img - > with the right path also it adds a hidden checkbox after it and then echo it.
i then take the ajax message returned and put it as div's HTML. my question is will i be able to preform more action on the inserted content..
The main goal is to be able to click on the image as if it were a checkbox(this part is already sorted for me) however no matter what i try i cant have a .click function works..
Here is the code.
This is the PHP part that echos the images.
if($_POST['updateIgallery'] == 'ajax'){
global $wpdb;
$table_name= $wpdb->prefix . "table_T";
$imagecounter = 1;
$toecho = '';
$currentselected = $wpdb->get_row("query");
preg_match_all('/\/(.+?\..+?)\//',$currentselected ['image_gal'],$preresualts); // images are stored with /image/.
foreach ($preresualts[1] as $imagename){
$toecho .= '
<img rel="no" id="JustantestID" class="JustaTestClass" src="'.site_url().'/wp-content/plugins/wp-ecommerce-extender/images/uploads/'.$imagename.'">
<input name="DoorIMGtoDeleteIDcheck'.$imagecounter.'" style="display:none;" name="DoorIMGtoDelete['.$imagecounter.']" value="/'.$imagename.'/" type="checkbox">
';
$imagecounter++;
}
echo $toecho;
}
This is the ajax part that send and receive and insert the HTML to the div:
$.ajax({
type: "POST",
url: "/wp-content/plugins/wp-ecommerce-extender/DB_Functions.php",
data: { updateIgallery: "ajax", CurrentDoorIDnum: $('#dooridforgallery').val()}
}).success(function(insertID) {
$("#ImgGalleryID").html(insertID);
});
This so far works what i am having trouble with is the following:
$("#JustantestID").click(function() {
//DoorImageGallery($(this).attr('id')); // the function i will use if the alert actually works
alert("kahdaskjdj");
return true;
});
I hope the question and the code is understandable.
Thanks in advanced.
When you replace element's html, all the elements inside it are removed and gone. That means the event handlers attached to them are removed as well.
You could try attaching an event handler to a higher level element that is static and permanent on your page. Without more info I am going to use document:
$(document).on( "click", "#yaniv", function() {
alert("kahdaskjdj");
});
$('img.JustaTestClass').bind('click', function() {
var checkbox = $(this).siblings('input[type=checkbox]');
if (!checkbox.is(':checked')) checkbox.attr('checked', true);
else checkbox.attr('checked', false);
});
Since the elements are dynamically inserted into the DOM with ajax, you have to delegate events to a parent element that actually exists when binding the click handler, which in this case looks to be #ImgGalleryID
$('#ImgGalleryID').on('click', '#yaniv', function() {
DoorImageGallery(this.id);
alert("kahdaskjdj");
});
I have a little question.
On my site i use for few jquery functions , they get some data and transfer by GET method to php helper. This is not work when i want to use the data in another php page. For example i have jquery that store id of the anchor:
$("#rightContent .users_list li a").live('click', function() {
var id = $(this).attr('id');
$.get("getHelper",{'userId':id},function(data){
$('#user_rightContent').html(data);
});
});
And in php file returned by "getHelper" i do:
if(isset($_GET['userId'])){
$id = $_GET['userId'];
//do something
);
The anchor of the live click lead to another page displayed by another php file where i want to use this id by using helper... This is work only if i stay on same page...
Can anybody help me in this problem?
thanks for advice
add return false at the end of live('click'....
live('click', function()
{
// code ...
return false;
}
or do that
live('click', function(e)
{
// code ...
e.preventDefault();
}
You're missing the extension on the filename.
Try it with:
$("#rightContent .users_list li a").live('click', function() {
var id = $(this).attr('id');
$.get("getHelper.php",{'userId':id},function(data){
$('#user_rightContent').html(data);
});
});
Im using the following to open/close a div
$(".alerts").click(function(){
$(this).toggleClass("active").next().slideToggle(50);
But I want a certain function to trigger only if the box was closed and is being opened, how can I determine this? I prefer not to use cookies or anything like that
thanks!
You can use the visible selector with the is method like this -
$(document).ready(function()
{
$(".alerts").click(function()
{
if($(this).toggleClass("active").next().is(":visible"))
alert("It's visible");
$(this).toggleClass("active").next().slideToggle(50);
});
});
An example on jsfiddle.
The -
if($(this).toggleClass("active").next().is(":visible"))
alert("It's visible");
portion is checking to see if the next element of this is visible or not. If it is, then it returns true. As a result, the alert method gets executed.
Here is the documentation for the visible selector and here is the documentation for the is() method.
You can add a class to the div and check for it with hasClass():
$('.alerts').live('click', function() {
if($(this).hasClass('active')) //close
$(this).removeClass('active').next().slideUp(50);
else //open
$(this).addClass('active').next().slideDown(50);
});
When checking for DOM elements/attributes that have been changed by Javascript, use live() rather than e.g. click().
If your .alerts element has a different CSS style when it has the .active class, you should run the addClass() and removeClass() functions after the slide events have completed, like so:
//same thing, but wait for animation to complete
$('.alerts').live('click', function() {
var thisbtn = $(this);
if(thisbtn.hasClass('active')) { //close
thisbtn.next().slideUp(50, function() {
thisbtn.removeClass('active');
});
} else { //open
thisbtn.next().slideDown(50, function() {
thisbtn.addClass('active');
});
}
});