SO Help: Adding multiple parameters to jquery dialog on open

http://stackoverflow.com/questions/16671028/adding-multiple-parameters-to-jquery-dialog-on-open

by SpYk3

HTML

<!--    Strictly for Theme Changer (Nothing to do with Accordion)    -->
<div class="ui-widget ui-widget-content ui-corner-all" style="text-align: center;">
	<label for="selTheme" class="ui-widget-header ui-corner-all" style="padding: .1em .5em;">Select Theme</label>
	<select id="selTheme" name="selTheme" class="ui-widget-content ui-corner-all">
		<option value="base">base</option>
		<option value="black-tie">black-tie</option>
		<option value="blitzer">blitzer</option>
		<option value="cupertino">cupertino</option>
		<option value="dark-hive">dark-hive</option>
		<option value="dot-luv">dot-luv</option>
		<option value="eggplant">eggplant</option>
		<option value="excite-bike">excite-bike</option>
		<option value="flick">flick</option>
		<option value="hot-sneaks">hot-sneaks</option>
		<option value="humanity">humanity</option>
		<option value="le-frog">le-frog</option>
		<option value="mint-choc">mint-choc</option>
		<option value="overcast">overcast</option>
		<option value="pepper-grinder">pepper-grinder</option>
		<option value="redmond">redmond</option>
		<option value="smoothness">smoothness</option>
		<option value="south-street">south-street</option>
		<option value="start">start</option>
		<option value="sunny">sunny</option>
		<option value="swanky-purse">swanky-purse</option>
		<option value="trontastic">trontastic</option>
		<option value="ui-darkness">ui-darkness</option>
		<option value="ui-lightness">ui-lightness</option>
		<option value="vader">vader</option>
	</select>
</div>
<hr />
<!--    END Theme Changer (ACORDION HTML BELOW)     -->
<div id="dlg" data-inline="I was added in HTML" style="text-align: center;">
    <input id="attached" type="button" value="See Attached Data" />
    <input id="inline" type="button" value="See Inline Data" />
</div>
<button>OPEN DIALOG</button>

JavaScript

$(function() {
    //    Set the dialog to not open on load and clear all changes made when closed
    $("#dlg").dialog({
        autoOpen: false,
        modal: true,
        close: function(e) {
            $(this).children("input").nextAll("p").remove();
        }
    })    //    next i call for my first inner button which will show you how to get "attached" data
    .children("#attached").on("click", function(e) {
        var dlgData = $("#dlg").data("myData");
        $(this).after($("<p />").text(dlgData.data1 + " " + dlgData.data2));
    })    //    finally, the button that will get the string data that was added in the HTML
    .next("#inline").on("click", function(e) {
        var dlgData = $("#dlg").data("inline");
        $(this).after($("<p />").text(dlgData));
    });
    //    simply open our dialog
    $("button").on("click", function(e) { $("#dlg").data("myData", { data1: "Hello", data2: "world" }).dialog("open") });
});

/*    Strictly for Them Selector (Nothing to do with accordion)    */
$("select").change(function(e) {
	var thmURL = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/{theme}/jquery-ui.css".replace("{theme}", $(this).val()),
		thmLink = $("<link />", { id: "ui-theme-link", href: thmURL, rel: "stylesheet", type: "text/css" });
	$("head").append(thmLink);
	$("head .ui-theme-link").first().remove();
}).children("[value=base]").prop("selected", true).change();