Once "btnAddSession" button is clicked,  the div with the
"addproductsForm" ID should open as a modal dialog box.  In Firefox it
opens properly while in IE it submits the page even with return false;

HTML
---------------------------------------
<h3>Products</h3>

<!-- Placeholder for ajax results -->
<div id="mainproducts"></div>

<input type="submit" name="btnAddSession" value="Add Session"
id="btnAddSession" />


<!-- Placeholder for the insert form -->
<div id="addproductsForm" class="insertForm">
        <ul>
                <li>
                        <label>Product Name:</label>
                        <input name="txtProductName" type="text" 
id="txtProductName" /
>
                </li>
                <li>
                        <label>Product Price:</label>
                        <input name="txtProductPrice" type="text" 
id="txtProductPrice" /
>
                </li>
                <li>
                        <label>&nbsp;</label>
                        <input type="button" name="btnAddProduct" value="Add 
Product"
id="btnAddProduct"/>
                </li>
        </ul>
</div>


Javascript
---------------------------------------------
$(function(){
        /* Modal Dialog Box Configuration */
        $("#addproductsForm").dialog({
                bgiframe: true,
                autoOpen: false,
                modal: true,
                overlay: {
                        "background-color": "#000",
                        "opacity": "0.5",
                        "-moz-opacity": "0.5"
                },
                position: "center",
                dialogClass: "insertForm",
                closeable: false
        });

        $("#btnAddSession").click(function(event){
                $("#addproductsForm").dialog("open");
                //event.preventDefault();
                return false;
        });
});

Reply via email to