Question

我希望通过在页面中放置许多div来制作类似jQuery-Mobile的应用程序。所以，当我想展示一个特定的＆＃34;屏幕＆＃34;然后我隐藏了所有内容，之后我显示了相应的div。现在我想将特定innerHtml的{{1}}设置为div：所以有一个提交按钮的按钮;但它不是一个真正的按钮，而是带有form＆＃34;按钮的div＆＃34;所以它看起来像class。现在，在我的页面中，我在点击伪＆＃34;提交按钮＆＃34;时手动编写了表单提交。直到现在所有关于必填字段的一切都还可以！我的问题是当每个必填字段都填满后我想执行一个ajax而不是提交表单，因为我希望屏幕保持在同一个屏幕上。以下是我的尝试：

button

表格代码：

{% include "header.phtml" %}

<div id="choix_type_reservation" class="tile-area padding10">
    <div class="tile-container">
        <div id="choix_salles" class="tile-large bg-crimson fg-white">
            <div class="tile-content">
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                    <div class="tile-label header fg-black">Salles</div>
                </div>
            </div>
        </div>
        <div id="choix_tables" class="tile-large bg-darkPink fg-white">
            <div class="tile-content">
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>table.png"/></div>
                    <div class="tile-label header fg-black">Tables</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="liste_salles" class="tile-area padding10">
    <div style="font-size:20px;"><a href="#" data-role="icon-retour"><span class="mif-arrow-left icon"></span></a></div><br />
    <div class="tile-container">
        <div class="header fg-white">Salles</div>
        <?php
        $t_salle = new Salle();
        $salles = $t_salle->lireParCritere([]);
        foreach ($salles as $salle) {
        ?>
        <div id="salle_<?php echo $salle->salle_code; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square bg-crimson fg-white">
            <div class="tile-content">
                <div class="image-container">
                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                    <div class="tile-label header fg-cyan"><b><?php echo $salle->salle_lib; ?></b></div>
                </div>
            </div>
        </div>
        <?php
        }
        ?>
    </div>
</div>

<div id="liste_tables" class="grid condensed">
    <div style="font-size:20px;"><a href="#" data-role="icon-retour"><span class="mif-arrow-left icon"></span></a></div><br />
    <div class="row cells4">
        <div class="cell"><span class="header">Salle</span></div>
        <div class="cell colspan3"><span class="header">Tables</span></div>
    </div>
    <div class="row cells4">
        <div class="cell">
            <div class="grid condensed">
                <?php
                $t_salle = new Salle();
                $salles = $t_salle->lireParCritere([]);
                foreach ($salles as $key => $salle) {
                ?>
                <div class="row">
                    <div class="cell">
                        <div id="tile_salle_<?php echo $key; ?>" data-pk="<?php echo $salle->salle_code; ?>" class="tile-square fg-white">
                            <div class="tile-content">
                                <div class="image-container">
                                    <div class="frame"><img src="<?php echo HTTP_IMG ?>salle.jpg"/></div>
                                    <div class="tile-label header fg-cyan"><?php echo $salle->salle_lib; ?></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <?php } ?>
            </div>
        </div>
        <div class="cell colspan3">
            <div id="tables"></div>
        </div>
    </div>
</div>

<div id="liste_reservations_salle" class="tile-area padding10"></div>

<div id="frmReservationSalle"></div> // this is the div which will contain the form

