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>

Answer 3

I'm not entirely familiar with the .dialog() function, but you're using .click() wrong. Part of the issue is some confusion regarding curly braces {}. They're used for two completely separate things, and you're mixing the two up here.

The first use of curly braces is to indicate the interior of a block: the inside of a loop, the inside of a condition, the inside of a function. For example:

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

The second use is JSON (JavaScript Object Notation) for an object or associative array, where properties or values are paired with names or keys in the following format:

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

When you write $('#reg_link').click (function() {, you're opening up a function block with that curly brace, not starting a JSON. Thus, when you write open: (as if this were a JSON and you're setting the open key), something is definitely not going to work the way you expect it to (I'm surprised... kind of... that there's no error, actually). What you need to write within those curly braces is the code of a function. In this case, it's probably just this:

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

In general, jQuery uses both of these versions a lot, and often mixes them together (functions that accept JSONs as arguments, or JSONs that include function callbacks as entries), so it's really important to understand which is which.

EDIT: Some Googling re:.dialog() suggests that you'll also need to call it after .load(), which means that block should look something like this:

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

Based on your own code, .dialog() actually is an example of a function that takes a JSON as an argument, so assuming that bit's correct, the full code is like this:

$('#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,
    });
});