Why ajax loaded link not clickable on jQuery click event? [duplicate] - php

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(){

Related

Send variable From PHP to AJAX [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have a php page called posts.php, this page just select all from a database table named posts and display them. Down the page I have a textarea named post. When I press the submit button the AJAX script will send the text from textarea to a page called insert.php. This insert.php gets the submited text and insert it into posts table. How can I do this and how can I upload the posts.php when I have inserted a post into posts table.
Example:
User 123 writes a message in the textarea. He presses submit button. AJAX sends the post to insert.php. Insert.php inserts the post into posts tabel. Posts.php shows the message.
You can do it very easily! Here's a very simple example.
func.js
$(document).on("click", ".submitBtn", function() {
var textareaVal = $(".textarea").val();
$.ajax({
type: "POST",
url: "insert.php",
dataType: "text",
data: { postVar: textareaVal },
success: function(data) {
$(".resultDiv").load("posts.php");
}
});
});
insert.php
// You have to pay attention to AJAX can only invite your file!
if (!empty($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest") {
if (isset($_POST["postVar"])) {
$var = sanitize($_POST["postVar"]); // You need sanitize the data!
// Insert into your table...
}
}
In your posts.php, SELECT datas from your table, but only select the data, without „HTML container”! Your JS file load this datas on your resultDiv box.
I'm not certain why you would need to do this via ajax, but:
$( "#myForm" ).submit(function( event ) {
$.ajax({
type: 'post',
url: '../insert.php' ,
data: { value1: document.getElementById('textarea').value },
success: function () {
alert("yay!");
}
});
});

jquery event does not work on ajax result like table [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I created a table with radio button using ajax request. I want to get value from radio button by click event. But jquery event doesn't work on radio button.
my created table by ajax below
I have called this ajax result by bellow code
<code>
<script type="text/javascript">
$(document).ready(function(){
$(".todayTask").click(function(){
var employee = '<?php echo trim($userID);?>';
$.ajax({
url: "ajax_call.php",
type:"POST",
data:{userID:employee},
success: function(result){
$('#taskList').html(result);
}});
});
});
</script>
</code>
Now I want to get value from radio button which stay in ajax result...
by below code but does not work...
<code>
<script type="text/javascript">
$(document).ready(function(){
$("#s").click(function(){
var status_val = $(this).val();
alert(status_val);
});
});
</script>
</code>
Since your radio buttons are loaded via jquery, you need to use on event:
$(document).ready(function(){
$('#taskList').on("click","#s", function(){
var status_val = $(this).val();
alert(status_val);
});
});
You need to also use a class ".s" instead of an ID "#s", because an ID needs to be unique, here is an example:
$('#taskList').on("click",".s", function(){
Bind your click event using on:
$("table").on("click","#s" ,function(){
var status_val = $(this).val();
alert(status_val);
});
Note: ID must me unique. So, either use classes or make sure you have unique id

pass ID from jQuery to PHP [duplicate]

This question already has answers here:
Send values to $_GET using jQuery
(4 answers)
Closed 9 years ago.
HTML
Link1
Link1
Link1
jquery
function mainFunction() {
$(".leftPanel").click(function () {
$(".leftPanel").pageslide({
direction: "right",
modal: true
});
var linkId = $(this).attr('id');
var linkId2 = (linkId.substring(1, linkId.length));
console.log(linkId);
console.log(linkId2);
$.ajax({
type: 'GET',
url: 'my.php',
data: linkId2,
success: function (data) {
console.log(data);
}
});
return false;
});
}
And my PHP
<?php
$pageid = $_GET['linkId2'];
print_r($_GET);
?>
So this is my code but it seems not working..Had looked around dint found anything that can help.
Explain the script
I want to take ID of a link and assign it to $pageid
The console.log(data); Saying Access Denied
print_r($_GET); Saying array();
If any suggestion with code.
If need more details please ask I will explain everything that I can.
Will appreciate any help. Thank you a lot.
There is an error in your jquery.ajax function. You missed to pass an identifier for the data. Use this:
data: {"linkId2" : linkId2},

Update an element on parent page from fancybox [duplicate]

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);

JQuery AJAX fadeIn content [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Making my ajax updated div fade in
I want the content from AJAX call to fadeIn on my page, but when I use this code $('#sub_container').html(content).fadeIn(); it doesn't work, even if I set the animation speed to super slow (slow(5000))
$('.create').click(function(){
loadingimg();
document.title = 'Create Message';
$.ajax({
url: 'create.php',
dataType: 'html',
success: function(content){
$('#sub_container').html(content);
// $('#sub_container').html(content).fadeIn(); <- Fails
}
});
});
The .fadeIn() function essentially makes the element visible, so will appear to do nothing if the element is already visible. You can ensure that's not the case by hiding the element:
$('#sub_container').hide().html(content).fadeIn();
You need to make sure it's hidden to begin with, for example:
$('.create').click(function(){
$('#sub_container').fadeOut(); // fade out the current content
loadingimg();
document.title = 'Create Message';
$.ajax({
url: 'create.php',
dataType: 'html',
success: function(content){
$('#sub_container').html(content).stop().fadeIn(); // fade in the new content
}
});
});
But that can get you jumping content as the element disappears so you have to account for that if necessary.

Categories