Image on Sliding Panel

[Doug Black]

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');

Code: Select all

 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");
}

Code: Select all

 return that; 

};
/code/pre

[Oleg Danchenkov]

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

[Doug Black]

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.

[Kateryna Grynko]

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

[Doug Black]

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