jQuery Ajax和Dialog

时间:2012-02-02 22:19:20

标签: jquery ajax dialog

下面是我的确认对话框和使用ajax发送数据的代码 在此代码中,第一个对话框下的“删除”按钮事件正在破坏代码,如果单击“删除”按钮,则页面中没有任何反应 如果我删除删除按钮事件中的ajax代码,则没有问题 如果单击“删除”按钮,我应该发送数据 如何帮助修复代码。

$("input.delete").live("click", function(){
    $.ajax({
        type: "POST",
        url: "forms.php",
        cache: false,
        dataType: "json",
        data: {action: 'confirm', ntag: $('input.tag').val() == 'something' ? '' : $('input.tag').val()},
        success: function(data){
            $(".dialog p").html(data.message);
            var ids=data.ids;
            $(".dialog").dialog({
                resizable: true,
                width: 500,
                height: 200,
                modal: true,
                buttons: {
                    "Delete": function() {
                        $.ajax({
                            type: "POST",
                            url: "forms.php",
                            cache: false,
                            dataType: "html",
                            data: {action: 'delete', ntag: ids},
                            context: $(this),
                            success: function(data){
                                $(".dialog p").html("deleted!");
                                $(".dialog").dialog('open');
                            }
                        }
                    },
                    "Update": function() {
                        document.location.href='edit.php';
                    }, 
                    "Cancel": function() {
                        $( this ).dialog( "close" );
                    }
                }
            });
        }
    });
});

2 个答案:

答案 0 :(得分:0)

我相信你没有关闭

的开放式
$.ajax({

(删除:功能中的那个)

答案 1 :(得分:0)

/**
* @Author : Ahmad Nabulsi
* @Date : 5/5/2013
* @param myHref : url to get ajax
* @param divIdToUpdate : div tag id to return response in it
* 
*/ 


function ajax(myHref , divIdToUpdate){
    $.ajax({
        url: myHref,
        type: "GET",
        success: function(data) {

            $('#'+divIdToUpdate).html(data);
        }
    });
}
/**
* @Author : Ahmad Nabulsi
* @Date : 5/5/2013
* @param myHref : pass href of link ex: $(this).attr(href);
* @param title : title of dialog
* @param dialogId : dialog id to distinguish multi dialog opened at same time
* @param model : [true,false] to prevent interaction with parent until close dialog or not
* @param dWidth : [any number or 'auto']
* @param dHeight : [any number or 'auto']
* @param headerClass : css class name in order to change header style
* @param loaderImagTagId : to show loading image while ajax response returned
    create in main page <img src="/cakephp-1.3.0/garage_mysql/img/gif-load.gif" alt="loading" style="display:none;margin: 0 auto;" id="ajaxLoader" />
*   and pass the id of this tag ex : 'ajaxLoader'
* @returns {Dialog }
*/
function dialog(myHref, title ,dialogId ,model ,dWidth ,dHeight ,headerClass , loaderImagTagId){
    var imageLoader = $('#'+loaderImagTagId)[0].outerHTML;
    imageLoader = imageLoader.replace("none","block");
    var dialog = $( "<div id='"+ dialogId +"' title='"+ title +"' style='text-align:center;'>"+ imageLoader +"</div>" ).dialog({
        autoOpen: false,
        height: dHeight,
        width: dWidth,
        position: 'top',
        modal: model,
        open: function(event, ui) {
            $('ui-dialog-titlebar').addClass('headerClass');

        },
        beforeClose: function(event, ui) { 
               $('ui-dialog-titlebar').removeClass('headerClass');
        },
        close: function(){
            dialog.dialog('destroy').remove();
        }


    });

    dialog.dialog( "open" );

    ajax(myHref ,dialogId);
    return false;
}

/**
*  ****How to use****
*  1- create link in your page ex : 
* <a href="www.google.ps" onclick="dialog($(this).attr('href'),'my Title','myDialogId',true,'auto','auto','myCssClassName','imageLoaderId');return false;">Click Me</a>
* 
* 2- create Ajax Loader image in main page ex :
* <img src="/cakephp-1.3.0/garage_mysql/img/gif-load.gif" alt="loading" style="display:none;margin: 0 auto;" id="ajaxLoader" />
* Ajax Loader image sytle display :none in order to show just when ajax sent
* 
*/