UI Dialog Initiated wrong? Buttons not respoding anymore, after reload

Hello,

I'm creating a vote tool where i use UI dialog. I have a problem with the UI DIALOG, when i re-initiate the dialog when i request an other vote-category. The dialog will not respond when i re-initiate it.

I will try to explain the story, but this is not so important. The scripts below maybe looks a little bit complex, but finaly it's a simple structure.

A user can select a category (cars or bikes) and dynamically the category content will get loaded in a 'content' div. ('test.dialog.cars.php' or 'test.dialog.bikes.php' will get loaded). Each category list includes multiple buttons. Each button will open the same dialog, only the ui-dialog content will change, depending of the vote-button the user will click on (in this example the dialog content will be always the same, see 'test.dialog.voteform.php'). When i first choose 'Cars' and click on a vote botton, the dialog will load. When i fill in my email and pres 'Vote' the thanks-page will get loaded (test.dialog.thanks.php). So far so good. When i next press on the link 'Bikes' i will get an other category 'Bikes'. When i now press on the button, the dialog will showed again, including the correct data, but when i press now on the 'Vote now' button, the script does nothing (no validating the e-mail adres or submitting the form).

I have searched for hours to find this problem, but i can not find the fault. I think this is a 'bigger' problem, maybe the dialog is initiated multiple times, when i request an other category.

Hopefully you can spend some minutes to check where i make the mistake (i'm still a newbie :-)

So far, thanks!

test.dialog.index.html

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
    <link class="jsbin" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"></link>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"&gt;&lt;/script&gt;
    <script language="JavaScript">

        jQuery(document).ready(function() {

            // LINKS FOR LOADING CONTENT in class='content' div
            $("#cars").live('click', function() {
                $('.content').load('test.dialog.cars.php', function() { $(this).returningFunction(); } ); // LOAD CARS overview and function 'returningFunction'
            });

            $("#bikes").live('click', function() {
                $('.content').load('test.dialog.bikes.php', function() { $(this).returningFunction(); } ); // LOAD BIKES overview and function 'returningFunction'
            });

            // FUNCTION: - Function to call all jQueries when vote page(s) get loaded
            $.fn.returningFunction=function(options) {
                $('#votediv').hide(); // hide the empty vote div
                $("button").click(function() {
                    $(this).VoteDialog();
                });

                // ... more definitions
            }

            $.fn.VoteDialog=function(){ // Define INfo for Dialog + Dialag
                var voteid = $(this).attr('id'); // get button id = vote-id
                $('#votediv').empty(); // make vote div empty if contains content..

                var DefineVoteDialog = $("#votediv").dialog({
                    bgiframe: true, autoOpen: false, width: 400, modal: true, title: 'Vote now', resizable: false,  autoResize: true,

                    close: function() {
                        //$(this).dialog('close'); // to re-open => dialog('show');
                        $(this).dialog('destroy'); // by destroying is, it can be re-initialized again and reopened again. Right?
                    },

                    buttons: {
                        'Vote now!': function() {
                            var vote_email=$("#vote_email");
                            var allFields=$([]).add(vote_email); // .add(name).add(city) etc.
                            var bValid = true;
                            bValid = bValid && checkLength(vote_email,"Wrong email, use at least 6 chars",6,50);
                            // From jquery.validate.js (by joern), contributed by Scott Gonzalez: http://projects.scottsplayground.com/email_address_validation/
                            bValid = bValid && checkRegexp(vote_email,/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i,"Wrong email , example: [email protected]");                   
                            if (bValid) {

                                // DELETE BUTTONS
                                $('#votediv').dialog('removebutton', 'Vote now!');
                                $('#votediv').dialog('removebutton', 'Cancel');

                                // ADD BUTTON
                                $('#votediv').dialog('addbutton', 'Close', 
                                    function() { 
                                        // CLOSE DIALOG & DESTROY dialog
                                        $('#votediv').dialog('close');
                                        $('#votediv').dialog('destroy');
                                    }
                                ); 

                                // POST FORM, THIS IS WORKING FINE
                                $.post("test.dialog.thanks.php", { email : vote_email.val(), voteid : voteid },
                                    function(data){ 
                                        $('#votediv').html(data); // show loaded data
                                        $('#votediv').dialog({title: 'Thanks for your vote!'});
                                    }
                                );
                            }
                        },
                        'Cancel': function() {
                            $(this).dialog('close');
                        }
                    },
                });  // End define button

                // load dialog data + open dialog
                DefineVoteDialog.load("test.dialog.voteform.php", { 'voteid': voteid }, function() { // callback after load
                    $("#vote_email").focus(); // FOCUS ON INPUT FIELD
                })
                .dialog('open'); // SHOW DIALOG
            }

            // FUNCTION TO ADD BUTTONS TO UI DIALOG 
            $.extend($.ui.dialog.prototype, {
                'addbutton': function(buttonName, func) {
                    var buttons = this.element.dialog('option', 'buttons');
                    buttons[buttonName] = func;
                    this.element.dialog('option', 'buttons', buttons);
                }
            });

            // FUNCTION TO REMOVE BUTTONS FROM UI DIALOG
            $.extend($.ui.dialog.prototype, {
                'removebutton': function(buttonName) {
                    var buttons = this.element.dialog('option', 'buttons');
                    delete buttons[buttonName];
                    this.element.dialog('option', 'buttons', buttons);
                }
            });

            // VALIDATION FUNCTION FOR CHECKING EMAIL
            function updateTips(t){
                //tips.text(t).effect("highlight",{},1500); // SEEMS TO CREATE AN ERROR..
                $("#validateTips").text(t).effect("highlight",{},1500);     
            }

            function checkLength(o,n,min,max){
                if(o.val().length>max||o.val().length<min) {
                    o.addClass('ui-state-error');
                    //alert('1234');
                    updateTips(n);

                    return false;
                } else {
                    return true;
                }
            }

            function checkRegexp(o,regexp,n) {
                if ( !( regexp.test( o.val() ) ) ) {
                    o.addClass('ui-state-error');
                    updateTips(n);
                    return false;
                } else {
                    return true;
                }
            }
        });

    </script>
</head>
<body>

    <div class="menu">
        <a href="#" id="cars">Show cars</a> | 
        <a href="#" id="bikes">Show bikes</a>
    </div>

    <div class="content"></div>

</body>
</html>

test.dialog.cars.php

<div>Vote category Cars<div>
<div><button id="1">Vote for car 1</button></div>
<div><button id="2">Vote for car 2</button></div>
<div id="votediv">Vote div</div>

test.dialog.bikes.php

<div>Vote category Bikes<div>
<div><button id="20">Vote for bike 1</button></div>
<div><button id="21">Vote for bike 2</button></div>
<div id="votediv">Vote div</div>

test.dialog.voteform.php

<form id="voteForm" name="voteForm" method="post">
    <div> 
        Vote for car (or bike) 1 (or 2) - depends on loaded form
    </div>
    <div>
        <input type="hidden" name="voteid" value="1" id="voteid">
        Email: <input type="text" name="vote_email" id="vote_email" value="" />
    </div>
    <div id="validateTips"></div>
</form>

test.dialog.thanks.php

Thanks for voting!

So far, thanks!

Test this scrip at here

ansaurus

tags:

views:

answers:

UI Dialog Initiated wrong? Buttons not respoding anymore, after reload

related questions