jQueryUI Dialog with modal form

jQueryUI Dialog with modal form

Hello all,

I am making a page that allows users of a site to send messages to one another. The page allows you to search for a member based on a few criteria, one of which being a name. When the user does the search all the matches will be displayed along with a click able link to send a message. I intend for the message to be in the form of a jqueryUI dialog modal form. The search results are loaded using AJAX and the .html() method. The page structure is like this:

  1.     <form id = "search_form">
            <fieldset>
                <legend>Search Terms </legend>
                <p>
                    <label for = "name">Name : </label><input type = "text" name = "name" id = "name" />
                </p>
            </fieldset>
            <p>
                <input type = "submit" value = "Search" id = "submit"/>
            </p>
        </form>









  2.       <form id = "modal_dialog">
  3.             //form fields in here
  4.       </fom>
  5.     <div id = "search_results">
        </div>
I fill the search_results div by posting to another page:
  1.         $("#submit").click(function(){
           
                var data = $("#search_form").serialize();
               
                $.post('search_proccess.php',data,function(data){
               
                    $("#search_results").html(data);
                   
                });
               
                return false;
            });










And of course I make the modal_dialog form jqueryUI dialog component:
  1.         $("#modal_dialog").dialog({
                autoOpen: false,
                buttons: {
               
                    Cancel: function() {
                        $(this).dialog('close');
                    }
       
                },
                title: "Send Message"
            });









Now in the file that is posted to when the search button is clicked I assign a function to open the dialog on each of the send message buttons. Again, these are created and loaded via AJAX using .html(), they are created from the search_proccess.php page that is posted to when the search button is pushed.

  1.         $(".send_message").click(function(){
               
               
                $("#modal_dialog").dialog('open');
               
            });    




I need to send some information to the #model_dialog about which link was being clicked. The .send_message buttons do have an id that I can use for that and I was thinking about doing something like
  1.         $(".send_message").click(function(){
               
                $("#modal_dialog").data("id",$(this).attr("id)).
                $("#modal_dialog").dialog('open');
               
            });    




I would like to dynamically change a few things when the dialog first opens, they would be based on which one of the links were clicked. E.g - "Send a message to " and the name of the person.

Could anyone tell me if this is a viable way of doing things? Could anyone suggest a better way to achieve this? Any help or advice is very much appreciated. Thanks much!


Jstall