Question

I’m trying to open a jquery modal dialog box when the user clicks on a link. I’d like to then load an external php file into the dialog box. I’m using this 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');
        });
      }); 
    }); 

and this html:

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

which is set to display:none in the .css file.

Further on, inside a form, the link is called:

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

(I’ll be changing the table to divs).

I don’t get any errors with this code, but nothing happens when I click the link. I got most of the above from other stack overflow posts. Am I missing something? Is the table html interfering?

Regards…

Answer 1

In your link

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

you have name="reg_link" that should be id="reg_link" instead, i.e.

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

So it’ll work with following code

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

To make it a dialog you can use

$(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.