codeigniter - how to display a popup form in a div tag using jquery

Question

I'd like have a button on my page that display a form (in a div) which includes text box and two buttons.
I'm not too familiar yet with jquery but I did do some reading and have tried to base my code on an example found here at: http://jqueryui.com/demos/dialog/#modal-form

I have a button that looks like:

 <input type='button' class='btn btn-info' value='Change VLAN' id='changevlan'/>

and a div that contains the details of the pop form that I want:

 <div id="dialog-form" title="Change Vlan">
<p>You must supply a new vlan number</p>

<form>
<fieldset>
    <label for="vlan">Vlan Number:</label>
    <input type="text" name="vlan" id="vlan" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
 </div>

And then at the bottom of my page, i have included the jquery and jquery ui libraries (I loaded at bottom for faster page loading) and I have the following javascript: (I based it off the example i mentioned at the beginning of this post.)

<script type="text/javascript">
$(function() {
    // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
    $( "#dialog:ui-dialog" ).dialog( "destroy" );

    var vlan = $( "#vlan" ),
      tips = $( ".validateTips" );

    function updateTips( t ) {
        tips
            .text( t )
            .addClass( "ui-state-highlight" );
        setTimeout(function() {
            tips.removeClass( "ui-state-highlight", 1500 );
        }, 500 );
    }

    function checkLength( o, n, min, max ) {
        if ( o.val().length > max || o.val().length < min ) {
            o.addClass( "ui-state-error" );
            updateTips( "Length of " + n + " must be between " +
                min + " and " + max + "." );
            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;
        }
    }

    $( "#dialog-form" ).dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Change Vlan": function() {
                var bValid = true;
                allFields.removeClass( "ui-state-error" );

                bValid = bValid && checkLength( vlan, "vlan", 1, 1 );
                bValid = bValid && checkRegexp( vlan, /^([0-9])+$/i, "vlan must be numeric." );

                if ( bValid ) {
                    //this is where I need to redirect to another URL passing the vlan number.
                    $( this ).dialog( "close" );
                }
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            allFields.val( "" ).removeClass( "ui-state-error" );
        }
    });

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });
});
</script>

As you can see I inserted an alert statement to ensure that i was getting into the javascript. But I don't get the alert message. And the contents of the div form just show up on the main page when it's initially rendered.

What I've checked so far:

I've tried to double check that the name of my button that should trigger the div form display matches the name of the variable i'm looking for in the javascript function:

    $( "#changevlan" )
        .button()
        .click(function() {
        alert('in here');
            $( "#dialog-form" ).dialog( "open" );
        });

I've also made sure that my div form is called #dialog-form

But I'm not too sure what else to try. If you ahve any suggestions, I'd appreciate it. I also need to know how to access the contents of the text box and then redirect the user to a new controller and method, passing the vlan number as a parameter. Maybe I can just do a window.location type of thing...

Thanks.

Answer 1

u dont need more libraries, just make a simple jQueryUI .dialog, inside the "div" element for the dialog place some inline php from CI, something like <div id="dlgPopUpForm"><?= $this->load->view('dialogView.php'); ?></div>, then build your form in the dialogView.php of course.

At run time, the php wil be read into the div and the jquery options u use to create the dialog will handle the rest. something like $("#dlgPopUpForm").dialog({ autoOpen: false, modal: true }); $("#someButton").click(function(e){ $("#dlgPopUpForm").dialog("open"); });

dont forget to include your javascript for the form on the form view page (dialogView.php in my example)

maybe when i'm not so lazy, i'll make ya an example later today, though, its pretty straight forward