將代碼移入函數。現在不起作用。怎麼了？

首先是一個龐大的代碼塊，然後是實際問題。將代碼移入函數。現在不起作用。怎麼了？

$(document).ready(function(){ 

    // debug. takes an object as argument and prints its content 
    function printObject(o) { 
    var out = ''; 
    // for (var p in o) { 
    //  out += p + ': ' + o[p] + '\n'; 
    // } 
    for (var p in o) { 
     if (!o.hasOwnProperty(p)) out += '(inherited) '; 
     out += p + ': ' + o[p] + '\n'; 
    } 
    alert(out); 
    } 

    function makeDialogTable(users) { 
    var result = '<table>\n<tr><td>Initials</td><td>Full Name</td></tr>\n'; 
    $.each(users, function(index, value) { 
      result += '<tr><td>' + index + '</td><td>' + value + '</td></tr>\n'; 
    }); 
    result += '</table>'; 
    return (result); 
    } 


    function sendData(is_okay) { 

    // if all form fields have been filled out 
    if (is_okay == 1) { 

     $.ajax({ 
      type: "GET", 
      url: "/cgi-bin/ajax.pl", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 

      // generate and send parameters to server-side script 
     data: $(this).serialize(), 

     // script call was *not* successful 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      $('div#create_result').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown); 


      $('div#create_result').addClass("error"); 
     }, // error 

     // script call was successful 
     // result contains the JSON values returned by the Perl script 
     success: function(result){ 
      if (result.error) { // script returned error 
      $('div#create_result').text("result.error: " + result.error); 
      $('div#create_result').addClass("error"); 
      } else { // perl script says everything is okay 
      $('div#create_result').text("result.success: " + result.success + ", result.id: " + result.id); 
      $('div#create_result').addClass("success"); 
      } //else 
     } // success 
     }); // ajax 

    } else { // if (is_okay) { ... 
     $('div#create_result').text("Submission cancelled. Changes have not been saved."); 
     $('div#create_result').addClass("error"); 
    } // if/else 
    } 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 

    // required for $(this) to work for save bottons 
    $('form').live('submit', function(){ 

    var title  = this.elements.title.value; 
    var owner  = this.elements.owner.value; 
    var users  = this.elements.users.value; 
    var groups  = this.elements.groups.value; 
    var begin_date = this.elements.from.value; 
    var end_date = this.elements.to.value; 
    var anchor  = this.elements.anchor.value; 

    // get selected radio button using name instead if ID 
    var type = $(this).find('input:radio[name="ctype"]:checked').val() || ''; 


    // check value 
    var is_okay = 0; 

    if (title == '') { 
     alert('Title is required'); 
    } else if (!(/[A-Za-z0-9]|\s/.test(title))) { 
     alert('Illegal characters in title. Only a-z A-Z and space is allowed'); 

    } else if (owner == '') { 
     alert('Owner is required'); 
    } else if (!(/[A-Za-z]|,/.test(owner))) { 
     alert('Illegal characters in owner. Only a-z A-Z and , is allowed'); 

    } else if (begin_date == '') { 
     alert('Begin Date is required'); 
    } else if (!(/\d{2}\/\d{2}-\d{4}/.test(begin_date))) { 
     alert('Illegal characters in Begin Date. Format must be: dd/mm-yyyy'); 

    } else if (end_date == '') { 
     alert('End Date is required'); 
    } else if (!(/\d{2}\/\d{2}-\d{4}/.test(end_date))) { 
     alert('Illegal characters in End Date. Format must be: dd/mm-yyyy'); 

    } else if (type == '') { 
     alert('Type is required'); 

    } else if (type == "individuel" && groups != '') { 
     alert('Groups are not allowed for individuel'); 
    } else if (type == "individuel" && users == '') { 
     alert('Users is required'); 
    } else if (type == "individuel" && groups == '' && !(/[A-Za-z]|,/.test(users))) { 
     alert('Illegal characters in users. Only a-z A-Z and , is allowed'); 

    } else if (type == "course" && users != '') { 
     alert('Users are not allowed for course'); 

    } else if (type == "course" && groups == '') { 
     alert('Groups is required'); 

    } else if (type == "course" && users == '' && !(/[A-Za-z]|,/.test(groups))) { 
     alert('Illegal characters in groups. Only a-z A-Z and , is allowed'); 

    } else { 
     is_okay = 1; 
    } 


    // if all form fields have been filled out 
    // send the form data for varification and look up display names and show in a confirm box 
    if (is_okay == 1) { 

     $.ajax({ 
      type: "GET", 
      url: "/cgi-bin/ajax_confirm.pl", 
      contentType: "application/json; charset=utf-8", 
      dataType: "json", 

      // generate and send parameters to server-side script 
     data: $(this).serialize(), 

     // script call was *not* successful 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      $('div#create_result').text("responseText: " + XMLHttpRequest.responseText + 
         ", textStatus: " + textStatus + 
         ", errorThrown: " + errorThrown); 
      $('div#create_result').addClass("error"); 
      alert("Error occured in ajax.js confirm code. Report this to [email protected]"); 

     }, // error 

     // script call was successful 
     // result contains the JSON values returned by the Perl script 
     success: function(result){ 
      if (result.error) { // script returned error 
      $('div#create_result').text("result.error: " + result.error); 
      $('div#create_result').addClass("error"); 
      } else { // perl script says everything is okay 

      // decode JSON string into arrays 
      var users = $.parseJSON(result.users); 
      var owners = $.parseJSON(result.owners); 


      // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore! 
      $("#dialog:ui-dialog").dialog("destroy"); 

      $("#dialog-confirm").dialog({ 
       resizable: false, 
       height: 600, 
       modal: true, 
       open: function() { 
       $(this).children('div.dialog-text').replaceWith("<h3><b>Users</b></h3>" + makeDialogTable(users) + "<h3><b>Owners</b></h3>" + makeDialogTable(owners)); 
       }, 

       buttons: { 
       Okay: function() { 
        $(this).dialog("close"); 
        sendData(1); 
       }, 
       Cancel: function() { 
        is_okay = 0; 
        $(this).dialog("close"); 
        sendData(0); 
       } 
       } // buttons 
      }); // dialog 


      } //else 
     } // success 
     }); // ajax 

    } else { // if (is_okay) { ... 
     $('div#create_result').text("Fill out the form to create an activity"); 
     $('div#create_result').addClass("error"); 

     is_okay = 0; 

    } // else 


// // if all form fields have been filled out 
// if (is_okay == 1) { 

//  $.ajax({ 
//   type: "GET", 
//   url: "/cgi-bin/ajax.pl", 
//   contentType: "application/json; charset=utf-8", 
//   dataType: "json", 

//   // generate and send parameters to server-side script 
//  data: $(this).serialize(), 

//  // script call was *not* successful 
//  error: function(XMLHttpRequest, textStatus, errorThrown) { 
//   $('div#create_result').text("responseText: " + XMLHttpRequest.responseText + ", textStatus: " + textStatus + ", errorThrown: " + errorThrown); 

//   // extract error message 
// //   var pattern = new RegExp(": \"(.+)\"}"); 
// //   var match = pattern.exec(XMLHttpRequest.responseText);  
// //   $('div#create_result').text(match[1]); 

//   $('div#create_result').addClass("error"); 
//  }, // error 

//  // script call was successful 
//  // result contains the JSON values returned by the Perl script 
//  success: function(result){ 
//   if (result.error) { // script returned error 
//   $('div#create_result').text("result.error: " + result.error); 
//   $('div#create_result').addClass("error"); 
//   } else { // perl script says everything is okay 
//   $('div#create_result').text("result.success: " + result.success + ", result.id: " + result.id); 
//   $('div#create_result').addClass("success"); 
//   } //else 
//  } // success 
//  }); // ajax 

// } else { // if (is_okay) { ... 
//  $('div#create_result').text("Fill out the form to create an activity"); 
//  $('div#create_result').addClass("error"); 
// } // else 

    $('div#create_result').fadeIn(); 
    return false; 
    }); 
});

