homepage Welcome to WebmasterWorld Guest from 54.196.201.253
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dynamic JQuery Objects Calling to Function
Dynamic JQuery Objects Calling to Functio
ZakAltF4




msg:4406596
 5:14 pm on Jan 13, 2012 (gmt 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

 

Fotiman




msg:4406636
 6:18 pm on Jan 13, 2012 (gmt 0)

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>

Fotiman




msg:4406637
 6:22 pm on Jan 13, 2012 (gmt 0)

Also, welcome to WebmasterWorld! :)

lexipixel




msg:4406950
 4:53 am on Jan 15, 2012 (gmt 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).

ZakAltF4




msg:4407310
 3:45 pm on Jan 16, 2012 (gmt 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

ZakAltF4




msg:4407324
 4:23 pm on Jan 16, 2012 (gmt 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

lexipixel




msg:4407406
 7:40 pm on Jan 16, 2012 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved