jqModal пытается запустить всю мою страницу!

Question

Я только начал экспериментировать с jqModal, и у меня странная проблема.

Модальное окно отображается правильно, но я получаю ошибку javascript, когда я нажимаю на нее внутри. Когда я смотрю на оскорбительную строку кода, оказывается, что jqModal пытается запустить всю мою страницу, как если бы это была одна большая часть javascript.

Поскольку я написал это сообщение, я обнаружил, что код отлично работает в FireFox. Конечно, проблема в IE.

Моя разметка:

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

Модальные окна разметки:

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

Нажатие на «Сохранить этот поиск» ссылку корректно отображает модальное окно. Щелчок в любом месте модальных, вызывает эту ошибку:

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

Когда я смотрю на код, он пытается выполнить, это, оказывается, вся моя страница, которая, конечно, вызывает ошибку:

У меня нет ни малейшего понятия, что могло бы вызвать подобное поведение. Если я продолжу ошибку, окно будет работать правильно, и мой метод действия вызывается при нажатии кнопки «Сохранить». Помощь!

Спасибо!

Рик

Answer 1

Какие версии JQuery и jqModal вы используете?

Если вы используете jQuery 1.4.x, вы должны проверить, содержит ли jqModal.js $() (например, {$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);} в jqModal.js). Это нельзя использовать вместе с jQuery 1.4.x. Чтобы устранить проблему, замените $() на $(document).

ОБНОВЛЕНО: После того, как вы разместите ссылку на сайт с проблемой, я смог бы проанализировать проблему. Если вы нажмете «Сохранить этот поиск», он будет загружен div с http://camp.matrix6.com/matrix6studios/AssetSearch/Save?randomId=332557. Результаты будут использоваться в качестве диалога div для jqModal. В настоящее время DIV выглядит следующим образом:

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

Как можно видеть элемент формы имеет onclick и onsubmit атрибуты, которые производят в конце ошибки. Если вы нажмете внутри формы, вы увидите ошибку, потому что «Sys.Mvc.AsyncForm.handleClick (это новый Sys.UI.DomEvent (событие)); не может быть вызвано. Как вы можете видеть в http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js (несжатая версия http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js, которую вы используете) у нее есть Sys.Mvc.AsyncForm.handleSubmit, но нетSys.Mvc.AsyncForm.handleClick функция. Было бы легко, если вы будете использовать MicrosoftMvcAjax.js из вашего текущего проекта MVC (возможно, MVC 2.0), потому что на Microsoft Ajax CDN вы не найдете MVC 2.0. Лучше было бы создать диалог с учетом jQuery только без каких-либо элементов управления MVC.

Это основная ошибка, но в вашем коде есть и другие небольшие проблемы.Например, вы должны удалить запятую перед «}» из следующего фрагмента кода

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

Следующая проблема: код состоит из двух элементов, имеющих ID = «jqmWindowContainer».

Ваш код имеет линии

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

в середине HTML-кода. Это не разрешено. Элемент <link> должен быть перемещен внутри <head>. Кроме того, вы включаете код с <link href=".../jqModal.css"> и <script src=".../jqModal.js"></script>дважды на одной странице, что тоже очень плохо. Вы не должны загружать jqModal.js дважды на одной странице. Если вы переместите код на <head>, вы можете разместить его только один раз.

Я могу продолжить с менее важными ошибками для хранения XHTML 1.0 Strict, который вы используете. Например, вы должны разместить <fieldset> элементов внутри <form> и <ul> над <li> и так далее. Я рекомендую вам подтвердить свою страницу в http://validator.w3.org/.

Answer 2

Я думаю, что ваш код:

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

потребности в неправильном объеме. Переместить метод глобального путем перемещения этого кода вне кода

Answer 3

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

я получаю Sys.Mvc.AsyncForm.handleClick is not a function в Firefox. Я предполагаю, что вы используете ASP.NET MVC версии 2, но на вашей странице у вас есть ссылка на http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js, которая из версии MVC 1 и не имеет функции Sys.Mvc.AsyncForm.handleClick. Если вы используете MVC 2, вы должны ссылаться на соответствующую версию javascript-файлов.

Answer 4

Я получаю очень похожую ошибку в Chrome тоже ...

Это связано с нарушением изменения о том, как $() обрабатывается в JQuery 1.4.2, потому что jqmodal не обновлялся работать с Jquery 1.4.x семьи.

проверить эту ссылку http://jquery14.com/day-01/jquery-14#backwards (четвёртая пункт в списке)

вещи, которые вы можете сделать, чтобы решить эту проблему: (все ниже варианты являются взаимоисключающими)

• Заменить JQuery 1.4. 2 с jquery 1.3.1 или аналогичным
• Используйте это Compatibility plugin, выпущенное командой jquery, чтобы облегчить проблемы с обновлением
• Вручную перейдите через источник jqmodal.js и исправьте любую несовместимость. (например, заменить $() на $(document) и т. д.)