Question

I’ve created a modal popup using jQuery (while following this tutorial). It works well, except for when I attempt to include an HTML “form” tag within it.

Here is the jQuery followed by the html:

        //SETTING UP OUR POPUP
        //0 means disabled; 1 means enabled;
        var popupStatus = 0;

        //loading popup with jQuery magic!
        function loadPopup(){
            //loads popup only if it is disabled
            if(popupStatus==0){
                $("#backgroundPopup").css({
                    "opacity": "0.7"
                });
                $("#backgroundPopup").fadeIn("slow");
                $("#popupContact").fadeIn("slow");
                popupStatus = 1;
            }
        }

        //disabling popup with jQuery magic!
        function disablePopup(){
            //disables popup only if it is enabled
            if(popupStatus==1){
                $("#backgroundPopup").fadeOut("slow");
                $("#popupContact").fadeOut("slow");
                popupStatus = 0;
            }
        }

        //centering popup
        function centerPopup(){
            //request data for centering
            var windowWidth = document.documentElement.clientWidth;
            var windowHeight = document.documentElement.clientHeight;
            var popupHeight = $("#popupContact").height();
            var popupWidth = $("#popupContact").width();
            //centering
            $("#popupContact").css({
                "position": "absolute",
                "top": windowHeight/2-popupHeight/2,
                "left": windowWidth/2-popupWidth/2
            });
            //only need force for IE6

            $("#backgroundPopup").css({
                "height": windowHeight
            });

        }


        //CONTROLLING EVENTS IN jQuery
        $(document).ready(function(){

            //LOADING POPUP
            //Click the button event!
            $("#1_1").click(function(){
                //centering with css
                centerPopup();
                //load popup
                loadPopup();
            });

            //CLOSING POPUP
            //Click the x event!
            $("#popupContactClose").click(function(){
                disablePopup();
            });
            //Click out event!
            $("#backgroundPopup").click(function(){
                disablePopup();
            });
            //Press Escape event!
            $(document).keypress(function(e){
                if(e.keyCode==27 && popupStatus==1){
                    disablePopup();
                }
            });

        });

And here is my HTML:

                <div id="popupContact">
    <a id="popupContactClose">x</a>
    <h1>Request</h1>
    <div id="details">
    <form>
        <div id="whom">
            <p > Select the other party: </p>
            <button id="FB">Facebook List</button>
            <div class="FB_friends" style="display:none;">
                  <div style="width: 200px; height: 100px; overflow-x: hidden;        
 overflow-y: scroll; border: 0; background-color: #FFFFFF; color: #3399FF;">
    <table>    
        <?php 
        $friends = array("John Jay" => "527942618", "Fredie Kruger"=>    
 "1116001013", "Jackie Chan"=>"1112", "Sammy Sosa"=>"2345", "Your Fanny"=>"911", "Suky 
 Sukie"=>"1938");
 foreach($friends as $name => $id) {
 echo "<tr><td style=\"align:center\"><img 
 src=\"http://graph.facebook.com/$id/picture\"  /></td><td>$name</td><td>
 <input type=\"radio\" name=\"selected\" value=\"\" /></td></tr>";
 } ?>
 </table>
            </div>
        </div>
    </div>
    </form>
</div>
<div id="backgroundPopup"></div> 

Any ideas and help would be greatly appreciated. Everything makes sense to me and it seems like this should work, so I am not quite sure what’s going on. Thank you in advance!

Answer 1

I had a similar issue. there is a search button in my Modal popup window, the search text is inside a form tag. when clicking on the search button, an Ajax call will return the search results and display the results in the popup.

when putting the search button outside the form tag, it works fine; when putting it inside the form tag, the popup will automatically close itself after clicking search button.

Here is my solution, add this line: event.preventDefault();

        $("#btn_Search").live('click', function (event) {

            event.preventDefault();

            $.ajax({
                url: '/some-controller/some-action',
                type: 'post',
                data: $("#frmSearchParameters").serialize(),
                success: function (result) {
                    $('#divSearchResults').html(result);
                }
            });
        });

Hope this helps.