Search jQuery

jQuery Forum

Using jQuery UI

gastrogeek

JQuery UI - Dialog - Deleting items?

in Using jQuery UI • 10 years ago

Hi,

Firstly, hello everyone!

Secondly, please bear with me. I only started developing a week ago - I didn't even know HTML/CSS prior to that. So It's highly likely I have made a n00b-style booboo either in my own HTML, or in the implementation of the JQUI Dialog.

Right,

I have a page, with a gallery on it. I associate the id="dialog" to the img that I wish to have pop up in a dialog and that works fine. However... as a result of this, the item associated with id="dialog" gets removed from my page completely so I can't click it a second time.

It's really strange and I can't figure it out. It doesn't matter if I move the id="dialog" to the <img>, <a> or <li>. Whatever I chose - *that* gets removed, along with anything inside of it.

Here is the header code:

<script type="text/javascript">
$(function() {
$("#dialog").click(function(){
$("#dialog").dialog({ position: 'center'})
$("#dialog").dialog('open');
return false;
});
});
</script>

Here is the body code (has all the correct HTML around it):

<ul id="portfolio">
<li class="filter-0"><a href="#"><img id="dialog" src="images/item.jpg" alt="" />Item 0</a></li>
<li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 1</a></li>
<li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 2</a></li>
<li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 3</a></li>
<li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 4</a></li>
<li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 5</a></li>
<li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 6</a></li>
<li class="filter-1"><a href="#"><img src="images/item.jpg" alt="" />Item 7</a></li>
<li class="filter-2"><a href="#"><img src="images/item.jpg" alt="" />Item 8</a></li>
<li class="filter-0"><a href="#"><img src="images/item.jpg" alt="" />Item 9</a></li>
</ul>

Any ideas? Your help is much appreciated.

Replies(2)

ajpiano

Re: JQuery UI - Dialog - Deleting items?

10 years ago

Dialog doesn't remove items, but it does *move* them to inside of the dialog, which is hidden at the end of the page. The idea of having the elemnt that you click on also become the dialog content is somewhat strange.

Also, you're not using the .dialog({position:"center"}) - the "option setter" syntax correctly. The way to do it is .dialog("option","position","center") or .dialog("option",{position:"center"});

Consider the following approach, which uses the <a> tag in each LI as the trigger, and then shows the related image inside of a dialog, but instead of moving the actual img tag, it will take the image, clone it to the inside of a brand new element for the dialog, and then get rid of the whole thing entirely when it's closed.

$(function() {
$("#portfolio a").click(function(e){
//when an anchor is clicked
e.preventDefault(); //prevent the default action on anchors (replaces return false)
var img = $(this).find("img").clone(), //clone the image inside of it
d = $("<div>").append(img); //create a new div, append the cloned image inside
//make the new div into a dialog
d.dialog({
position:"center",
close:function() {
//when the dialog is closed, undo it's dialog functionality, and remove it from the dom
$(this).dialog("destroy").remove()
},
buttons:{
Ok:function() {
//For example's sake, give dialog a button that will close it, thus triggering removal
$(this).dialog("close");
}
}
});
});
});

This code is untested but should work as a general approach to solving your problem.

rdworth

Re: Re: JQuery UI - Dialog - Deleting items?

10 years ago

Also, you're not using the .dialog({position:"center"}) - the "option setter" syntax correctly.

In 1.7 this syntax only works on init, that is, the first time .dialog() is called on a non-dialog-content element. Subsequent calls are ignored, and you'd have to use the option method as ajpiano points out.

In 1.8 this syntax works on init as well as after init, for setting the option as well as causing the default init side-effect: in the case of dialog, opening the dialog if autoOpen is true.

Top Reply

Response title

Attachments

jQuery Forum

JQuery UI - Dialog - Deleting items?

Replies(2)

Re: JQuery UI - Dialog - Deleting items?

Re: Re: JQuery UI - Dialog - Deleting items?

Statistics

Tags

Actions

Related Posts