jquery call function from dynamic div - javascript

I am using jquery. I have a div that is populated by jquery. Inside div, there is a list of items under row tag. And, Inside, the dynamic div section, I also have a anchor tag. On clicking on that anchor tag, I want to call the ajax function. Is it even possible?
var content='';
$.each(products, function(key, value) {
content += '<div class="row">' +
'<img src="' + value.image + '" class="img img-responsive" style="height: 65px;"/>' +
'<h3>' + value.name + '</h3>' +
'<p>' + value.category + '</p>' +
'</div>' +
'Delete' +
'<hr>';
});
modal.find('.modal_product_list').html(content);
When the anchor tag is clicked, I want to call ajax function. Here is my ajax sample:
$('.delete_product_from_space').on('click', function(e) {
e.preventDefault();
alert('hello');
var product_id = $(this).attr('data-id');
});
The on click event is never fired. Is it possible to call like this? Or I am approaching in a wrong way?

You may try to add the event on modal, as the dynamically generated elements would not be available at the time of code execution. Try the below code,
$('.modal_product_list').on('click', '.delete_product_from_space', function(e) {
e.preventDefault();
alert('hello');
var product_id = $(this).attr('data-id');
});

Related

onclick function in loop, executes without clicking

Im fetching data from a blizzard api(working fine) and i have a jquery $each loop to retrieve the data which i then append in a ul. i want to add a button within every time the loop gives out data to an object. the problem is that when i use onclick='"+myfunction(param)+"' inside the loop, it will execute the function before i have pressed the button the onclick is attached to. when i check the browser it says onclick="undefined". here is the code:
let tid;
function reply_click(clicked_id){
console.log(clicked_id);
}
$('#searchnow').bind('click',
function (){
function kaldapiclass(){
// console.log("card");
var classSelect=$('#thisclass').val();
$.getJSON('https://us.api.blizzard.com/hearthstone/cards?
locale=en_US&access_token=hidden&class='+classSelect, function(data) {
$('#kortliste').empty();
$.each( data.cards, function(i, card) {
$()
$('#kortliste').append("<li id='" + card.id + "'><img src='" + card.image + "'><p>"+
card.name +"</p><button onclick='"+reply_click(card.id)+"'>HERE</button></li>");
});
});
};
clearTimeout(tid);
tid=setTimeout(kaldapiclass, 500);
});
ty for your time
-Morten
The code you entered will actually execute the function. So, instead of:
"<button onclick='"+reply_click(card.id)+"'>HERE</button>"
you should just define the element the way you would place it in dom:
"<button onclick='reply_click("+card.id+")'>HERE</button>"
Only the card.id should be dynamic.
I would also suggest to append html only once, this way:
var toAppend = '';
$.each( data.cards, function(i, card) {
toAppend += "<li id='" + card.id + "'><img src='" + card.image + "'><p>" + card.name + "</p><button onclick='reply_click(" + card.id + ")'>HERE</button></li>";
});
$('#kortliste').html( toAppend );

Bind function only works on last element

I am creating an application to store my homeworks, whenever I touch the li of the homework, the information of this homework yould be displayed from a sqlite database. My problem is that when I add each li from javascript, I bind a function so that each time I touch the item it will return its uid. But whenever I add a new hw, the other ones wont return their uid.
Some of my code:
function newFormSuccess(tx, results){
var lista = $("#lHw");
var obj = $(
'<li><a id="' + results.id + '" href="#detalle" data-uid=' + results.id +
' class="ui-btn ui-btn-icon-right ui-icon-carat-r" data-transition="pop" data-direction="reverse">' +
'<h2>' + results.title + '</h2>' +
'<p>' + results.desc + '</p><p>' + results.date + '</p>' +
'<p class="ui-li-aside">Type</p></a>' +
'</li>'
);
obj.find('#' + results.id).bind('click', function (e) {
$.id = $(this).data('uid');
});
lista.append(obj).listview('refresh');
$.mobile.changePage("#home");
}
Any suggestions? Why is this happening?
I fixed the problem by changing the bind to .on, and using it ona a device ready function, I think this is what the Delegate comments where all about.
$("#lHw").on("click", "li a", function(e){
$.id= $(this).data('uid');
});

Jquery addEventListener in Chrome with parameters

