unable to open jquery ui dialog for second time

Question

I have two jquery ui dialog's which opens only once. here is the fiddle http://jsfiddle.net/santosh_patnala/2fMqp/2/

html:

<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>

    <br />
    <button class="Share">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Elgifto Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>

    <br />
    <button class="Share">Share</button>
    <div id="test" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

jquery:

$(".Share").click(function (e) {

$(this).next(".testCase").dialog();

})

Please help me out of this

Answer 1

This is happening because you're initialising your dialog's on first load, and on second attempt they are already initialised so we can't initialise them again.

I have got it working in this fiddle: http://jsfiddle.net/2fMqp/24/

Essentially, give your dialog <div>'s unique IDs, in this instance I've used "test1" and "test2". Add a data attribute to your share buttons so they know which <div> they are controlling, in this example they are data-dialogId.

<div>
    <div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>
    <br />
    <button class="Share" data-dialogId="test1">Share</button>
    <div id="test1" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case One Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>
    <br />
    <button class="Share" data-dialogId="test2">Share</button>
    <div id="test2" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Two Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>

Next, we initialise the dialog's on page load, and then when the button is called, get the ID of the div we want to display, and call dialog("open") rather than just dialog().

$( ".testCase" ).dialog({
    autoOpen: false,
});

$(".Share").click(function (e) {
    var dialogId = $(this).attr("data-dialogId");
    $("#" + dialogId).dialog("open");
});

Answer 2

<div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case One </b>

    <br />
    <button class="Share" id="1">Share</button>
    <div id="test1" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case One Url:http://localhost:51723/CaseStudies/Details/1</div>
</div>
<div class="case-study-share" style="width: 24%; float: left;"> <b>Test Case Two </b>

    <br />
    <button class="Share" id="2">Share</button>
    <div id="test2" class="testCase" title="Dialog Title" style="display: none">CaseStudy = Test Case Two Url:http://localhost:51723/CaseStudies/Details/2</div>
</div>

$(".Share").click(function (e) {

$("#test"+$(this).attr('id')).dialog();

})

I found a different solution for you. Add id parameters to your buttons.

Using $(this) with .dialog() removes the elements from DOM.