操縱表單值jQuery.load

大家晚上好，操縱表單值jQuery.load

後，目前我正在試圖清理我的內聯JS和其拆分成自己的js文件，以及打破了我的一些代碼到功能。下面我提供我的代碼，我有一個名爲#main的空文件名爲div的HTML文件。在文檔準備就緒後，我想打電話給我的firstLoad函數。它只是簡單地調用$("#main").load("login.php");似乎很簡單，但是我的下一步是提交表單我想序列化提交的數據，轉到字符串並通過郵件提交。由於某種原因，如果我將表單硬編碼到index.php文件中，但是如果我使用.load填充#main，則不會有效。我無法弄清楚爲什麼會這樣，我相信這很簡單，如果有人能夠解釋這一點，那很好。我的代碼如下：

UPDATE 我碰到this thread來更多的搜索後，說以下內容：

事實證明，jQuery的.load（）函數的工作完美，和我米接近這個錯誤。

一旦.load（）函數成功地完成，它調用由程序員包含任何「回調」功能，就這樣接受回調作爲其「論據」之一的任何其他 jQuery函數。 的 .load（）函數完成，一旦錯誤或成功開始HTML更換和加載新的內容，但那是 IT！然後內容將花費很長時間才能加載，但您的 .load調用在該之前已經完成。因此，期望回調在.load內容加載後運行，只有令您失望。 ;）

我希望別人能像我一樣學習，包括那些認爲我認爲是這樣的人。證明：如jquery ajax .load頁所述，回調在請求完成時執行，不在加載完成時執行。尤里卡。哎呦。

這導致了後續問題，如何在加載內容添加到DOM後操縱表單？這當然是一個簡單的修復，但我是AJAX的新手，可以在正確的方向上使用微調。我注意到在login.php腳本中添加一個文檔（準備好）可以正常工作，因爲它是用html添加的，但它似乎不是最乾淨的做法，因爲我試圖排除內聯JS。還有什麼建議？

/UPDATE

PHP/HTML

的index.php

<?php 
    session_start(); 
    $sessionNumber = session_id(); 
?> 
<!doctype html> 
<!-- Conditional comment for mobile ie7 blogs.msdn.com/b/iemobile/ --> 
<!--[if IEMobile 7 ]> <html class="no-js iem7" lang="en"> <![endif]--> 
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js" lang="en"> <!--<![endif]--> 

<head> 
    <meta charset="utf-8"> 

    <title>MyMobile</title> 
    <meta name="description" content=""> 

    <meta name="HandheldFriendly" content="True"> 
    <meta name="MobileOptimized" content="320"> 
    <meta name="viewport" content="width=device-width"> 

    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/h/apple-touch-icon.png"> 
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/m/apple-touch-icon.png"> 
    <link rel="apple-touch-icon-precomposed" href="img/l/apple-touch-icon-precomposed.png"> 
    <link rel="shortcut icon" href="img/l/apple-touch-icon.png"> 

    <meta http-equiv="cleartype" content="on"> 

    <link rel="stylesheet" href="css/style.css"> 

    <script src="js/libs/modernizr-2.0.6.min.js"></script> 
</head> 

<body> 

    <div id="container"> 
    <header id="header"> 
     <img alt="Logo" src="img/logo.png" /> 
     <div id="blackHead">Please sign-in to continue</div> 
    </header> 
    <div id="main" role="main"> 

    </div> 

    <footer id="footer"> 
     <div id="greyFoot"> 
      &copy; 2012 ACME<br /> 
      <pre id="result"></pre> 
     </div> 
    </footer> 
    </div> <!--! end of #container --> 


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 
    <script type="text/javascript" src="js/firstLoad.js"></script> 

</body> 
</html>

的login.php

<?php session_start(); 
    $sessionNumber = session_id(); 
?> 


<!-- begin login form --> 
<?php if(isset($_SESSION['sessionemail'])){ ?> 
    <a href="logout.php" id="logout">Logout</a> 
<?php }else { ?> 

<form id="logForm" name="login" method="post" action="#"> 
    <label for="sessionemail">Email</label><br /> 
    <input id="sessionemail" type="email" name="sessionemail" autofocus="autofocus" autocapitalize="off" maxlength="150" required="true" value="" class="inputText" /><br /> 
    <label for="password">Password</label> 
    <input id="password" type="password" name="password" required="true" value="" class="inputText" /><br /> 
    <br /> 
    <input type="hidden" name="sessionid" id="sessionid" value="<?php echo $sessionNumber; ?>" /> 
    <input type="hidden" name="subtocall" id="subtocall" value="g2.web.login.sub" /> 
    <input type="submit" value="Sign-In" name="submit" class="submitBox" /> 

</form><!-- end login form --> 
<?php } ?>