相同的代碼可在

http://pastebin.com/0kXzZGND

與行號被讀取。

我將第205-245行的巨大代碼塊移至第26-65行的函數sendData(is_okay)。該功能在181和186行調用。

我在函數中使用的代碼使用諸如$.ajax({和$(this).之類的東西。

這可能是一個問題嗎？

如果是這樣，那該如何解決？

更新代碼塊應該更新HTML，但它不再那樣做。

更新將一個帕特里克DW公司的解決方案後，我得到這個錯誤：

result is null

並將其指向這個代碼

success: function(result) {

在新創建的功能。

是否因爲GET請求現在不返回任何內容？

來源

2011-05-17 Sandra Schlichting

把您問題相關的代碼*在實際問題*中。不需要外部粘貼站點，StackOverflow自己的系統格式代碼就好了。 Pastebin甚至不是一個活的網站（甚至像jsfiddle.net或jsbin.com這樣的網站只是一個*附件*的問題，代碼應該始終在SO本身上）。 – 2011-05-17 15:31:18

@ T.J。 Crowder：公平地說，這是很多代碼。 – HyderA 2011-05-17 15:32:58

@gAMBOOKa：沒關係。關鍵是，SO現在不僅僅是這個人的資源;它意味着成爲未來有類似問題的其他人的資源。外部鏈接可以以未跟蹤的方式進行修改，移動，刪除等，使問題完全無用。 – 2011-05-17 15:33:12

你的問題就像$(this).。如果您只是調用正常功能，則this的值將爲window。我猜你正在等待一個DOM元素。

您可以使用.call方法在您要調用的函數中手動設置值this。

要做到這一點，調用函數如下：

sendData.call(this, 1);

另一種選擇是讓你的函數接受另一個參數，並使用：

sendData(1, this); 

function sendData(is_okay, el) { 

    // ... 
    data: $(el).serialize(),

來源

2011-05-17 15:31:53 user113716

只是澄清，'.call（thisArg，normalArgs）'。 'thisArg'會將sendData中'this'的值更改爲指定的值。 – Robert 2011-05-17 15:34:28

我已經應用了您的第二個解決方案，並更新了問題。現在我得到'result is null'。 – 2011-05-18 08:52:37

將代碼移入函數。現在不起作用。怎麼了？

回答

相關問題