2011-12-20 48 views
0

我有一個窗體和一個可排序()列表,用戶可以從預先填充的列表拖動到一個空的UL列表中。用戶可以將他們想要的LI拖入這個空白的UL中。還有一個表格帶有幾個文本框,用戶填寫並點擊提交。ajaxform()&sortable('serialize')和codeigniter ..提交表單字段和列表元素

我可以讓ajaxform提交表單數據並將其顯示在flashdata會話中,但我不能讓它顯示allowed_fields數據。 (這是可排序的列表)。我知道它的序列化,因爲運行alert(serializedList);返回元素的序列化列表。

這是JS來生成排序列表:

/** 
* sortable ul items 
* 
* this is used for the add levels page to associate allowed_fields 
* to a level. 
*/ 
$('.block-list').sortable({ 
    connectWith: '.block-list', 
    placeholder: 'placeholder' 
}); 

這是JS處理ajaxSubmit會:

/** 
* showResponse(data) 
* show the response if the form submission is successful 
* @param {object} data object of message or success 
* @return {null} 
*/ 
function showResponse(data){ 
    alert(serializedList); 
    if (data.errorStatus == 1){ 
     $.jGrowl(data.message, { theme: 'error' }); 
    }else{ 

     $.jGrowl(data.message, { theme: 'success' }); 
    } 
}//end showResponse() 

/** @type {Object} setup the options for the ajax submit forms. */ 
var submitOptions = { 
    success: showResponse, 
    beforeSubmit: function(){ serializedList = $("#allowed-fields-list").sortable('serialize'); }, 
    dataType: 'json', 
    resetForm: true , 
    data: { allowed_fields: serializedList } 
};  
$("#addlevel-form").ajaxForm(submitOptions); 

和這是代碼點火器功能將處理表格資料..

public function addlevelprocess(){ 
    $message = array(
     'message' => 'Successfully Added The Level To The Database! WHOA!:'.$this->input->post(), 
     'errorStatus' => 0 
    ); 
    $this->session->set_flashdata('post', $this->input->post()); 
    echo json_encode($message); 
} 

我怎樣才能讓ajaxform發送表單字段數據和sortables()數據。

回答

0

我最終使用ajaxSubmit會(),並通過數據傳遞序列化形式信息:

$('#addlevel-form').submit(function() { 
    /** @type {serialized} serialized array of field IDs for allowed fields */ 
    var allowedFields = $('#allowed-fields-list').sortable('serialize'); 
    var formInfo = $('#addlevel-form').formSerialize(); 
    /** @type {Object} setup the options for the ajax submit forms. */ 
    var submitOptions = { 
     url: '/admin/levels/addlevelprocess.html', 
     dataType: 'json', 
     success: showResponse, 
     data: { allowed_fields: allowedFields, levelInfo: formInfo } 
    };  
    $(this).ajaxSubmit(submitOptions); 
    return false; 
});