Search code examples
jqueryasp.net-mvcjquery-uijqmodal

jqModal and jquery widget help widget not firing


I just started playing around with jquery widgets within my jqmodals in my mvc app.

Initially,

  1. I can click the Add link, get the alert ("which is the prize"), next click cancel to close modal for the desired result.
  2. I can, then, click the Edit link and get the same desired result.
  3. However, if I click Edit link first, then try to click the Add link, "forget about it" I don't get the alert (which means my widget did not init).
  4. But I can still go back and click Edit and get the prize (the alert message).

ajax: "/Home/EditPrintAdLine" and ajax: "/Home/AddPrintAdLine" will eventually render the same web user control which contains the element that inits the widget (field name is PrintAdLine_RunDate)

Any ideas?

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

    <div id="printAdLineEditDialog" class="jqmWindow"></div>
    <div id="printAdDialog" class="jqmWindow"></div>

    <table>   
    <tr><td><a id="printAdLineItem" href="#">Add a Line Item</a></td></tr>
    <tr><td><a id="editPrintAdLine" href="#">Edit</a></td></tr>        
    </table>

    <script type="text/javascript">
        $(document).ready(function() {

            $.widget("ui.my_widget", { _init: function() { alert("My widget was instantiated"); } });

            // Add line    
            $('#printAdDialog').jqm({
                ajax: "/Home/AddPrintAdLine",
                trigger: '#printAdLineItem',
                onLoad: function(hash) {                    
                    $('#PrintAdLine_RunDate').my_widget();
                }
            });

            // Edit line    
            $('#printAdLineEditDialog').jqm({
                ajax: "/Home/EditPrintAdLine",
                trigger: '#editPrintAdLine',
                onLoad: function(hash) {
                    $('#PrintAdLine_RunDate').my_widget();
                }
            });
        });
    </script>

</asp:Content>

Solution

  • Turned out to be a scoping issue.

    $('#PrintAdLine_RunDate', 'printAdLineEditDialog').my_widget();
    
    $('#PrintAdLine_RunDate', 'printAdDialog').my_widget();