codeigniter - so zeigen Sie ein popup-Formular in ein div-tag mit jquery

Ich würde gerne eine Taste auf meiner Seite, die ein Formular anzeigen (in einem div), die text-Feld und zwei buttons.

Ich bin nicht allzu vertraut noch mit jquery-aber ich habe einige Bücher zu Lesen und habe versucht auf Basis meines Codes auf ein Beispiel finden Sie hier unter: http://jqueryui.com/demos/dialog/#modal-form

Habe ich einen button, der sieht so aus:

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

sowie ein div-Element, das enthält die details des pop-form, die ich will:

 <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>

Und dann unten auf meiner Seite, ich habe die jquery und jquery ui-Bibliotheken (ich lud Sie unten für eine schnellere laden der Seite) und ich habe Folgendes javascript: (I basiert es aus dem Beispiel, das ich erwähnte am Anfang von diesem 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>

Wie Sie sehen können, steckte ich eine alert-Anweisung, um sicherzustellen, dass ich war immer in der javascript. Aber ich bekomme nicht diese Meldung. Und der Inhalt des div-form nur zeigen, bis auf der Hauptseite, wenn es zunächst gerendert.

Was ich geprüft habe so weit:

Ich habe versucht, zu überprüfen, dass der name my-Taste für das auslösen der div-form-display passt der name der Variablen, die ich in der javascript-Funktion:

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

Habe ich auch darauf geachtet, dass mein div-form wird " #dialog-form

Aber ich bin mir nicht sicher, was anderes zu versuchen. Wenn Sie haben irgendwelche Vorschläge, ich würde es zu schätzen wissen. Ich muss auch wissen, wie man den Zugang zu den Inhalten der text-box und dann leiten Sie den Benutzer auf eine neue Steuerung und-Methode auf, wobei die vlan-Nummer als parameter.
Vielleicht kann ich dann einfach ein Fenster.Lage Art der Sache...

Dank.

  • Prüfen mit jQueryTools Overlays -
  • Ich werde versuchen zu überprüfen, die web-Entwickler-tools in firefox / F12 im IE, wenn ich wieder ins Büro... aber in der Zwischenzeit, wenn Sie sehen, was offensichtlich ist, bin ich alle Ohren. danke.
  • Verwenden colorbox statt. jacklmoore.com/colorbox
InformationsquelleAutor dot | 2012-08-22
Schreibe einen Kommentar