Question

I just started experimenting with jqModal and am having a strange issue.

The modal window is displayed correctly however I get a javascript error when I click anywhere inside it. When I look at the offending line of code, it turns out that jqModal is trying to run my entire page as if it were one big piece of javascript.

Since I wrote this post, I discovered that the code works fine in FireFox. The issue is IE of course.

My markup:

<script type="text/javascript">

    $(document).ready(function () {

        $('#jqmWindowContainer').jqm({ 
            modal: true,
            ajax: '<%: Url.Action("Save", "AssetSearch") %>',
            onHide: myAddClose
        });

        function myAddClose(hash) {
            hash.w.fadeOut('300', function () { hash.o.remove(); });
        }

    }); 

    </script> 


<a href="#" class="jqModal display-field-right">Save this search</a>  
<span id="jqmWindowContainer" class="jqmWindow">  
</span> 

Modal window markup:

<div id="modalWindow" class="jqmWindow">  

    <% using (Ajax.BeginForm("Save", "AssetSearch", new AjaxOptions() { HttpMethod = "Post", InsertionMode = InsertionMode.Replace, UpdateTargetId = "modalWindow" }))
                {%>

                <!-- Validation summary -->
                <div class="validation-summary">
                    <%=ViewData["Message"]%>
                </div>

                    <%=Html.LabelFor(x => x.Name)%> 
                    <%=Html.TextBoxFor(x => x.Name)%> 


                <!-- Submit button -->
                <div class="submit-form">
                    <input type="submit" value="Save" /> 
                </div>
                <%
                }%>

</div>

<a class="jqmClose" href="#">Close</a> 

Clicking on the “Save this search” link correctly displays the modal window. Clicking anywhere in the modal, causes this error:

Line: 5 Error: Object doesn’t support
this property or method

When I look at the code it’s trying to execute, it turns out to be my whole page which of course triggers an error:

I have no clue what would cause this behavior. If I continue past the error, the window works correctly and my action method gets called when I click Save.
Help!

Thanks!

Rick

Answer 1

Which versions of jQuery and jqModal you use?

If you use jQuery 1.4.x you should verify whether the jqModal.js contain $() (for example {$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);} in jqModal.js). This can not be used together with jQuery 1.4.x. To fix the problem replace $() to $(document).

UPDATED: After you post the link to site having the problem I could analyse the problem. If one clicks on “Save this Search” it will be loaded the div from http://camp.matrix6.com/matrix6studios/AssetSearch/Save?randomId=332557. The results will be used as a dialog div for jqModal. Currently the div looks as following:

<div class="jqmPopupForm" id="jqmPopupForm">
    <div id="loadingMessage" style="display: none;">
        Saving...
    </div>
    <form action="/matrix6studios/AssetSearch/Save"
          method="post"
          onclick="Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));"
          onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: &#39;Post&#39;, loadingElementId: &#39;loadingMessage&#39;, updateTargetId: &#39;jqmPopupForm&#39; });">
    <div class="sign-in-validation-summary">
    </div>
    <fieldset>
        <legend>Save Your Search</legend>
        <ol>
            <li>
                <label for="Name">
                    Name</label>
                <input id="Text1" name="Name" type="text" value="" />
            </li>
        </ol>
    </fieldset>
    <fieldset class="submit">
        <input type="submit" value="Save" />
    </fieldset>
    </form>
</div>
<a class="jqmClose" href="#">Close</a>

How one can see the form element has onclick and onsubmit attributes which produce at the end the error. If you click inside of the form, you see the error because “Sys.Mvc.AsyncForm.handleClick(this, new Sys.UI.DomEvent(event));” could not be called. How you can see in http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js (uncompressed version of the http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js which you use) it has Sys.Mvc.AsyncForm.handleSubmit but no Sys.Mvc.AsyncForm.handleClick function. It would be easy if you will use the MicrosoftMvcAjax.js from your current MVC project (probably MVC 2.0) because on the Microsoft Ajax CDN you would not find MVC 2.0. More better would be create the dialog with respect of jQuery only without any MVC controls.

It is the main error, but there are some other small problems in your code. For example you should remove comma before ‘}’ from the following code fragment

<script type="text/javascript">
    $(function () {
        $("#accordion").accordion({
            event: "mouseover",
            alwaysOpen: false,
            autoHeight:false,
            navigation: true,
        });
    });
</script>

Next problem is: your code has two elements having id=”jqmWindowContainer”.

Your code has lines

<link rel="stylesheet" type="text/css" media="screen"
      href="http://camp.matrix6.com/content/css/jqModal.css" />
<script type="text/javascript"
        src="http://camp.matrix6.com/Content/js/jqModal.js"></script>

in the middle of the HTML code. It is not allowed. The <link> element should be moved inside of the <head>. Moreover you include the code with <link href=".../jqModal.css"> and <script src=".../jqModal.js"></script> twice on one page which is also very bad. You should not load jqModal.js twice on the same page. If you move the code to the <head> you can place it only once.

I can continue with less important errors to hold XHTML 1.0 Strict which you use. For example you should place <fieldset> elements inside of <form> and <ul> over <li> and so on. I recommend you validate your page in http://validator.w3.org/.