jQueryMobile: проблема с регистрацией событий onload, onsubmit - PullRequest
Новая
       7

jQueryMobile: проблема с регистрацией событий onload, onsubmit

1 голос
/ 09 сентября 2011

Я использую библиотеку jquery.mobile-1.0b3. У меня есть home.html, contactus.html. Вот пример кода: (я не получаю оповещения в contactus.html) 

home.html
=========
    <!DOCTYPE html>
    <html>
        <head>
        <title>Home</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" /> 
        <script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script> 
        <script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script> 
    <!-- 
        <link rel="stylesheet" href="css/jquery.mobile-1.0a1.min.css" />
        <script src="js/jquery-1.4.3.min.js"></script>
        <script src="js/jquery.mobile-1.0a1.min.js"></script>

    -->
        <link href="css/main.css" rel="stylesheet" type="text/css" />

        <script>     
         // Global declarations - assignments made in $(document).ready() below
        var hdrMainvar          = null;
        var contentMainVar      = null;
        var ftrMainVar          = null;
        var contentTransitionVar= null;

        var nameLabelVar        = null;
        var emailLabelVar       = null;
        var subjectLabelVar     = null;
        var messageLabelVar     = null;
        var emailcopyLabelVar   = null;

        var messageVar          = null;

        var contactformVar = null;
        var confirmationVar = null;
        var contentDialogVar = null;
        var hdrConfirmationVar = null; 
        var contentConfirmationVar = null;
        var ftrConfirmationVar = null;
        var inputMapVar = null;

        // Constants
        var MISSING = "missing";
        var EMPTY = "";
        var NO_STATE = "ZZ";



        $(document).ready(function() {
        // Assign global variables
          //hdrMainVar = $('#hdrMain');
          alert("page loaded");
          contentMainVar        = $('#contentMain');
          ftrMainVar            = $('#ftrMain');
          contentTransitionVar  = $('#contentTransition');

          nameLabelVar      = $('#nameLabel');
          emailLabelVar     = $('#emailLabel');
          subjectLabelVar   = $('#subjectLabel');
          messageLabelVar   = $('#messageLabel');
          //emailcopyLabelVar = $('#emailcopyLabel');

          messageVar        = $('#message');

          contactformVar = $('#contactform');
          confirmationVar = $('#confirmation');
          contentDialogVar = $('#contentDialog');
          //hdrConfirmationVar = $('#hdrConfirmation');
          contentConfirmationVar = $('#contentConfirmation');
          ftrConfirmationVar = $('#ftrConfirmation'); 
          inputMapVar = $('input[name*="_r"]');

          hideContentDialog();
          hideContentTransition();
          hideConfirmation();


        $('#buttonOK').click(function() {
          hideContentDialog();
          showMain();
          return false;      
        });


        contactformVar.submit(function() {
            var err = false;
            // Hide the Main content
            hideMain();

            // Reset the previously highlighted form elements             
            inputMapVar.each(function(index){              
              $(this).prev().removeClass(MISSING); 
            });

            // Perform form validation
            inputMapVar.each(function(index){  
            if($(this).val()==null || $(this).val()==EMPTY){  
                $(this).prev().addClass(MISSING);            
                err = true;
              }          
            });   
            if(messageVar.val()==null||messageVar.val()==EMPTY){   
              messageLabelVar.addClass(MISSING);   
              err = true;
            }

            // If validation fails, show Dialog content
            if(err == true){            
              showContentDialog();
              return false;
            }        

            // If validation passes, show Transition content
            showContentTransition();

            // Submit the form
            $.post("/forms/requestProcessor.php", form1Var.serialize(), function(data){
              confirmationVar.text(data);
              hideContentTransition();
              showConfirmation();
            });        
            return false;      
        });    


        }); 


      function hideMain(){
        //hdrMainVar.hide();
        contentMainVar.hide();
        ftrMainVar.hide();   
       }

      function showMain(){
        //hdrMainVar.show();
        contentMainVar.show();
        ftrMainVar.show();
       }

       function hideContentTransition(){
        contentTransitionVar.hide();
       }      

       function showContentTransition(){
        contentTransitionVar.show();
       }  

      function hideContentDialog(){
        contentDialogVar.hide();
      }   

       function showContentDialog(){
        contentDialogVar.show();
       }

       function hideConfirmation(){
        //hdrConfirmationVar.hide();
        contentConfirmationVar.hide();
        ftrConfirmationVar.hide();
       }  

       function showConfirmation(){
        hdrConfirmationVar.show();
        contentConfirmationVar.show();
        ftrConfirmationVar.show();
       } 


        </script>

    </head>
    <body> 

    <div data-role="page">
        <div data-role="header" data-theme="b">
            <h1>Home</h1>
        </div>
        <div data-role="content">
            <div id="banner">
                <h2>test</h2>
            </div>
            <p>
                home page content...
            </p>
            <ul data-role="listview">
                <li><a href="contactus.html">Contact Us</a>
            </li></ul>
        </div><!-- /content -->

    </div>


    </body>
    </html>
