操纵表单值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

回答

相关问题