<script type="text/javascript" charset="utf-8" language="javascript">

    var previous_screen = [];

    function listerTables(salle_code) {

        var donne = "salle_code="+salle_code;

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxListerTablesDansSalle",
                async: false
             }).responseText;

        $('#tables').html(ret);
    }

    function listerReservationsSalle(salle_code) {

        var donne = "salle_code="+salle_code;

        var salle_lib = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGetSalleLib",
                async: false
             }).responseText;
        salle_lib = $.trim(salle_lib);

        donne += "&titre=Réservations pour la salle \""+salle_lib+"\"";

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxGenerateListReservationSalle",
                async: false
             }).responseText;

        $('#liste_reservations_salle').show();
        $('#liste_reservations_salle').html(ret);

    }

    function afficherFrmReservationSalle(salle_code, mode) { // this will show the form

        var donne = "salle_code="+salle_code;

        var salle_lib = $.ajax({
                            data: donne,
                            type: "POST",
                            url:  "RestaurantReservation/ajaxGetSalleLib",
                            async: false
                         }).responseText;
        salle_lib = $.trim(salle_lib);

        if (mode == "ajout") {
            donne += "&titre=Ajout réservation de la salle \""+salle_lib+"\"";
        } else {
            donne += "&titre=Modification réservation de la salle \""+salle_lib+"\"";
        }

        donne += "&mode="+mode+"&action=RestaurantReservation/reserverSalleExec";

        var ret = $.ajax({
                data: donne,
                type: "POST",
                url:  "RestaurantReservation/ajaxFrmReservationSalle",
                async: false
             }).responseText;

        $('#frmReservationSalle').show();
        $('#frmReservationSalle').html(ret); // the div contains the form now
    }

    $(document).ready(function() {

        $("#cell-content > div").hide(); // hide everything first ( content-page )

        $("#choix_type_reservation").show();

        /**
        *
        *    CHOICE OF RESERVATION
        *
        **/
        $("#choix_type_reservation").on("click", "div[id='choix_salles']", function(){
            previous_screen.push("#choix_type_reservation");
            $("#cell-content > div").hide();
            $("#liste_salles").show();
        });
        $("#choix_type_reservation").on("click", "div[id='choix_tables']", function(){
            previous_screen.push("#choix_type_reservation");
            $("#cell-content > div").hide();
            $("#liste_tables").show();
            $("#tile_salle_0").css("outline","#999999 solid 3px"); // "sélectionner" la première salle
            listerTables($("#tile_salle_0").attr("data-pk")); // lister les tables de la première salle
        });

        /**
        *
        *    LIST TABLES OF A ROOM
        *
        **/
        $("#liste_tables").on("click", "div[id^='tile_salle_']", function(){ // click a room to display its tables
            $("#tile_salle_0").css("outline","0");
            listerTables($(this).attr("data-pk"));
        });

        /**
        *
        *    LIST RESERVATIONS OF A ROOM
        *
        **/
        $("#liste_salles").on("click", "div[id^='salle_']", function() {
            $("#cell-content > div").hide();
            previous_screen.push("#liste_salles");
            listerReservationsSalle($(this).attr("data-pk"));
        });

        /**
        *
        *   BACK SCREEN MANAGEMENT
        *
        **/
        $("div").on("click", "a[data-role='icon-retour']", function(e){
            e.preventDefault();
            e.stopPropagation();
            $("#cell-content > div").hide();
            $(previous_screen.pop()).show();
        });
        $("div").on("click", "div[id='btn_retour']", function(e) { // back "pseudo-button" from form
            e.stopPropagation();
            $("#cell-content > div").hide();
            $(previous_screen.pop()).show();
        });

        /**
        *
        *   opening the form
        *
        **/
        $("div").on("click", "a[data-role='icon-add']", function(e){
            e.preventDefault();
            e.stopPropagation();
            $("#cell-content > div").hide();
            if ($(this).attr("data-target") == "formReservationSalle") {
                previous_screen.push("#liste_reservations_salle");
                afficherFrmReservationSalle($(this).attr("data-pk"), "ajout");
            } else {
                ...
            }
        });

        /**
        *
        *   validating form
        *
        **/
        $("div").on("click", "div[id='btn_ok']", function(e) { // pseudo-button in the form
            e.stopPropagation();
            $("form").submit(); // it is OK : form is not submitted if there are unfilled mandatory fields
        });

    });
</script>
{% include "footer.phtml" %}

那么如何知道在这种情况下提交成功了？

Answer 1

您可以使用jQuery submit回调。如果像你说的那样，必须正确检查必填字段，但问题是当所有数据都有效时表单本身就会被提交，你可以这样做：

$("#formulaireReservationSalle").submit(function(event) {
     event.preventDefault();
     if(formIsValid()) {
          //AJAX Call.
     }
});

function formIsValid() {
     //Your validation code here.
     //Return true if all information is valid.
}

如何知道表单提交在这种情况下没有遇到错误？

1 个答案: