JQuery callback and return to the first call?
I for this function to load an external page. Page URL grab from DIV id.
$(".contentArea").load($('.contentArea').attr('id'), function(){
The page loaded, got a datatable so I added it to the callback.
$('.datatable').dataTable( {
Inside the datatable, I got an editor button, so I used the datatable callback function to call the editor without page refresh:
"fnDrawCallback": function(){
$(".contentEditor").click(function() {
$(".contentArea").load($('.contentEditor').attr('id'), function(){
On this stange, content editor was loaded using the same way I used to load the page containing the datatable. (Page URL passed on the button ID).
I got stuck now. On this editor, I need submit the form, I want it submitted using jquery load so the page don't get refreshed, after the form is submitted, I want send the surfer back to the datatable page (the one that was first loaded when the page was loaded). And I will perform the action necessary to update the edited content. Any help? Thanks.
Im using datatable server side ajax load. That is why I used the callback.
$(".contentArea").load($('.contentArea').attr('id'), function(){ $('.datatable').dataTable( { "bJQueryUI": true, "sScrollX": "", "bSortClasses": false, "aaSorting": [[0,'asc']], "bAutoWidth": true, "bInfo": true, "sScrollY": "100%", "sScrollX": "100%", "bScrollCollapse": true, "sPaginationType": "full_numbers", "bRetrieve": true, "bProcessing": true, "bServerSide": true, "sAjaxSource": $('.datatable').attr('id'), "fnDrawCallback": function(){ $(".contentEditor").click(function() { $(".contentArea").load($('.contentEditor').attr('id'), function(){ $( "select, input:checkbox, input:radio, input:file").uniform(), $( ".datepicker" ).datepicker({dateFormat: 'yy-mm-dd' }), $("#validation").validationEngine(), $('input[title]').tipsy(), $('textarea.tinymce').tinymce({ // Location of TinyMCE script script_url : '../scripts/tinyeditor/tiny_mce.js', // General options theme : "advanced", plugins : "table,advhr,advimage,advlink,inlinepopups,preview,media,paste,fullscreen,visualchars,xhtmlxtras", // Theme options 开发者_StackOverflow中文版 theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,cut,copy,paste,pastetext,pasteword,|,bullist,numlist,|,outdent,indent,blockquote,|,forecolor,backcolor", theme_advanced_buttons2 : "formatselect,fontselect,fontsizeselect,|,removeformat,|,hr,|,undo,redo,|,sub,sup,|,charmap,|,cite", theme_advanced_buttons3 : "tablecontrols,|,link,unlink,anchor,|,image,preview,media,|,cleanup,code,fullscreen", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true }); }); }); }}); });
To submit the form, use $.post()
along with $(form).serialize()
. Then, in the success handler of $.post()
, use .load()
again.
$.post(url, $("#myForm").serialize(), function(data) {
$(".contentArea").load(...);
});
Or, if the content returned from submitting the form is the html you want to display in .contentArea
, you can save yourself the extra call to .load()
by just using the returned html in .contentArea
:
$.post(url, $("#myForm").serialize(), function(data) {
$(".contentArea").html(data);
});
Edit: Create functions to handle the different tasks. By the way, don't use id
to store the url. Create a custom attribute... maybe contentUrl
.
var contentArea = $(".contentArea");
function loadContent(url, success) {
contentArea.load(url, success);
}
function loadDataTable() {
loadContent(contentArea.attr("contentUrl"), initDataTable);
}
function initDataTable() {
$(".datatable").dataTable({
...,
fnDrawCallback: bindContentEditor
});
}
function bindContentEditor() {
$(".contentEditor").click(contentEditorClick);
}
function contentEditorClick(e) {
loadContent($(".contentEditor").attr("contentUrl"), initContentEditor);
}
function initContentEditor() {
...
$(".submitBtn").click(postContentEditor);
}
function postContentEditor() {
$.post("/postUrl", $(".contentArea form").serialize(), loadDataTable);
}
loadDataTable();
I've broken it down into perhaps too many individual functions, but the point is just not to over-use anonymous functions, especially when you want to re-use functionality.
精彩评论