Forum | Appery.io

I've created a sliding panel according to the tutorial. I'm trying to add a dynamic image based on which listitem is clicked.

I've searched how to do this and am using jQuery prepend command to add the image. Works fine for the first one...

...and hilariously terrible for any subsequent clicks.

How would you recommend adding the image to the sliding panel?

PS...here's the Javascript I use:
precode
var Panel = function() {
var that = {},
_panel = $('#mypanel');

 var page = _panel.parents("[data-role=page]"); 
 page.append(_panel); 

 _panel.on("panelbeforeopen", function( event, ui ) { 

//Events
$("#pastorName").text(localStorage.getItem("selectedConnectPastor"));
$("#pastorImage")&#46;prepend('<img id="theImg" src="'+localStorage&#46;getItem("selectedConnectImageURL")+'" width=100px &#47;>');
$("#pastorRequest")&#46;text(localStorage&#46;getItem("selectedConnectRequest"));
$("#close_panel")&#46;die()&#46;live("click", function() {
that&#46;close();
});
});
that&#46;open = function() {
_panel&#46;panel("open");
}
that&#46;close = function() {
_panel&#46;panel("close");
}

 return that; 

};
/code/pre

I'm not sure I understand what is the problem and what do you want to achieve. Could you please clarify?

Sure! When you click on the listitem, it opens the sliding panel with localStorage variables for the text and image URL. I wasn't sure how to put it on the sliding panel in a dynamic way, but the jQuery prepend command works to put the picture in the panel.

When you open the panel one time, everything looks normal. However, when you close the panel and open it a second time, it contains all of the pictures that were previously used in the panel. I assume its a problem with how I am loading the picture each time the Panel is open, but I'm unsure how to change it.

Hi Doug,

You want to have an only Image you clicked on to be in Panel, right? Then replace:precode$("#pastorImage")&#46;prepend('<img id="theImg" src="'+localStorage&#46;getItem("selectedConnectImageURL")+'" width=100px &#47;>');/code/prewith:precode$("#pastorImage")&#46;html('<img id="theImg" src="'+localStorage&#46;getItem("selectedConnectImageURL")+'" width=100px &#47;>');/code/pre

Simple fix! Thank you for your help, and for putting up my lack of knowledge!