jQuery UI Dialog pass on variables

Question

I'm creating a Web interface for a table in Mysql and want to use jQuery dialog for input and edit. I have the following code to start from:

    $("#content_new").dialog({
    autoOpen: false,
    height: 350,
    width: 300,
    modal: true,
    buttons: {
        'Create an account': function() {
            alert('add this product');
        },
        Cancel: function() {
            $(this).dialog('close');
            $.validationEngine.closePrompt(".formError",true);
        }
    },
    closeText: "Sluiten",
    title: "Voeg een nieuw product toe",
    open: function(ev, ui) { /* get the id and fill in the boxes */ },
    close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
    $("#content_new").dialog('open');
});
$(".editproduct").click(function(){
    var test = this.id;
    alert("id = " + test);
});

So when a link with the class 'editproduct' is clicked it gets the id from that product and I want it to get to the open function of my dialog.

Am I on the right track and can someone help me getting that variable there.

Thanks in advance.

Sarfraz · Accepted Answer · 2010-04-15 08:49:48Z

2

Set a variable eg the_id on top of everything in your script and try this code:

$("#newproduct").click(function(){
    $("#" + the_id).dialog('open');
});
$(".editproduct").click(function(){
    the_id = this.id;
});

answered Apr 15, 2010 at 8:49

Sarfraz

384k81 gold badges561 silver badges613 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dante Over a year ago

I don't think that is wat I want. Maybe I should be more clear. The dialog div that i don't mention in my code above is hidden en gets initialized with the $("#content_new").dialog function. After that it opens when the link with id #newproduct is clicked. I also want the same dialog to open when clicked on the edit button. But then i would need the id of the product where the user clicked edit to populate my form with the correct data. So when a link with the class .editproduct is clicked i get the id of the clicked link and want to use it in the open function of my dialog.

Dante Over a year ago

Oops, you were right about setting the variable on top of the script. Sorry. The code is this: $("#newproduct").click(function(){ $("#content_new").dialog('open'); }); $(".editproduct").click(function(){ id = this.id; $("#content_new").dialog('open'); }); Thanks for you're help.

Dante · Accepted Answer · 2010-04-15 10:02:11Z

Thanks Sarfraz you were right about the variable. For others interest the full code is now:

$(document).ready(function() {
var id = 0;
$("#content_new").dialog({
    autoOpen: false,
    height: 350,
    width: 300,
    modal: true,
    buttons: {
        'Create an account': function() {
            alert('add this product');
        },
        Cancel: function() {
            $(this).dialog('close');
            $.validationEngine.closePrompt(".formError",true);
        }
    },
    closeText: "Sluiten",
    title: "Voeg een nieuw product toe",
    open: function(ev, ui) { alert(id); },
    close: function(ev, ui) { $.validationEngine.closePrompt(".formError",true); }
});
$("#newproduct").click(function(){
    $("#content_new").dialog('open');
});
$(".editproduct").click(function(){
    id = this.id;
    $("#content_new").dialog('open');
});
$("#new").validationEngine();});

And on the opening of the modal dialog box i get the correct ID.

Collectives™ on Stack Overflow

jQuery UI Dialog pass on variables

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related