weixin_33736649 2016-02-28 01:17 采纳率: 0%
浏览 34

Javascript AJAX POST回应

I hope everything is good with you!

I have a problem that I can't solve really. I have the following script, and it works on a "blank" page with bootstrap:

index.php

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Test</title>
    <link rel="stylesheet" href="css/jquery.modal.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->


    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript" src="js/jquery.modal.js"></script>
    <script src="js/jquery-1.7.1.js"></script>
    <script src="js/jquery.form.min.js"></script>
    <script src="js/jquery.reveal.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {

        var options = {
            url: "include/form_process.php", // where to submit form to
            type: "post", // submit method
            dateType: "html", // returned dataType
            success: showResponse // function to call on successful form submittion
        };

        // bind form using 'ajaxForm' 
        $('#createForm').ajaxForm(options);


    });

    function showResponse(responseText) {
        console.log('success');
        $('#main-wrapper').prepend(responseText); // prepend the modal to #wrapper dib
        //$('#mailSetupForm')[0].reset();

        // display modal
        $('#modal').reveal({ // The item which will be opened with reveal
            animation: 'fade', // fade, fadeAndPop, none
            animationspeed: 600, // how fast animtions are
            closeonbackgroundclick: false, // if you click background will modal close?
            //dismissmodalclass: 'close' // the class of a button or element that will close an open modal
            dismissmodalclass: 'modal-btn' // the class of a button or element that will close an open modal
        });

    }
    </script>   

</head>
<body>
    <div class="col-sm-6 col-sm-offset-2" style="margin-left: 0%;">
        <div id="main-wrapper" class="subpage">
            <div class="container">
                <div class="row">
                    <div class="12u skel-cell-important">

                        <!-- Content -->

                            <article class="first last">

                                <h1>Test</h1>

                                <p>

                                <form action="" method="POST" id="createForm">
                                <!-- NAME -->
                                <div id="name-group" class="form-group">
                                    <label for="name">First input</label>
                                    <input type="text" class="form-control" name="input1" placeholder="First input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>

                                <!-- EMAIL -->
                                <div id="email-group" class="form-group">
                                    <label for="email">Second input</label>
                                    <input type="text" class="form-control" name="input2" placeholder="Second input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>

                                <!-- SUPERHERO ALIAS -->
                                <div id="superhero-group" class="form-group">
                                    <label for="superheroAlias">Third input</label>
                                    <input type="text" class="form-control" name="input3" placeholder="Third input" style="width: 400px; max-width: 100%">
                                    <!-- errors will go here -->
                                </div>
                                <br>
                                <button type="submit" class="btn btn-success">DO <span class="fa fa-arrow-right"></span></button>
                                </form>

                                </p>

                            </article>                          

                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

form_process.php

<?php
$clientLimit = 10;
//$chanNameMin = 4;

if (!$_POST['input1']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    Input1 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif (!$_POST['input2']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    input2 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif (!$_POST['input3']) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    input3 not entered
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;

    }elseif ($_POST['input3'] > $clientLimit) 
            { 
            echo <<<HTML
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-error modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>Error!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    Max input3 is 10
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-red" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>
HTML;
            }else{

?>
<div id="modal">
    <div style="position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 1050; overflow: auto;" id="modal-window">
        <div style="top: 50%; margin-top: -121.5px; margin-left: -280px; position: absolute; left: 50%;" class="modal-box modal-type-success modal-size-normal">
            <div class="modal-inner">
                <div class="modal-title">
                    <h3>IT WORKS!</h3>
                    <a class="modal-close-btn"></a>
                </div>
                <div class="modal-text">
                    The form is submitted. YEY
                </div>
                <div class="modal-buttons">
                    <a class="modal-btn btn-light-green" id="close">Close</a>
                </div>
            </div>
        </div>
    </div>
</div>

<?php
            }
?>

I've been using this script before with JQuery 1.7.1 and jq171 = jQuery.noConflict( true ); , but after I used bootstrap and JQuery 2.0.3 I didn't need the noConflict anymore.

Now to my problem... I have downloaded a test Admin Template, which is using Bootstrap v3.3.6 and jQuery v1.11.1. After this, the script does not work anymore. The page refresh, which it shouldn't do, and the modal does not show up..

Can someone tell me what's wrong? My head just spins right now. Can't find a solution...

UPDATE: I made a new script, so this case is closed!

  • 写回答

1条回答 默认 最新

  • weixin_33698823 2016-02-28 23:02
    关注

    Here is the new script. Changed Submit method and the method to show the response from "cform_Process.php". Now I get the response as I want :)

    $(document).ready(function () {
    
        var options = {
            url: "intCall/cform_Process.php", // File to submit the form to
            type: "GET", // Submit method. POST or GET
            dateType: "html", // How to return data. JSON, HTML or TEXT
            success: showResponse // Function to call on successful form submittion
        };
    
        // Bind to form ID using 'ajaxForm' 
        $('#createForm').ajaxForm(options);
    
    
    });
    
    function showResponse(responseText) {
        console.log('success');
        $('#main-wrapper').find('.CrForm_result').html(response);
    }
    
    评论

报告相同问题?

悬赏问题

  • ¥15 关于vmprotect3.8.4虚拟文件一项
  • ¥15 在不用IT调试的情况下怎样能连外网
  • ¥20 C#调用虚拟键盘TabTip.exe
  • ¥15 Qt4代码实现下面的界面
  • ¥15 CCS离散化传递函数与仿真不一致
  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法
  • ¥20 while循环中OLED显示中断中的数据不正确
  • ¥15 这个视频里的stm32f4代码是怎么写的
  • ¥15 JNA调用DLL报堆栈溢出错误(0xC00000FD)