contactus.html
==============
    <!DOCTYPE html>
    <html>
        <head>
        <title>Contact Us</title>
        <meta name="viewport" content="width=device-width, initial-scale=1"> 

        <link rel="stylesheet" href="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.css" /> 
        <script src="jquery.mobile-1.0b3/jquery-1.6.2.min.js"></script> 
        <script src="jquery.mobile-1.0b3/jquery.mobile-1.0b3.min.js"></script> 
        <style  type="text/css">
            label.missing  {
                color:#FF0000;
                font-weight:bold;
            }
        </style>

    </head>
    <body> 

    <div data-role="page" id="page1">
        <div data-role="header" data-theme="b" >
            <a href="home.html" rel="external" data-icon="back" data-transition="slide">Back</a>
            <h1>contactus</h1>
        </div>
        <div data-role="content" id="contentMain" name="contentMain">
            <div id="banner">           
                <h2>Contact Us</h2>
            </div>
            <form id="contactform">
                <div id="nameDiv" data-role="fieldcontain">
                    <label for="name">Enter your Name*</label>      
                    <input id="name" name="name_r" type="text" />
                </div>

                <div id="emailDiv" data-role="fieldcontain">
                    <label for="email">E-mail address*</label>      
                    <input id="email" name="email_r" type="text" />
                </div>

                <div id="subjectDiv" data-role="fieldcontain">
                    <label for="subject">Message Subject*</label>       
                    <input id="subject" name="subject_r" type="text" />
                </div>

                <div id="messageDiv" data-role="fieldcontain">
                    <label id="messageLabel" for="message">Enter your Message*</label>
                    <textarea cols="40" rows="10" id="message" name="message_r"></textarea>
                </div>

                <!-- <div id="emailcopyDiv" data-role="fieldcontain">               
                    <input type="checkbox" id="emailcopy" name="emailcopy">
                    <label id="emailcopyLabel" for="emailcopy">E-mail a copy of this message to your own address</label>
                </div> -->

                <div id="submitDiv" data-role="fieldcontain">    
                    <input type="submit" value="Send" data-inline="true"/>
                </div>

            </form>
        </div><!-- contentMain -->


        <div data-role="content" align="center"  id="contentDialog" name="contentDialog">   
            <div>Please fill in all required fields before submitting the form.</div>
            <a id="buttonOK" name="buttonOK" href="#page1" data-role="button" data-inline="true">OK</a>
        </div>  <!-- contentDialog -->

      <!-- contentTransition is displayed after the form is submitted until a response is received back. -->
        <div data-role="content" id="contentTransition" name="contentTransition">   
             <div align="center"><h4>Your message has been sent. Please wait.</h4></div>
             <div align="center"><img id="spin" name="spin" src="img/wait.gif"/></div>
        </div>  <!-- contentTransition -->

        <div data-role="content" id="contentConfirmation" name="contentConfirmation" align="center">    
            <p>Email Sent Successfully</p> 
        </div><!-- contentConfirmation -->  

        <div data-role="footer" id="ftrConfirmation" name="ftrConfirmation"></div> 

    </div>


    </body>
    </html>

1 Ответ

1 голос
/ 09 сентября 2011

В contactus.html удалить JavaScript 

<script>
$(document).ready(function() {
    alert("page loaded");
    $('#contactform').submit(function() {
        alert("form submitted");
    }); 

}); 
</script>

Это необходимо добавить к home.html следующим образом: 

$('#page1').live('pagecreate',function(event){
    alert('page loaded');
    $('#contactform').submit(function() {
        alert("form submitted");
    });
});
...