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
Related
I've got a like button, which holds an ID from a database. I'm trying click the like button, update a database and then it'll switch to unlike without reloading the page.
I'll paste the code below, so you have an understanding:
**index.php:
**
<script type="text/javascript">
// Like Button Function
$(document).ready(function(){
$(".likeBtn").on("click", function(){
var threadID = $(this).attr("id");
console.log(threadID);
$.ajax({
type: "POST",
url: "like_function.php",
data: threadID,
success:function(html)
{
}
});
});
});
</script>
<form action='javascript:void(0);' method='POST' enctype='multipart/form-data'>
<input type='submit' name='likeBtn' class='likeBtn' id='52' value='Like'>
</form>
So the var threadID = retrieving an ID from database (I used 52 as example)
From here, I want to be able to run a php script (like_function.php) to update database using the ID stored as a variable.
Lastly, I want that button to change to unlike. Sorry for being a noob at this. I'm new to Ajax
You need to use a preventDefault() to cancel the event submit and now you can update your data. Example below:
$(document).ready(function(){
$(".likeBtn").on("click", function(e){ // set e in arguments
e.preventDefault(); // use this
var threadID = $(this).attr("id"); // [...]
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(){
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
I'm trying to get a drop down box to alter a second drop down box through the use of a jquery/ajax script. Firebug is showing Jquery is working but my script isn't showing at all.
<script type="text/javascript">
function ajaxfunction(parent)
{
$.ajax({
url: '../functions/process.php?parent=' + parent;
success: function(data) {
$("#sub").html(data);
}
});
}
</script>
process.php is just a MySQL query (which works)
My initial drop down box is populated by a MySQL query
<select name="front-size" onchange="ajaxfunction(this.value)">
//Query
</select>
And then the second drop down box is just
<select name = "front-finish" id="sub">
</select>
How can I solve this?
calling inline function is not good at all... as web 2.0 standards suggest using unobtrusive JS rather than onevent attributes....check out why here..
other thigs..correct way to use ajax is by using type and data ajax option to send values in controller..
<script type="text/javascript">
$(function(){
$('select[name="front-size"').change(function()
{
$.ajax({
url: '../functions/process.php',
type:'get',
data:{'value' : $(this).val()},
dataType:"html", //<--- here this will take the response as html...
success: function(data) {
$("#sub").html(data);
}
});
});
});
</script>
and your proces.php should be..
<?php
//db query ...thn get the value u wanted..
//loop through it..
$optVal .= "<option value="someDbValue">some DDB values</option>";
// end loop
echo $optValue;exit;
updated
looks like you still have onchange="ajaxfunction(this.value)" this in your select remove that it is not needed and the ajaxfunction in javascript too...
<select name="front-size" >
//----^ here remove that
use jQuery.on() that will allow us to add events on dynamically loaded content.
$('select[name^="front-"]').on('change',function(e){
e.preventDefault();
var value = $(this).val();
ajaxfunction(value);
});
[name^="front-"] this will select all the SELECT box having name starts with front-.
In your process.php give like this
echo "<select name='front-finish' id='sub' onchange='ajaxfunction(this.value)'>";
like this you need to add the "onchange" function to the newly created select box through ajax
or you can remove onchange function and write like
$("select[name^='front-']").live('change',function(){
//Do your ajax call here
});
I have a jquery function whichh looks like this:
<script type="text/javascript">
$(document).ready(function() {
$('a#id').click(function(e){
e.preventDefault();
var id = $(this).attr('pid');
var title = $(this).attr('ptitle');
$('#product_list').prepend('<input type="hidden" value="'+ id +'"/><div>'+ title +'</div>')
});
});
</script>
I have a javascript file which has this code here:
> http.open('get', 'livesearch.php?name='+searchq+'&nocache =
> '+nocache+'&type=bookings/products');
The livesearch.php file has the a element (which the jQuery is requesting) like this:
Add
However when I click on the a element the jQuery doesn't respond. Could any please help?
Thanks
Peter
Use either live or delegate to add the click event because the element is not present in the DOM at the time the event is bound.
$('#id').live('click', function(e){
alert('you clicked the id element' );
});