Question

All,
I’m trying to send an email with the jQuery dialog modal window. I can get the window to populate correctly and everything like that however I’m trying to populate some email addresses when I open the dialog window. Here is the jQuery to open the dialog window:

$( "#dialog-form" ).dialog({
    autoOpen: false,
    height: 600,
    width: 750,
    modal: true,
    show: 'slide',
    buttons: {
        "Send Email": function() {
                var message_to_send = $( "#message_to_vendors" ).val();
                alert(message_to_send);
                var vendor_ids = $("#email_vendor_ids").val();
                alert(vendor_ids);
                $.post("send_vendor_emails.php", { email_vendor_ids: vendor_ids, message_to_vendors: message_to_send }, function(data) {
                    alert("The data is: "+data);
                    if(data=="yes"){
                        $("#dialog-form").dialog( "close" );
                    }
               });

        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    },
    close: function() {
        allFields.val( "" ).removeClass( "ui-state-error" );
    }
});

Then here is my dialog form:

<div id="dialog-form" title="Email Vendors">
<form>
<select data-placeholder="Vendors to Email" style="width:350px;" multiple class="chzn-select">
<div id="email_options">
<option selected>Email Address 1</option>
<option selected>Email Address 2</option>
</div>
</select>
</form>
</div>

I’m storing some email addresses in session variables and what I’d like to happen is when I click the dialog box to open it up that I can populate the email addresses in the Session variables. How can I do that with the dialog box?

Thanks for any help in advance!

Answer 1

Sounds like you just need to print out the emails from your session into the markup for your dialog box. You’re wanting to add them as options for the select element, right?

<div id="dialog-form" title="Email Vendors">
<form>
<div id="email_options">
<select data-placeholder="Vendors to Email" style="width:350px;" multiple class="chzn-select">

<?php foreach ( $_SESSION['emails'] as $e ): ?>
    <option><?php echo $e; ?></option>
<?php endforeach; ?>
</select>
</div>
</form>
</div>

Assuming the emails are stored as array in $_SESSION['emails']. I also moved your email_options div outside of the select for the sake of valid XHTML.

Update

Since you clarified that users are able to add emails to the session on the fly after the page is loaded, when you add emails to the session you should use some JavaScript to keep your session and the dialog box synchronized. Something like this:

/* Where ever you update the session with more emails, also do this
Note, this is using the modified markup from my above example 
(select is child of #email_optons) */

var new_email = '';  // Set this to the value of the email which is being added to the session

$('#email_options select').append( $('<option>' + new_email + '</option>' ) );