I have a table element that is loaded by jQuery and have a hidden input element on each row of my table and a button to open a pop up.
My problem is that when I try to get the value of hidden input when the button is clicked, I am not getting the value and it says undefined (I have used a jQuery function to get the value in click event of the button)
// function to get the hidden input value
$(document).on("click", '#registerhere', function(event) {
var id = $(this).find('#gameid').val();
console.log(id);
alert(id);
$colinforeg = $('#exampleModal');
$colinforeg.modal('show');
});
// ajax function to load the table
$.ajax({
url: 'allevents.php',
dataType: 'json',
type: 'post',
success: function(data, textStatus, jQxhr) {
console.log(data);
$.each(data, function (i, item) {
console.log(item[0]);
var events = '<tr>';
events += '<td>'+item[1]+'</td>';
events += '<td>'+item[4]+'</td>';
events += '<td>'+item[5]+'</td>';
events += '<td>'+item[6]+'</td>';
events += '<td>'+item[2]+'</td>';
events += '<td>';
events += '<button type="button" class="btn btn-primary" id="registerhere"> Register Here';
events += '</button>';
events += '<input type="hidden" id="gameid" value="'+item[0]+'">';
events += '</td>';
events += '</tr>';
$('#events').append(events);
});
},
Firstly, you are repeating the same id attributes in each appended row which is invalid. If you want to group common elements use classes instead.
With regard to the DOM traversal issues, note that the #gameid element isn't a child of the button, so find() isn't going to work there. You could instead get the closest('tr') and use find() from there:
// function to get the hidden input value
$(document).on("click", '.registerhere', function(e) {
var id = $(this).closest('tr').find('.gameid').val();
console.log(id);
// work with your modal here...
});
// ajax function to load the table
var events = '<tr>';
events += '<td>';
events += '<button type="button" class="btn btn-primary registerhere">Register Here</button>';
events += '<input type="hidden" class="gameid" value="foo">';
events += '</td>';
events += '</tr>';
$('#events').append(events);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tbody id="events"></tbody>
</table>
Related
Hej,
I want to transfer the value of a radio button within a javascript to a new page using get. But nothing happens when I click on the radiobutton.
Unfortunately I don't know what to do and hope for your knowledge.
Thanks for your help!
Here is the script:
<script>
$(document).ready(function(){
load_data();
function load_data(query)
{
$.ajax({
url:"fetch.php",
method:"POST",
data:{query:query},
dataType:"json",
success:function(data)
{
$('#total_records').text(data.length);
var html = '';
if(data.length > 0)
{
for(var count = 0; count < data.length; count++)
{
html += '<tr>';
html += '<td> <input type="radio" name="auswahl" onclick="window.location.href = "kunden_bearbeiten.php?var=value" value="+data[count].id+"> </td>';
html += '<td>'+data[count].id+'</td>';
html += '<td>'+data[count].firma+'</td>';
html += '<td>'+data[count].vorname+'</td>';
html += '<td>'+data[count].nachname+'</td>';
html += '<td>'+data[count].strasse+'</td>';
html += '<td>'+data[count].plz+'</td>';
html += '<td>'+data[count].ort+'</td></tr>';
}
}
else
{
html = '<tr><td colspan="5">Kein Eintrag gefunden</td></tr>';
}
$('tbody').html(html);
}
})
}
$('#search').click(function(){
var query = $('#tags').val();
load_data(query);
});
});
</script>
It is because you listening to click event i mostly use onchange event. This will work for you.
<input type="radio" value="me" onchange="window.location='shop.php?value=' + this.value">
I've found a solution, that works for me. I changed the type from radio to submit.
<form method="get"><input class="ButtonSelect" type="submit" name="auswahl" formaction="kunden_bearbeiten.php?var=value" value="'+data[count].id+'"></form>
I am trying to get the text from the first td tag from each row by using the input button as shown below:
for(var i in obj.questions){
question += '<tr class="row">';
question += "<td>"+ obj.questions[i].question+"</td>";
question += '<td><input type="button" class="question" value="Add question" onclick="addQuestion()"></td>';
question += "</tr>";
document.getElementById("t01").innerHTML = question;
}
The id=t01 is for the table tag. Here is the js that I tried working on but is not working:
var question;
$('.question').click(function() {
question = $(this).parent().find('td:first-child').text();
});
You have to iterate through each row like below
$('.question').click(function () {
$('#t01 .row').each(function () {
console.log($(this).find("td:first-child").text());
});
});
Also I would suggest to write html use jQuery instead of javascript instead of document.getElementById("t01").innerHTML
$('#t01').html(question);
Also your implementation of creating rows dynamically have one problem , you will get only one row every time. You can change your code like below
var question = "";
for (var i in questions) {
question += '<tr class="row">';
question += "<td>" + questions[i].question + "</td>";
question += '<td><input type="button" class="question" value="Add question" onclick="addQuestion()"></td>';
question += "</tr>";
}
$('#t01').html(question);
I have created a running sample for you
https://stackblitz.com/edit/jquery-n4spxc?file=index.js
You may need to use .live() to achieve this, depending on the order of your event binding and HTML generation. Also, consider revising your click event logic so that you iterate over all rows of the table to access the text of "first cell" for each table row:
// When the .question input is added to the DOM, this event logic will
// be bound to the input element automatically
$(document).live('.question', 'click', function() {
var question;
// Iterate over each row of the table
$('#t01 .row').forEach(function() {
// For each row, extract the text from first row cell
var row = $(this);
var firstCell = row.find('td:first-child');
var firstCellText = firstCell.text();
// Not sure how you want to use the data, this shows
// how to construct a comma separated string of text
// from all first row cells
question += firstCellText + ',';
});
// Print result to console
console.log(question);
});
I am creating a table row with a "spinner" to show actions when a button is pressed.
I append the row id to the spinner's id to be able to target it specifically.
For example row 21: #spinnerAction-21
While iterating through the data set, I add the name to array, so I can hide all of them after the html is inserted into the page.
Though I can't get my spinners to hide.I tried using inline CSS visibility to hidden but I couldn't un-hide it when I was done.
Any help on hiding my spinners? Is there a better way to do this?
var spinnerArray = $.makeArray();
for (var i = 0; i < data.length; i++) {
html += '<tr>';
html += '<td>';
//other html output
html += '<i class="fa fa-spinner fa-spin" id="spinnerAction-' + data[i].entry_id + '" style="font-size:24px;color:dodgerblue;"></i>';
html += '</td>';//end button comlumn
html += '</tr>';//end row
//Add a reference to the spinner for that row to hide.
spinnerArray.push("#spinnerAction-" + data[i].entry_id);
}//end for
// insert the html rows
$('#display_info').append(html);
//hide the spinner in each row
$.each(spinnerArray, function (index, val) {
$(val).hide();
});
For anyone else running across this post, I ended up replacing
spinnerArray.push("#spinnerAction-" + data[i].entry_id);
with
spinnerArray.push("spinnerAction-" + data[i].entry_id);
Removing the #
Then adding the # back in the
$.each(spinnerArray, function (index, val) {
$('#' + val).hide();
});
This should be very simple but i am struggling here.
I have a parent div which have multiple child div. These child div are generated according to $.each() function. Number of times function run, num of div get generated.Now, i want to write a server side function on button click but i am unable to list that button in these child div.
<div class="div1">
<div class="div2">
// this is the button which i cant see in my div2 div
<button type="input">follow</button>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("/Home/GetUsers", null, function(data) {
$(".div1").html("");
$.each(data, function(i, item) {
var html = "<div class='div2'>";
html += "Name: " + item.UserName + "<br />";
html += item.ArticleCount;
html += "<img src='" + item.UserImage + "'height='20px' width='20px'/>"
html += "</div>";
$(".div1").append(html);
});
});
});
</script>
</div>
</div>
Any type of guidance appreciated.
If you'd like to add a button per child div you can do it in this way:
$(document).ready(function() {
var parent = $(".div1");
$.getJSON("/Home/GetUsers", null, function(data) {
parent.html("");
$.each(data, function(i, item) {
var html = "<div class='div2'>";
html += "Name: " + item.UserName + "<br />";
html += item.ArticleCount;
html += "<img src='" + item.UserImage + "'height='20px' width='20px'/>";
html += "<button type='button' class='newButton'>Click Me!</button>";
html += "</div>";
parent.append(html);
});
});
// In order to ensure that the button click is handled no matter when it was
// added, we can delegate the handler to the parent.
parent.on('click', '.newButton', function(e) {
var button = $(this);
// Handle the individual button click server side call here.
});
});
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Click event for elements added to DOM dynamically
(2 answers)
Closed 9 years ago.
I have the following jquery code to create a button for each row in a table:
$("#add_to_rule").click(function(){
var contact_type=$("#contact_types option:selected").val();
var email_address = $('#email_address').val();
var call_order = $('#call_order').val();
var htmlstring = '<tr>'
htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"/></td>'
htmlstring = htmlstring + '<td>' + contact_type + '</td>'
htmlstring = htmlstring + '<td>' + email_address + '</td>'
htmlstring = htmlstring + '<td>' + call_order + '</td>'
htmlstring = htmlstring + '</tr>'
$('#rule_summary tr:last').after(htmlstring);
});
Then, I've got some more jquery to handle the .click event for the remove button:
$(".removeruleset").click(function(){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
});
The code to add a row to my table, along with the remove button works. But when I click on one of the remove buttons, it doesn't trigger the click event.
As a test, I created a button like so, outside of jquery:
<input type="button" class="removeruleset" value="push me">
and it triggers the click event no problem.
Can you tell me where I'm going wrong?
Thank you.
EDIT 1
I've tried changing the code to look like this:
$(document).on("click", ".removeruleset", function(){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
});
But that gives me the following error :
SCRIPT438: Object doesn't support property or method 'on'
I'm using version 1.5.2.
So, I referred to the article that's mentioned in some of the comments (Event binding on dynamically created elements?) and tried this instead:
$("body").delegate("click", ".removeruleset", function(e){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
});
That got rid of the error message but the event handler is still not triggered
Also tried:
$("body").on("click", ".removeruleset", function(e){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
});
Thanks.
Try this:-
$(document).on("click", ".removeruleset", function(){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
});
When you added the event to the element it was not existing. To make this work you need to use event delegation.
hi another way is to do this htmlstring = htmlstring + '<td><input type="button" value="Remove" class="removeruleset"click=\"myhandler\"/></td>'
where myhandler is a function
function myhandler(){
alert('inside');
id = $(this).closest('tr').attr('id');
alert(id);
}
you can try this for dynamic control.
$('#id').live('click', function() {
----your code--
})
else you can try this:
>>>$(document).on('click','#id', function() {
-----your code ---
})