jQuery UI Question. How to pass parameters to a function.

Question

I am pretty new to jQuery.

How do I pass parameters to a function? I found some jQueryUI demos and I got it working except "view" link.

I have a problem with passing parameters to and show them in modal popup windows.

I have "Create New User" button and "View" link on the page. Clicking "Create New User" does pass the parameters and show them on modal popup window. ('12345' in User ID textbox, 'John Starks' in User Name textbox)

$(function() { 
...  
    //Create New User button 
    $('#create-user') 
        .button() 
        .click( 
            function() { 
                $('#dialog-form').dialog('open'); 
                userId.val('12345'); 
                userName.val('John Starks'); 
            } 
        ); 
}); 

But, "View" link doesn't work... Clicking "View" link does pop up modal window with no value in the textbox(User ID and User Name)

function doView( idP, nameP )   
{   
     $('#dialog-form2').dialog('open'); 
     userId.val(idP);  
     userName.val(nameP);  
} 

<a href="#" OnClick="doView('001','John Doe');" >view</a> 
... 

How to pass the parameters to modal window?

Thanks in advance.

Answer 1

Hi Altogether ;-),

the ajax() method is described well in the jquery docs. It accepts only one parameter being a settings array/object including key-value-pairs of settings.

one example of the docs is as follows:

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    $('.result').html(data);
    alert('Load was performed.');
  }
});

The call in your source code (at the very top) is missing an 'url'-setting, so the method cannot know which url to query. You can add the ajax parameter to your call in the following way (just an example):

  url: 'ajax/test.php',
  type: "GET",
  data: ({id : idP, name : nameP}),

all code untestet, but it should clarify the thing a bit :-)

EDIT: i just saw that you are calling your view-method with id and name set, so why would you want to do an ajax call? To retreave more information? Then you can use the above code and add more parameters.

If you only want to take these two params and show them in your dialog, the following should be enough (which you already had in the first place):

function doView( idP, nameP ) 
{ 
     $('#dialog-form2').dialog('open');
     userId.val(idP);
     userName.val(nameP);
}

edit

for a modal dialog, rewrite doView the following way:

function doView( idP, nameP ) 
{ 
     $('#dialog-form2').dialog({ modal: true });
     userId.val(idP);
     userName.val(nameP);
}

use it the same way as before.