A feature was developed in an application by clicking a hyperlink in a table, open a div below with a table, filtering contents, depending on the link.
The link was created dynamically in one jQuery function and had the following attributes:
$("#pending div#list").bind("data_loaded", function (event, records) {
var tableBody = $("tbody", $(this));
for (var index = 0; index < records.length; index++) {
var rowHtml = '<tr id="' + rowid + '"><input type="hidden" name="' + rowid + '" id="' + rowid + '" value="1"/>' +
'<td><a class="populate" id="' + rowid + '" onclick="javascript:clickHandler(' + rowid + ');">' + docid + '</a></td>' +
'</tr>';
tableBody.append($(rowHtml));
}
});
In Mozilla Firefox, it works perfectly fine. However in Chrome I cannot call the clickHandler function.
From the information I find on Google, say Inline JavaScript will not be executed.
You can check here: https://developer.chrome.com/extensions/contentSecurityPolicy
But now comes my difficulty.
I changed my hyperlink to:
'<td><a class="populate" id="' + rowid + '" onclick="clickHandler(' + rowid + ');">' + docid + '</a></td>' +
And I created this jQuery:
document.addEventListener('DOMContentLoaded', function () {
document.getElementById([parameter]).addEventListener('click', function () { clickHandler([parameter]); },false);
});
Can anyone explain how I can pass the parameter rowid for jQuery?
Thanks.
Regards.
Your snippets imply you're using raw DOM manipulation in Javascript rather than JQuery (which is good! it's definitely faster) but since you mention JQuery, that's what I'll be suggesting.
Instead of your addEventListener call above, try
$('div#list').on('click', 'a.populate', function() {
clickHandler($(this).attr('id'));
});
And then remove the 'onclick' attribute in the declarations of the anchor tags too.
This will add an event listener to all anchor tages with a class of 'populate' which will call clickHandler passing a string parameter consisting of that anchor tag's 'id'.

How to write into div using javascript

I want to make a for example content variable in javascript which will have a html tags inside with certain values.
How can I put that in the div when button is pressed.
For example :
This is a content which I want to use:
var contentString = '<div id="info">'+
'<h2><b> Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style=width:220px;display:inline-block;>'+
'<p> Name: '+ this.name + '</p>' +
'<p> Last name: '+ this.last+ '</p>' +
'<p>
'</div>'+
'</div>'+
'</div>'+
'</form>';
And I want to put it into : <div id=something"></div>
In javascript I can have something like:
$("#button").on('click', function() {
// What to put in here?
});
How can I put that in the div when button is pressed.
Like this:
$("#button").on('click', function() {
$('#something').html(contentString);
});
More info about html();
http://api.jquery.com/html/
It goes like this:
$("#button").on('click', function() {
$("#something").html(contentString);
});
If I'm not misunderstanding, then this will work:
$("#button").on('click', function() {
$('#something').html(contentString);
});
This does, of course, assume that you have an element with an id of button (though I assume you do, otherwise you wouldn't have put that jQuery).
JS Fiddle demo.
References:
html().
You should fix up your markup. You have unbalanced elements, and you can't have new lines in the string without escaping it. Try this instead:
var contentString = '<div id="info">'+
'<h2><b style="text-indent: 40px">Info:</b></h2>'+
'<div id="bodyContent">'+
'<div style="width:220px;display:inline-block;">'+
'<p style="text-indent: 1em">Name: '+ this.name + '</p>' +
'<p style="text-indent: 1em">Last name: '+ this.last+ '</p>' +
'</div>';
Note that I skipped the and replaced them with style attributes. You really should put these styles in a stylesheet, though.
$("#button").on('click', function() {
$('#something').html(contentString);
});
Keep in mind that the variables in contentString will not be evaluated when the click event on the button fires, meaning that this.name and this.last will not change. Do you need to update these values on click as well?

How to fetch the id of dynamically generated textboxes?

How is it possible to get the id of the dynamically generated textboxes using jquery?. I need to fire the TextChanged event for the corresponging textbox. There is no method reference for the textboxes in the code behind.How can i refer to any method in the codebehind on firing the event. Somebody please help. I dont know jquery much. The entire script im using is as as follows:
<script type="text/javascript">
$(init);
function init()
{
$('#test').droppable(// Div Control
{
drop: handleDropEvent
});
$('a').each(function(idx, item) {
$(item).draggable({ cursor: 'move', helper: 'clone' })
});
}
$(function() {
$("#draggable").draggable(); //Nothing to do with this div
});
function handleDropEvent(event, ui)
{
var draggable = ui.draggable;
document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}
function addColumn(column)
{
var iHtml;
// This code will generate a checkbox and a textbox. I need to fire the event of thus generated textboxes.
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input type="text" runat="server" id="aln' + column + '"> </div>';
return iHtml;
}
</script>
There's two ways: keep the generated element, or generate an ID when you generate your new element.
a) keep the generated element
This requires that you don't use innerHTML, but create the element (with document.createElement, or with jQuery's $), and then you can use the element directly (no need to call it by ID any more). For instance, with jQuery:
var container = $('#container');
var myDiv = $('<div id="myDiv"/>');
var myCheck = $('<input type="checkbox"/>');
myDiv.append(myCheck);
container.append(myDiv);
b) generate the ID
container.innerHTML = '<div id="myDiv"><input type="checkbox" id="myCheck"/></div>';
// and after this you can get them by ID:
var myCheck = $('#myCheck');
I would just add a class to the textbox in your iHtml then use .live() event
replace your iHtml with this
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="myclass" type="text" runat="server" id="aln' + column + '"> </div>';
then add the live event
$('.myclass').live('change', function() {
alert(' Live handler called.');
});
here is a WORKING DEMO

Categories