Charger le fichier php externe dans la boîte de dialogue jquery modal onclick

Question

J'essaie d'ouvrir une boîte de dialogue modale jquery lorsque l'utilisateur clique sur un lien. Je voudrais ensuite charger un fichier php externe dans la boîte de dialogue. J'utilise ce jquery:

$(document).ready(function() { 
    $('#register').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275, 
     });//end dialog 
     $('#reg_link').click (function() { 
      open: (function(e) { 
      $('#register').load ('register.php'); 
     }); 
     }); 
    }); 

et ce html:

<div id="register"></div> 

qui est réglé sur display: none dans le fichier .css.

Plus loin, à l'intérieur d'une forme, le lien est appelé:

<td><font size="2">Not registered? <a href="#" name="reg_link">Sign-Up!</a></td> 

(je serai en train de changer la table à divs).

Je ne reçois aucune erreur avec ce code, mais rien ne se passe lorsque je clique sur le lien. J'ai obtenu la plupart de ce qui précède d'autres postes de débordement de pile. Est-ce que je manque quelque chose? La table html interfère-t-elle?

Cordialement ...

Answer 1

Dans votre lien

<a href="#" name="reg_link">Sign-Up!</a> 

vous avez name="reg_link" qui devrait être id="reg_link" au lieu, par exemple

<a href="#" id="reg_link">Sign-Up!</a> 

Il va travailler avec le code suivant

$('#reg_link').click(function(e) { 
    e.preventDefault(); 
    $('#register').load('register.php'); 
}); 

pour en faire une boîte de dialogue vous pouvez utiliser

$(document).ready(function() { 

    var dlg=$('#register').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen:false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275 
    }); 


    $('#reg_link').click(function(e) { 
     e.preventDefault(); 
     dlg.load('register.php', function(){ 
      dlg.dialog('open'); 
     }); 
     }); 
}); 

Just an example.

Answer 2

Créer la boîte de dialogue une fois que vous chargez la page .load() remplace le contenu du récipient avec le nouveau contenu

Votre gestionnaire de clic contient des erreurs de syntaxe, il ressemble à votre passage une combinaison de une fonction et un objet comme argument, cela devrait être une fonction normale. Comme

$('selector').click (function() { 
    //code 
}); 

également votre élément <a> a reg_link comme un nom pas id

$(document).ready(function() { 
    $('#reg_link').click (function() { 
     $('#register').load ('register.php', function(){ 
      $('#register').dialog({ 
       title: 'Register for LifeStor', 
       resizable: true, 
       modal: true, 
       hide: 'fade', 
       width:350, 
       height:275, 
      });//end dialog 
     }); 
    }); 
}); 

<td><font size="2">Not registered? <a href="#" name="reg_link" id="reg_link">Sign-Up!</a></td> 

Answer 3

Je ne suis pas tout à fait au courant de la fonction .dialog(), mais vous utilisez .click() mal. Une partie de la question est une certaine confusion concernant les accolades {}. Ils sont utilisés pour deux choses complètement séparées, et vous mélangez les deux ici.

La première utilisation des accolades est d'indiquer l'intérieur d'un bloc: l'intérieur d'une boucle, l'intérieur d'une condition, l'intérieur d'une fonction. Par exemple:

// some code in the global scope 
function something() 
{ 
    // some different code within this function block 
} 
// function's done, we're back in global scope 

La deuxième utilisation est JSON (JavaScript Object Notation) pour un objet ou un tableau associatif, où les propriétés ou les valeurs sont jumelés avec des noms ou des clés dans le format suivant:

var jsonSomething = { 
    key1: value1, 
    key2: value2, 
    etc: etcvalue, 
}; 

Lorsque vous écrivez $('#reg_link').click (function() {, vous ouvrez un bloc fonctionnel avec cette accolade, ne démarre pas un JSON. Ainsi, lorsque vous écrivez open: (comme si ce était un JSON et que vous définissiez la touche open), quelque chose ne va certainement pas fonctionner comme vous le souhaitez (je suis surpris ... un peu .. qu'il n'y a pas d'erreur, en fait). Ce que vous devez écrire dans ces accolades est le code d'une fonction. Dans ce cas, il est probablement juste ceci:

$('#reg_link').click (function() { 
    $('#register').load ('register.php'); 
}); 

En général, jQuery utilise ces deux versions un beaucoup, et les mélange souvent ensemble (fonctions qui acceptent JSONs comme arguments, ou JSONs qui incluent callbacks fonction comme entrées), il est donc important de comprendre qui est qui.

EDIT: googling re: .dialog() suggère que vous aurez également besoin de l'appeler après .load(), ce qui signifie que le bloc devrait ressembler à ceci:

$('#reg_link').click (function() { 
    $('#register').load ('register.php').dialog(/*argument(s) here*/); 
}); 

Sur la base de votre propre code, .dialog() est en fait un exemple d'une fonction qui prend un JSON comme un argument, donc en supposant correcte, le code complet de ce bit est comme ceci:

$('#reg_link').click (function() { 
    $('#register').load ('register.php').dialog({ 
     title: 'Register for LifeStor', 
     resizable: true, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     width:350, 
     height:275, 
    }); 
});