jqModal is trying to run my whole page!

Question

Hello,

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"&gt;&lt;/script&gt;

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/.

Answer 2

good thorough question +1

Answer 3

I think your code:

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

Needs in the wrong scope. Move method global by moving that code outside the

 "$(document).ready(function (){})

code

Answer 4

I am getting Sys.Mvc.AsyncForm.handleClick is not a function in Firefox. I assume that you use ASP.NET MVC version 2, but in your page you have a reference to http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js which is from MVC version 1 and does not have the Sys.Mvc.AsyncForm.handleClick function. If you use MVC 2 you should reference corresponding version of javascript files.

Answer 5

I get a very similar error in Chrome too...

It's to do with breaking changes on how $()is handled in jquery 1.4.2, because jqmodal was never updated to work with the jquery 1.4.x family.

check this link http://jquery14.com/day-01/jquery-14#backwards (4th item on the list)

things you can do to alleviate this problem: (all options below are mutually exclusive)

• Replace jquery 1.4.2 with jquery 1.3.1 or similar
• Use this Compatibility plugin released by the jquery team to ease upgrade issues
• Manually go through the source of jqmodal.js and fix any breaking incompatibilities. (such as replace $() with $(document) etc.)