CODEWITHSUNDEEP
javascriptjqueryhtml
amol singh
amol singh

Reputation: 143

the button click is not responding

i have a jquery code in which i am trying to open a dialog box on the click of a button . i want it be dynamic so i took the selectors as class but it is not responding

javascript code : 

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
 <script src="//malsup.github.com/jquery.form.js"></script>
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

//loop starts
<table>
 <tr>
 <td style="" class="tdx" bgcolor="#CCCCCC"><a href="   <%=contextName%>/jsp/knowledgeBase/kbDetails.jsp?kbaseID=<%=kbaseID%>&app= <%=motsID%>&env=<%=env%>&env=<%=env%>&ptitle"=<%=pTitle%>><%=kbaseID%></a></td>

            <td style="" class="tdx" bgcolor="#CCCCCC"><%=motsName%></td>

            <td style="" class="tdx" bgcolor="#CCCCCC"><%=problemDescription%></td>

   <td class="tdx" bgcolor="#CCCCCC" style="" id="sol" style="background-color:white;border-style:ridge">

     <div class="dialog">

            <p><%=solution%></p>

     </div>
 <button class="opener">Open Dialog</button>
 </td>

    </tr>   
 </table>

//loop ends

jquery code : 

$(function() {
$('.dialog').dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

$('.opener').click(function() {
    $(this).prev().dialog( "open" );
});
});

fiddle link

Upvotes: 0

Views: 65

Answers (2)

adeneo
adeneo

Reputation: 318182

When you initialize the jQuery UI dialog, the HTML changes, and you suddenly have

<button class="opener">Open Dialog</button>

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable" tabindex="-1" role="dialog" aria-describedby="ui-id-1" aria-labelledby="ui-id-2" style="display: none; position: absolute;">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-id-2" class="ui-dialog-title">&nbsp;</span>
    <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close"><span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span><span class="ui-button-text">close</span>
    </button>
</div>
<div class="dialog ui-dialog-content ui-widget-content" id="ui-id-1">
    <p>IT WORKS!!!</p>
</div>
<div class="ui-resizable-handle ui-resizable-n" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-w" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index: 90;"></div>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index: 90;"></div>

Note that there is no $(this).prev().dialog( "open" ); any more, as jQuery UI removes that element and creates the HTML for the actual dialog

You have to do 

$('.dialog').dialog( "open" );

FIDDLE

You could also store the element(s) in a variable

var dialog = $('.dialog').dialog({
    autoOpen: false,
    show: {
        effect: "blind",
        duration: 1000
    },
    hide: {
        effect: "explode",
        duration: 1000
    }
});

$('.opener').click(function () {
    dialog.dialog("open");
});

FIDDLE

Upvotes: 1

Sachin I
Sachin I

Reputation: 1508

You have declared opener as a id

Use 

$('#opener').click(function() {
    $(this).prev().dialog( "open" );
});

Upvotes: 0

Related Questions