Load external php file in jquery modal dialog onclick

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.

Answer 2

Create the dialog after you load the page .load() replaces the content of the container with the new content

Your click handler has syntax errors, It looks like your passing a combination of a function and an object as the argument, it should be a normal function. Like

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

Also your <a> element has reg_link as a name not 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>