Can't pass 2 parameters on an onclick in href

[cjay175]

Hi there,

I am having some issues with getting a variable from an onclick event with javascript.

$('#preview_logo').append('<img src="'+fileObj.filePath+'" height="100px" hspace="5" /> '+fileObj.name+' uploaded.<a href="javascript:;" id="dele_image" onclick="del_image('+fileObj.filePath+','+fileObj.name+');">Upload Different Image</a><br>');

This is for uploadify script for previewing an image that is uploaded, it creates the link fine, but won't trigger the function "del_image" unless I delete the parameters in the onclick, which leads me to believe it is something to do with my quoting.

Here is the function:

function del_image(item_a, item_b){
	$("#logo_upUploader").show(); 
	$("#uploadifyUp").show();
    $.ajax({
    type: "GET",
    url: "plugin/delete_image.php",
    data: "filepath="+item_a,
    success: function(){
    alert( item_b+" Deleted");
}
});
}

just hoping someone might be able to see where i went wrong.

Thanks a lot

[cjay175]

I just saw I put this in the wrong section, just wondering if an mod would be able to move it to javascript or just delete and I'll repost.

Thanks & sorry

[Airshow]

On this page of the jQuery API, we learn from a contribtor's comment that :

"The documentation should state that append(), appendTo(), prepend(), prependTo() and similar jQuery functions silently remove event handlers from a HTML document fragment string."

With jQuery (etc.) always consult the API. The answer, or a very good clue, is very often in there.

Airshow

[scrappedcola]

I am having some issues with getting a variable from an onclick event with javascript.

$('#preview_logo').append('<img src="'+fileObj.filePath+'" height="100px" hspace="5" /> '+fileObj.name+' uploaded.<a href="javascript:;" id="dele_image" onclick="del_image('+fileObj.filePath+','+fileObj.name+');">Upload Different Image</a><br>');

The first thing that jumps out at me is the missing single quote here: +');">. You have one on the left of the paren but only a double quote to the right. A good way of avoiding quote confusion is to escape quotes that you need to layer such as: '<img src=\" '.

If that doesn't solve the issue try creating an element fragment for each the image and the anchor. Then separately set the attributes, and then attaching the element to the parent node. Your code may not be rendering correctly. You can also attach a name attribute of the fileObj to the image and give it an id that you pass to the anchor element and separately grab rather than passing both attributes separately (conversely you could just attach those two values as attributes to the anchor and pass the click event "this" though there are some that will argue against adding data to html elements).

[Airshow]

cJay,

I guess there are many ways to do what you want with or without jQuery. I think I would probably build the required DOM fragment in parts then append them sequentially to the designated container ('#preview_logo').

Here's some code, which is essentially equivalent to the $('#preview_logo').append(html) you were struggling with:

var img = $('<img>').attr({
		src: fileObj.filePath,
		alt: fileObj.name
	}).css({
		height: "100px",
		margin: "0 5px"
	});
	var txt = $('<span>').html(fileObj.name + ' uploaded.');
	var link = $('<a>')
		.attr({ href: '' })
		.text('Upload Different Image')
		.click(function(f){
			return function(){
				del_image(f.filePath,f.name);
				return false;
			};
		}(fileObj));//call immediately forming closure to capture current fileObj attributes

	$('#preview_logo').append(img).append(txt).append(link);

This approach overcomes the problem of the disappearing event handler and has the advantage that variables img , txt , link can (with regard to their scope) remain available to make the inserted DOM elements individually addressable later without needing to resort to document.getElementById() to rediscover them.

Airshow

[peter_budo]

Moved, in the future please use "Flag Bad Post" and type short message such as "Please move to XYZ section" and somebody from mod team will do it

EDIT: Now both threads are merged and there should be minimum to none confusion

[cjay175]

Thanks and apologizes for the mix up Peter_budo...

Also thanks for the replys everyone, sorry for the late reply got sent out of town for work.
I just gave your example a try Airshow, I would of never have thought of doing it that way but it works great.

The only thing is my ajax call doesn't seem to be working, but i imagine thats going to be something simple.

Thanks a lot,

peace

[Airshow]

cJay,

I just went over my code and spotted a erreur. Doh!

The links click function should be as follows:

.click(function makeClosure(filePath, name){
			return function(){
				del_image(filePath, name);
				return false;
			};
		}(fileObj.filePath, fileObj.name));//call immediately forming closure to capture current fileObj attributes

I forgot that closures only capture formal parameters passed-by-value and not those passed-by-reference. Hence we have to pass fileObj's attributes individually. Passing fileObj in toto does not capture current property values.

This may or may not matter to you depending on whether fileObj.filePath, fileObj.name get changed later by some other code.

Airshow