在Jquery移动pageinit中的页面转换后没有绑定

时间:2014-03-17 18:16:11

标签: jquery jquery-mobile transition jquery-mobile-ajax

我正在尝试一个jquery移动应用程序,我需要首先使用数据ajax和页面转换来调用第二个html页面。但是我的pageinit / pagecreate / pageshow中的任何一个都没有被调用。我知道有很多问题,他们已经提到使用bind / live / on等等。但它们都没有奏效。任何人都可以帮忙......感谢

第1页的COED -

<!DOCTYPE HTML>
<html>
<head>
    <title>Landing</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js">
    </script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="jquery.validate.js"></script>
</head>
<body>
<div data-role="page" id="formLandingNavigator">
    <div data-role="header" data-id="HeaderLanding" data-theme="b" data-position="fixed">
        <h1>Select Option</h1>
    </div>
    <div class="ui-grid-a" id="divLandingIcons">
        <div class="ui-block-a" style="text-align: center;margin-top: 10%;">
            <a href="CreateLead.html"  data-transition="flip">
                <img src="Resource/Images/CreateLeadIcon.png">
            </a>
        </div>
        <div class="ui-block-b" style="text-align: center;margin-top: 10%;">
            <a href="CreateLead.html" data-transition="flip">
                <img src="Resource/Images/QuoteIcon.png">
            </a>
        </div>
    </div>
    <div data-role="footer" data-id="FooterLanding" data-position="fixed" data-theme="b"> 
        <h4>Thank you for using Quote Management</h4> 
    </div> 
</div>
</body>
</html>

第2页 - 我包含整页,因为错误可能在任何地方 -

<!DOCTYPE HTML>
<html>
<head>
    <style>
        .globalMessage{color:green;font-weight:bold;font-style:italic}
    </style>
    <title>PhoneGap</title>
    <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js">
    </script>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script type="text/javascript">
        $.support.cors = true;
        //$(document).on("pageshow", "#formCreateLead", function(){
        $(document).bind('pageinit', function(event) {
        //$( '#formCreateLead' ).on( 'pageshow',function(event){
            alert('hi');
        //apply overrides here
        $("#formCreateLead").validate({
            errorPlacement: function(error, element) {
                error.css({ 'color': 'red', 'font-size': '0.80em' });     
                error.addClass("error")
                error.insertAfter(element);
            },
            rules: {
                // simple rule, converted to {required:true}
                inputTextLastName: "required",
                inputTextCompany: "required",
                inputMobile: {
                    number: true
                }
            },
            messages: {
                inputTextLastName: "Please specify last name",
                inputTextCompany: "Please enter company name",
                inputMobile: "Please enter valid mobile number"
            }
        });

        $("#buttonCreateLead").click(function(){
            $("#divMessageGlobal").html("");
            if ($("#formCreateLead").valid()) {
                $.mobile.loading( 'show', {
                    text: 'loading..',
                    textVisible: true,
                    theme: 'z',
                    html: ""
                });
                createLead();
            }
            return false;
        });
    });
    function createLead(){
        var jsFirstName = $("#inputTextFirstName").val();
        var jsLastName = $("#inputTextLastName").val();
        var jsCompany = $("#inputTextCompany").val();

        var jqxhr = $.ajax({
                crossDomain: true,
                type:"POST",
                contentType: "application/json;charset=UTF-8",
                dataType: "text",
                async: false,
                crossDomain: true,
                url: "https://quote-mgmt-dev1-developer-edition.na15.force.com/quotemgmt/RestService?core.apexpages.devmode.url=1&type=createLead&leadFName=" + jsFirstName + "&leadLName=" + jsLastName + "&leadCompany=" + jsCompany,
        })
        .done(function(data) {
            var jsonLeadId = JSON.parse(data);
            clearForm();
            $("#divMessageGlobal").html("Lead successfully created in Salesforce");
        })
        .fail(function( jqXHR, textStatus, errorThrown) {
            alert( "error" + textStatus + errorThrown);
        })
        .always(function() {
            //alert( "complete" );
            $.mobile.loading( 'hide' );
        });
    }

    function clearForm() {
        $(":input").val("");
    }
    </script>
</head>
 <body>
    <div data-role="page" id="formCreateLead">

        <div data-role="header" data-id="HeaderCreateLead" data-theme="b" data-position="fixed">
            <h1>Create Lead</h1>
        </div>
        <div class="ui-grid-a" id="divInputFormLead">
            <span class="globalMessage" id="divMessageGlobal"></span>
            <input type="text" name="inputTextFirstName" data-mini="true" id="inputTextFirstName" value="" placeholder="Enter first name" />
            <input type="text" name="inputTextLastName" data-mini="true" id="inputTextLastName" value="" placeholder="Enter last name (required)" />
            <input type="text" data-mini="true" id="inputTextCompany" name="inputTextCompany" value="" placeholder="Enter company (required)" />
            <input type="number" name="inputMobile" data-mini="true" id="inputMobile" value="" placeholder="Enter mobile number" />
            <input type="email" data-mini="true" id="inputEmail" name="inputEmail" value="" placeholder="Enter email address" />
            <div class="ui-block-a">
                <a href="">
                    <button id="buttonCreateLead" type="submit" data-theme="b">Create Lead</button>
                </a>
            </div>
            <div class="ui-block-b">
                <a href="index.html" data-transition="flip">
                    <button id="spanCancel" data-theme="b">Cancel</button>
                </a>
            </div>
        </div>
        <div data-role="footer" data-id="FooterCreateLead" data-position="fixed" data-theme="b"> 
            <h4>Thank you for using Quote Management</h4> 
        </div> 
    </div>
 </body>
</html>

0 个答案:

没有答案