Welcome to WebmasterWorld Guest from 23.22.206.103

Forum Moderators: open

Message Too Old, No Replies

Dynamic JQuery Objects Calling to Function

Dynamic JQuery Objects Calling to Functio

     
5:14 pm on Jan 13, 2012 (gmt 0)

New User

joined:Jan 12, 2012
posts: 38
votes: 0


Hello All,

I have a, what may be simple for someone out there, question ... I have a JQuery script that is dynamically creating elements on a page. Well I have a function ... Lets say:


<script>
$("#Go").click(function() {
alert ('!');
});
</script>


I have the following dynamically created objects:

<a href="#" id="Go">Click 1</a>
<a href="#" id="Go">Click 2</a>
<a href="#" id="Go">Click 3</a>


Now here is the tricky part for me. In JavaScript I would have just assigned each *a* tag like such and called the function accordingly:


<script>
function CallAlert(id){
alert ('ID is ' + id);
}
</script>

<a href="#" OnClick"CallAlert(1)">Click 1</a>
<a href="#" OnClick"CallAlert(2)>Click 2</a>
<a href="#" OnClick"CallAlert(3)>Click 3</a>


With Javascript I can pass the 1, 2 and 3 to the function via identifiers ... I know there must be a way to do this with JQuery?

If you can mimic the JavaScript I created with JQuery it would be greatly appreciated. I know I am missing something simple, I just don't know what ... Thanks!

-- Zak
6:18 pm on Jan 13, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


The first problem I see is that you have duplicate id values of "Go". ID's must be unique. You might change those to be classes:

<a href="#" class="Go">Click 1</a>
<a href="#" class="Go">Click 2</a>
<a href="#" class="Go">Click 3</a>

You then have a couple of options regarding how you pass the data. You could make use of HTML5's data- attributes. For example:

<a href="#" class="Go" data-value="1">Click 1</a>
<a href="#" class="Go" data-value="2">Click 2</a>
<a href="#" class="Go" data-value="3">Click 3</a>

Then modify your JavaScript like so:

<script>
$(".Go").click(function() {
alert(this.getAttribute("data-value"));
});
</script>

Note, this is the context of the element that the click handler is attached to.

Finished result would be something like this:


<!doctype html>
<html>
<head>
<title>data- attribute test</title>
</head>
<body>
<div>
<a href="#" class="Go" data-value="1">Click 1</a>
<a href="#" class="Go" data-value="2">Click 2</a>
<a href="#" class="Go" data-value="3">Click 3</a>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(".Go").click(function() {
alert(this.getAttribute("data-value"));
});
</script>
</body>
</html>
6:22 pm on Jan 13, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


Also, welcome to WebmasterWorld! :)
4:53 am on Jan 15, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
posts:1341
votes: 0


In one Jquery script where I dynamically create items, I keep a counter of the total number of each type of item, then increment the id so each clickable item has a unique id.

Since my application involves draggable items, this also lets me easily keep track of x,y coordinates, total count, and easily delete a specific dynamicly created item.

In the code below, if "ttlXbox" equaled 7 before the function was called, it would create a new item with the id "xbox8"

============================================

$("#addXboxButton").click (
function() {
ttlXbox++;
var top = $('#addXboxButton').position().top;
var left = $('#addXboxButton').position().left;
$('<div id="xbox' + ttlXbox + '" class="xbox" class="ui-widget-content" style="position: absolute; margin: 0px; top: '+top+'px; left: '+left+'px;"></div>').draggable().appendTo('.viewPort');
}
);

==============================================

(I left the extra junk regarding style and position in the code thinking it might be useful -- if you need a cleaner example, let me know).
3:45 pm on Jan 16, 2012 (gmt 0)

New User

joined:Jan 12, 2012
posts: 38
votes: 0


Thanks for the welcome! I'll explain more in detail what I have going and display some of my actual code so it's easier to see...

From this:


<p><a href="#" onClick="addFormIm(); return false;" style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#6633FF;">Add Image</a></p>


I am calling:


var iid=0;
function addFormIm() {
iid = iid + 1;
$("#divIm").append("<div id='irow" + iid + "'><img src=\"del.png\" style=\"vertical-align:middle;\" onClick='removeFormIm(\"#irow" + iid + "\",\"" + iid + "\"); return false;'>&nbsp;&nbsp&nbsp;&nbsp<a href=\"#\" onClick\"(Upload(" + id + "))\";>Upload Image</a><br><hr width=\"400\"><br></div>");
$("#containment-wrapper").append('<div id=\"AdIm' + iid + '\" style=\"width: 100px; height:100px; border:2px solid #ccc;\"><span id="mestatus' + iid + '" ></span><div id="files' + iid + '"><li class="success' + iid + '"></li></div></div></div>');
$( "#AdIm" + iid ).draggable({ containment: "#containment-wrapper", scroll: true });

$('#irow' + iid).highlightFade({
speed:1000
});
document.getElementById("iid").value = iid;
}
function removeFormIm(Riid,iid) {

$(Riid).remove();
var d = document.getElementById('containment-wrapper');
var olddiv = document.getElementById('AdIm' + iid);
d.removeChild(olddiv);
}


Creating these:

<div id='X'><img src="del.png" style="vertical-align:middle;" onClick='removeFormIm("#irowX","X"); return false;'>&nbsp;&nbsp&nbsp;&nbsp<a href="#" onClick"Upload(X)";>Upload Image</a><br><hr width="400"><br></div>


Calling Upload:


<script>
$(function Upload(id){
alert ('Image ID is ' + id + '!');


});
</script>



.... Everything works perfect, except for passing the ID to the upload function ... And when I check the CSS, the ID's are assigned properly. I just can't get them passed to the "Upload" function.

-- Zak
4:23 pm on Jan 16, 2012 (gmt 0)

New User

joined:Jan 12, 2012
posts: 38
votes: 0


AKKK! For those of you who can't see the forest through the trees ...

CHECK YOUR CODE

onClick\"(Upload(" + id + "))\";


This was my issue ... That extra set of parentheses combined with the wrong ID creation, there is no id .. Only iid .. This works:

onClick\"Upload(" + iid + ");\"


I believe that occurred during a copy paste ... lol .. I am sorry to take up your time for a stupid mistake!

-- Zak
7:40 pm on Jan 16, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
posts:1341
votes: 0


We've all been there. Many of the most frustrating errors (in Javascript and other scripting and programming languages) can be attributed to:

quote marks - mismatched, or improperly nested, or improper use of single or double quotes.

semicolons - and other end of statement or end of line terminators

parenthesis or brackets - mismatched, improperly nested or wrong type used

0's or 1's - not understanding if the counting, increment or iteration of a value was zero based or one based.

typos - e.g.- typing 'id' as a var name when we meant 'iid'.

Maybe others will add to this list of common coding errors.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members