Essayer de faire apparaître une boîte de dialogue modale avec jQuery et PHP

Question

J'ai un bouton e-mail, qui, lorsqu'on clique dessus, devrait faire apparaître une boîte de dialogue d'interface jQuery modale qui affiche un bouton pour vous envoyer un e-mail. Mon code est ici:

<input type="button" value="Email to me" onClick="$("#emailModal").dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/> 

Et voici #emailModal:

<div id="emailModal"> 
<p><input type="button" value="Email to me" onClick="$('#emailPost').submit()" id="emailJQButton"/></p> 
</div> 

Cependant, lorsque je clique sur le bouton, rien ne se passe, et aucun dialogue apparaît. J'ai regardé tout mon code et ne peux pas trouver le problème. De l'aide?

Edit: trouvé le problème, mais j'ai une autre un:

if($_SESSION["loggedIn"] == 1) 
         { 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost'>"; 
          echo "<input type='hidden' value='" . $_SESSION["email"] . "' name='emailAddress'>"; 
          echo "<input type='button' value='Email To Me' onClick='$(\"#emailPost\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
          echo "<h3>Or</h3>"; 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>"; 
          echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>"; 
          echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
         } 
         else 
         { 
          echo "<form action='php/emailPost.php' method='POST' class='inline' id='emailPost2'>"; 
          echo "<input type='text' value='Enter an Email' name='emailAddress' style='display: inline-block;'>"; 
          echo "<input type='button' value='Email' onClick='$(\"#emailPost2\").submit();$(\"#emailModal\").dialog('close');'/>"; 
          echo "<input type='hidden' name='passedCoupID' value='" . $coupID . "'/>"; 
          echo "</form>"; 
         } 

Je l'afficher avec PHP maintenant l'écho, et je sais que devrait exiger des règles spéciales qui s'échappent. Cependant, aucune fonction inline ne fonctionne, pas la commande emailPost ni la boîte de dialogue.

Answer 1

Vous ne pouvez pas utiliser " dans les attributs si elles sont cotées avec ", aussi. Utilisez '#emailModal' au lieu de "#emailModal".

Cependant, la bonne solution serait:

<input type="button" value="Email to me" id="emailButton" /> 
<script type="text/javascript"> 
    $('#emailButton').click(function(e) { 
     e.preventDefault(); 
     $("#emailModal").dialog({title:'Email It Along', height:300, width:350, modal:true, resizable:false}); 
    }); 
</script> 

Answer 2

Vous avez une erreur dans votre code() apostrophes

onClick="$("#emailModal"). 

devrait être

onClick="$('#emailModal'). 

Answer 3

OTOH je pense que vous devriez utiliser

<input type="button" value="Email to me" onClick="$('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false});"/> 

EDIT

Ou comme ThiefMaster dit essayez d'utiliser quelque chose dans les lignes de

$(function(){ 
    $('#myinput').click(function(){ 
     $('#emailModal').dialog({title:'Email It Along',height:300,width:350,modal:true,resizable:false}) 
    }); 
}); 

Answer 4

Le problème est dans le onClick pour le bouton, vous avez des guillemets doubles entre guillemets.

onClick="$("#emailModal").dialog({... 

Je vous suggère de ne pas utiliser onClick et que vous utilisez jQuery pour lier les événements au lieu.

<input type="button" value="Email to me" id="sendEmail" /> 

<div id="emailModal"> 
    <p><input type="button" value="Email to me" id="emailJQButton"/></p> 
</div> 

<script> 
    $(function(){ 
    $("#emailModal").dialog({ 
     title: 'Email It Along', 
     height: 300, 
     width: 350, 
     modal: true, 
     resizable: false, 
     autoOpen: false 
    }); 

    $('#sendEmail').click(function(){ 
     $("#emailModal").dialog('open'); 
    }); 

    $('#emailJQButton').click(function(){ 
     $('#emailPost').submit(); 
    }); 
    }); 
</script>