最後，我JS/jQuery的

firstLoad。JS

//function serializes our object 

(function($){ 
    $.fn.serializeObject = function() 
    { 
     var o = {}; 
     var a = this.serializeArray(); 
     $.each(a, function() { 
      if (o[this.name] !== undefined) { 
       if (!o[this.name].push) { 
        o[this.name] = [o[this.name]]; 
       } 
       o[this.name].push(this.value || ''); 
      } else { 
       o[this.name] = this.value || ''; 
      } 
     }); 
     return o; 
    }; 
})(jQuery); 


//firstLoad function runs on document ready 
//it loads the login form into the main div and slides 
//the container down 
(function($){ 

    $.fn.firstLoad = function(){ 
     return this.each(function() { 
      $("#container").slideUp("slow", function(){ 
       $("#main").load('./login.php', function(){ 
        $("#container").slideDown("slow", function(){ 
        }); 
       }); 
      }); 
     }); 
    }; 
})(jQuery); 

//logParse takes the loginResponse from the server 
//changes from string to object, runs a check for authentication then 
//manipulates the object dropping excess keys and adding new relevant ones for 
//the intial to do list call 
(function($){ 
    $.fn.logParse = function(xml){ 
     return this.each(function() { 
      //parse the JSON login check string from the XML response 
      var loginResponse = $(xml).find('string').text(); 
      //setup isBad variable for error check 
      var isBad = false; 
      //convert to JSON object from parsed string data 
      loginResponse = $.parseJSON(loginResponse); 
      //check if the sessionID is correct and user authenticated properly 
      if((loginResponse.SESSIONID != "<?php echo $sessionNumber; ?>") || (loginResponse.ISAUTHENTICATED == 0)){isBad = true;} 
      //if error flag is raised alert and bounce back to login 
      if(isBad){ 
       alert("Unauthorized connection, please try again."); 
      } 
      //if there are no errors 
      else{ 
       alert("so far so good!"); 
       //set up a new JSON object for to do list passback 
       //and import the values from the lognResponse object 
       //var todoPost = 
      } 
     }); 
    }; 
})(jQuery); 

$(document).ready(function(){ 
    //hide screen for slidedown 
    //$("#container").addClass("noShow"); 
    //allow cross domain scripts 
    $.support.cors = true; 
    //call firstLoad function to slide in the login prompt 
    $("#main").firstLoad(function(){ 


     //create JSON object to store form input for AJAX POST 
     //create submit listener 
     $("#logForm").submit(function(){ 

      alert("inside submit"); 
      //parse form into formObj for data passing and manipulation 
      var formObj = JSON.stringify($("form").serializeObject()); 
      //output initial formObj into result pane 
      $("#result").text(formObj); 
      $("#main").text("submitted: " + formObj); 

      //AJAX POST call 
      $.ajax({ 
       //type of communication 
       type: "POST", 
       //action for form 
       url: "http://mydomain.com/JSONService.asmx/G2WebRequest", 
       //data to be passed 
       data: "request="+ formObj, 
       //type of data passed in 
       contentType: "application/x-www-form-urlencoded; charset=utf-8", 
       //enable cross domain 
       crossDomain: "true", 
       //data type returned from webservice 
       dataType: "xml", 

       //if login POST was successful 
       success: function(xml){ 
        alert("post successful"); 
        $.logParse(xml); 

       }, 
       //if login POST failed 
       error: function(XMLHttpRequest, textStatus, errorThrown){ 
        alert(errorThrown); 
       } 




      }); 
     }); 
    }); 
});

來源

2012-08-02 Zach Atkinson

JQuery.on()解決了這個問題。花了我一段時間來弄清楚。

來源

2012-08-12 15:15:04

您可能正在建立監聽器$("#logForm")之前登錄表單被完全加載到DOM。這可以解釋爲什麼登錄表單在硬編碼時工作。你可以通過alert($("#logForm").length);來測試 - 如果沒有找到，它將爲零。

如果是這種情況，您需要確保您在嘗試連接偵聽器之前等待登錄頁面完全加載。一旦load完成，我可能會讓firstLoad調用一個函數。

祝你好運。

來源

2012-08-02 04:42:47 Kurt

感謝您的幫助，我想這就是我在做什麼？在負載上使用回調？但這個線程： [link] http://stackoverflow.com/questions/11588309/jquery-load-and-trigger-function-after-new-content-loads-just-like-javascri [/ link] – 2012-08-02 13:38:10

操縱表單值jQuery.load

回答

相關問題