jqModal essaie d'exécuter toute ma page!

Question

Je viens de commencer à expérimenter avec jqModal et j'ai un problème étrange.

La fenêtre modale est affichée correctement mais je reçois une erreur javascript lorsque je clique n'importe où à l'intérieur. Quand je regarde la ligne de code incriminée, il s'avère que jqModal essaie d'exécuter toute ma page comme s'il s'agissait d'un gros morceau de javascript.

Depuis que j'ai écrit ce post, j'ai découvert que le code fonctionne bien dans FireFox. Le problème est IE bien sûr.

Mon balisage:

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

balisage fenêtre Modal:

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

En cliquant sur « Enregistrer cette recherche » lien affiche correctement la fenêtre modale. En cliquant sur cette modales, provoque cette erreur:

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

Quand je regarde le code qu'il essaie d'exécuter, il se trouve être ma page entière qui bien sûr déclenche une erreur:

Je n'ai aucune idée de ce qui causerait ce comportement. Si je continue après l'erreur, la fenêtre fonctionne correctement et ma méthode d'action est appelée lorsque je clique sur Enregistrer. Aide!

Merci!

Rick

Answer 1

Quelles sont les versions de jQuery et jqModal que vous utilisez? Si vous utilisez jQuery 1.4.x, vous devez vérifier si jqModal.js contient $() (par exemple {$()[t]("keypress",m)[t]("keydown",m)[t]("mousedown",m);} dans jqModal.js). Cela ne peut pas être utilisé avec jQuery 1.4.x. Pour résoudre le problème, remplacez $() par $(document).

MISE À JOUR: Après avoir publié le lien vers le site ayant le problème, je pourrais analyser le problème. Si on clique sur "Enregistrer cette recherche", il sera chargé le div de http://camp.matrix6.com/matrix6studios/AssetSearch/Save?randomId=332557. Les résultats seront utilisés comme un div de dialogue pour jqModal. Actuellement, la div se présente comme suit:

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

Comment on peut voir l'élément de forme a onclick et onsubmit attributs qui produisent à la fin de l'erreur. Si vous cliquez à l'intérieur du formulaire, vous voyez l'erreur parce que "Sys.Mvc.AsyncForm.handleClick (this, new Sys.UI.DomEvent (event));" n'a pas pu être appelé. Comment vous pouvez voir dans http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.debug.js (version non compressée du http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js que vous utilisez) il a Sys.Mvc.AsyncForm.handleSubmit mais aucune fonctionSys.Mvc.AsyncForm.handleClick. Il serait facile si vous utiliserez le MicrosoftMvcAjax.js de votre projet MVC actuel (probablement MVC 2.0) parce que sur le Microsoft Ajax CDN vous ne trouveriez pas MVC 2.0. Plus préférable serait de créer le dialogue en ce qui concerne jQuery uniquement sans aucun contrôle MVC.

C'est l'erreur principale, mais il y a d'autres petits problèmes dans votre code.Par exemple, vous devez supprimer des virgules avant « } » du fragment de code suivant

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

problème suivant est: votre code comporte deux éléments ayant id = « jqmWindowContainer ».

Votre code a au milieu du code HTML lignes

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

. Ce n'est pas permis. L'élément <link> doit être déplacé à l'intérieur du <head>. De plus, vous incluez le code avec <link href=".../jqModal.css"> et <script src=".../jqModal.js"></script>deux fois sur une page qui est également très mauvaise. Vous ne devez pas charger jqModal.js deux fois sur la même page. Si vous déplacez le code au <head>, vous ne pouvez le placer qu'une seule fois.

Je peux continuer avec des erreurs moins importantes pour contenir XHTML 1.0 Strict que vous utilisez. Par exemple, vous devez placer les éléments <fieldset> à l'intérieur de <form> et <ul> sur <li> et ainsi de suite. Je vous recommande de valider votre page en http://validator.w3.org/.

Answer 2

Je pense que votre code:

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

besoins dans le mauvais champ d'application. Déplacer méthode globale en déplaçant ce code en dehors du

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

Code

Answer 3

Je reçois Sys.Mvc.AsyncForm.handleClick is not a function dans Firefox. Je suppose que vous utilisez ASP.NET MVC version 2, mais dans votre page vous avez une référence à http://ajax.microsoft.com/ajax/mvc/1.0/MicrosoftMvcAjax.js qui est à partir de MVC version 1 et n'a pas la fonction Sys.Mvc.AsyncForm.handleClick. Si vous utilisez MVC 2, vous devez référencer la version correspondante des fichiers javascript.

Answer 4

J'obtiens une erreur très similaire dans Chrome aussi ...

Il est à voir avec les changements sur la façon dont la rupture $() est gérée dans jquery 1.4.2, parce que jqModal n'a jamais été mis à jour pour fonctionner avec le jquery 1.4.x famille.

vérifier ce lien http://jquery14.com/day-01/jquery-14#backwards (4ème élément de la liste)

choses que vous pouvez faire pour remédier à ce problème: (toutes les options ci-dessous sont mutuellement exclusifs)

• Remplacer jquery 1.4. 2 avec jquery 1.3.1 ou similaire
• Utilisez ce Compatibility plugin publié par l'équipe jquery pour faciliter les mises à niveau
• Parcourez manuellement la source de jqmodal.js et corrigez toute incompatibilité de rupture. (tel que remplacer $() avec $(document) etc.)