jqgrid saveRow没有进行ajax调用

时间:2011-05-30 10:18:13

标签: jquery ajax jqgrid

我到了jqgrid,虽然我仍然无法将行数据保存到服务器

我的迷你应用程序为每一行创建按钮,这会调用googlemaps地理编码。 地理编码使用返回的数据填写我页面上的表单。

我有3个单独的表单字段,每个字段都有自己的按钮,因此用户可以使用正确的地址更新行,每个按钮的rel更改为刚刚执行了地理编码的行的id。 我有按钮的这个功能:

EDIT --------------

我已经更改了我的代码以尝试从saveRow获取响应 如果我警告saveRow它返回false,我不会看到任何在firebug中进行的AJAX调用 我已经尝试使用错误函数来捕获错误,但这似乎没有被调用。 Oleg提到数据库中有多个id,因为它是一个主键自动编号。 我没有看到我的server.php请求更新被调用的记录。

$('body').delegate('#displayaddr_btn', 'click', function(){
    myID = $(this).attr('rel');
    myLat = $('#lat').val();
    myLng = $('#lng').val();
    myAddress = $('#displayaddr').val();    
    alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
    jQuery("#rowed2").jqGrid('setRowData',myID,{ lat_mdt:myLat, lng_mdt:myLng, displayaddr_mdt:myAddress }); 

警报(jQuery的( “#rowed2”)。jqGrid的( 'saveRow',本身份识别码)         jQuery的( “#rowed2”)。jqGrid的( 'saveRow',身份识别码,             {errorfunc:function(id,error){                 alert('saveRow()中出错 - ID:'+ id +'错误:'+错误);             }         });     })

似乎没有任何事情发生警报输出它应该的所有信息,但我看到没有调用处理页面来更新记录。

------------更新以响应Oleg ------------------------------ -

嗨Oleg感谢您抽出宝贵的时间,确实我的php文件中有错误更新了记录, 这个现在是固定的,输出键数:4匹配数值:4my update = UPDATE mapdata_mdt SET idetp_mdt = 0,geoaddr_mdt ='n11hl',active_mdt = 0,flag_mdt = 0 WHERE id_mdt = 1343是我放入的代码php页面,是我预期的输出。

实际上网格上的编辑功能正在按预期工作: 我的问题是当我尝试从jqrid外部的按钮运行saveRow()时。 当按下网格行的“geo”按钮时,在网格下面生成按钮(其中3个)

这是单击按钮时出现问题的地方saveRow()返回false,从我所看到的甚至没有调用server.php,所以我无法调试任何响应。

(我之前没有使用过WFC,ASP.NET MVC的ASMX Web服务,也不想在这一点上复杂化!)

缺少什么? Test URL (在列表中对第一个名为TEST的记录进行地理编码以填充表单,然后单击相应文本字段的保存按钮之一)

这是我的所有代码:

function setAddrButtons(myID, mylat, mylng){
        alert(' setaddrButtons----ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);

        $('#displayaddr_btn').attr('rel', myID);
        $('#revlook_btn').attr('rel', myID);
        $('#altaddr_btn').attr('rel', myID);
        $('#lat').val(mylat);
        $('#lng').val(mylng);   
    }
    //jquery grid stuff
   $('body').delegate('#displayaddr_btn', 'click', function(){
        myID = $(this).attr('rel');
        myLat = $('#lat').val();
        myLng = $('#lng').val();
        myAddress = $('#displayaddr').val();    
        alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);
        alert(jQuery("#rowed2").jqGrid('saveRow',myID)
    jQuery("#rowed2").jqGrid('saveRow',myID,
        {errorfunc:function(id, error){
            alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
        }
    });

    })
    $('body').delegate('#revlook_btn', 'click', function(){
        myID = $(this).attr('rel');
        myLat = $('#lat').val();
        myLng = $('#lng').val();
        myAddress = $('#revlook').val();

        alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);

        jQuery("#rowed2").jqGrid('setRowData',myID,{ lat_mdt:myLat, lng_mdt:myLng, displayaddr_mdt:myAddress });
        alert(jQuery("#rowed2").jqGrid('saveRow',myID)
    jQuery("#rowed2").jqGrid('saveRow',myID,
        {errorfunc:function(id, error){
            alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
        }
    });

    })
    $('body').delegate('#altaddr_btn', 'click', function(){
        myID = $(this).attr('rel');
        myLat = $('#lat').val();
        myLng = $('#lng').val();
        myAddress = $('#altaddr').val();
        alert('ID:'+myID+' myLat: '+myLat+' myLng: '+myLng+' Addt: '+myAddress);

        alert(jQuery("#rowed2").jqGrid('saveRow',myID)
    jQuery("#rowed2").jqGrid('saveRow',myID,
        {errorfunc:function(id, error){
            alert('there was an error in saveRow()- ID:'+id+' Error: '+error);
        }
    }); 

    })

    myGrid = jQuery("#rowed2").jqGrid({ 
        url:'data/stokistdata_s_json.php?q=3', 
        datatype: "json",
        mtype: "POST", 
        rowNum:10, 
        rowList:[50,100,150,200,300,400,500,600], 
        pager: '#prowed2', 
        sortname: 'name_mdt', 
        viewrecords: true, 
        gridview:true,
        sortorder: "asc", 
        rowNum:50, 
        scroll: true, 
        editurl: "data/server.php", 
        caption:"Stockist's and Orchid days",
        colNames:[
            'Actions',
            'id',
            'Type', 
            'Name', 
            'Geo Address',
            'Display Address',
            'Telephone',
            'Email', 
            'website', 
            'lat', 
            'lng', 
            'flag', 
            'description', 
            'active'
        ], 
        colModel:[{
            name:'Actions',
            index:'Actions',
            width:100,
            sortable:false,
            search:false
        }, {
            name:'id_mdt',
            index:'id_mdt',
            width:15,
            align:"left",
            sortable:true,
            search:false,
            hidden: true, 
            editable: true, 
            editrules: { edithidden: true }, 
            editoptions:{readonly:true},
            hidedlg: true,
            key: true
        }, {
            name:'id_etp',
            index:'id_etp', 
            width:90, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            formatter:'select',
            editoptions:{value:{1:'Stokist',0:'Orchid Day'}},
            editrules:{required:true},
            search:true,
            stype:'select',
            sopt: ['eq'],
            searchoptions:{value:{'':'All',1:'Stockist',2:'Orchid Day'}}
        },{
            name:'Name_mdt',
            index:'Name_mdt',
            align:"left", 
            width:150,
            editable:true,
            editrules:{required:true},
            search:true,
            stype:'text',
            sopt:['cn']
        }, {
            name:'geoaddr_mdt',
            index:'geoaddr_mdt',
            width:150, 
            align:"left",
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'displayaddr_mdt',
            index:'displayaddr_mdt', 
            width:150, 
            align:"left",
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'telephone_mdt',
            index:'telephone_mdt', 
            width:80,
            align:"left",
            editable:true,
            search:false
        }, {
            name:'email_mdt',
            index:'email_mdt', 
            editrules:{email:true, required:false},
            width:80, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'website_mdt',
            index:'website_mdt', 
            editrules:{url:true, required:false},
            width:80, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'lat_mdt',
            index:'lat_mdt', 
            width:40, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        } , {
            name:'lng_mdt',
            index:'lng_mdt', 
            width:40, 
            align:"left",
            sortable:false,
            editable:true,
            search:false
        }, {
            name:'flag_mdt',
            index:'flag_mdt', 
            width:20, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            editoptions: {value:{1:'Flagged',0:'No Flag'}},
            search:true,//
            stype:'select',
            searchoptions:{value:{'':'All',1:'Flagged',0:'No Flag'}}//{value:":Both;1:Flagged;0:No Flag"}
        }, {
            name:'description_mdt',
            index:'description_mdt', 
            width:150, 
            align:"left",
            sortable:false,
            editable:true,
            search:false,
            edittype:"textarea", 
            editoptions:{rows:"3",cols:"30"}
        }, {
            name:'active_mdt',
            index:'active_mdt', 
            width:20, 
            align:"left",
            sortable:true,
            editable:true,
            edittype:"select",
            editoptions: {value:{1:'Active',0:'Hidden'}},
            search:true,//
            stype:'select',
            searchoptions:{value:{'':'All','1':'Active','0':'Hidden'}} //{value:":Both;1:Active;0:Hidden"}
        }], search : {
             caption: "Search...",
             Find: "Find",
             Reset: "Reset",
             matchText: " match",
             rulesText: " rules"
       },

        gridComplete: function(){ 
            var ids = jQuery("#rowed2").jqGrid('getDataIDs'); 
            for(var i=0;i < ids.length;i++){ 
                var cl = ids[i]; 
                be = "<input style='height:22px;width:20px;' type='button' value='E' alt='Edit Location' onclick=\"jQuery('#rowed2').editGridRow('"+cl+"');\" />"; 
                se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />"; 
                ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
                fl = "<input style='height:22px;width:50px;' type='button' value='Find' alt='Find Location' class='findMe' rel='"+cl+"' />";
                gc = "<input style='height:22px;width:50px;' type='button' value='Geo' class='geocodeMe' rel='"+cl+"' />";
                jQuery("#rowed2").jqGrid('setRowData',ids[i],{Actions:fl+gc}); 
            } 
        }
    }); 

    jQuery("#rowed2").jqGrid('navGrid',"#prowed2",
        {edit:true,add:true,del:true,search:true,refresh:true},
        {closeOnEscape:true, recreateForm: true, width:500},
        {closeOnEscape:true, recreateForm: true, width:500}    // Add options

    ); 
    myGrid.jqGrid('filterToolbar',{defaultSearch:'cn',stringResult:true});

1 个答案:

答案 0 :(得分:1)

我尝试了您的test URL,并根据Fiddler跟踪了第一行编辑的结果。

如果我编辑网格的第一行并在“名称”字段中输入“测试”文本,我可以看到jqGrid向服务器发送包含数据的HTTP POST请求

id_mdt=1343&id_etp=0&Name_mdt=test&geoaddr_mdt=n11hl&displayaddr_mdt=&telephone_mdt=&email_mdt=&website_mdt=&lat_mdt=&lng_mdt=&flag_mdt=0&description_mdt=&active_mdt=0&oper=edit&id=1343

数据包含所有可编辑文件结构和两个附加参数oper=editid=1343(与id_mdt=1343相同)。如果成功,您的服务器应该使用任何成功的HTTP代码进行修改和响应,如果数据更新失败,则应该使用错误HTTP代码进行修改和响应。您的服务器响应具有以

开头的标头
HTTP/1.1 200 OK
Content-Type: text/html

和身体

Number of keys: 4 matches number of values: 4my update = UPDATE mapdata_mdt SET idetp_mdt = 0,geoaddr_mdt = 'n11hl',active_mdt = 0,flag_mdt = 0 WHERE id_mdt = 1343<br />
<b>Notice</b>:  Undefined variable: growthConn in <b>E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php</b> on line <b>137</b><br />
<br />
<b>Warning</b>:  mysql_query(): supplied argument is not a valid MySQL-Link resource in <b>E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php</b> on line <b>137</b><br />

所以人们可以看到许多问题:

  1. 响应中的文本“键数:4匹配”可以解释为id_mdt不是相应数据库表中的主键,因为存在{{1}的一个数据项更多}。您应该验证数据库的设计。
  2. 奇怪的错误消息显示更新失败。您应该检查id_mdt服务器代码的第137行。
  3. 您应该更改您的代码,以便在出现错误时{@ 3}}应该放在服务器响应中。
  4. 我自己不使用PHP,所以我不能给你更准确的推荐,但我很清楚,首先你应该在你的服务器代码中搜索错误。

    还有一句话。从服务器标头可以看到您使用Microsoft IIS 7.0作为Web服务器。为什么不使用您网站的ASP.NET MVC的WFC,ASMX Web服务?无论如何,我应该在Web服务器上打开动态和静态包含的error HTTP code。这将改善网站的性能。此外,您应该考虑更改当前在E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php中使用的代码以提高性能。有很多选择。看看compression。例如herehere(在最后一个答案中,性能和事件绑定部分很重要;自定义格式化程序可以从链接替换为按钮)。

    更新:在我看来,您的下一个问题是您尝试仅使用here将有关该行的信息发布到服务器。 gridComplete发布有关内联编辑模式中行的信息,以及强调saveRow之后的。与其他内容一起editRowsaveRow属性添加到行(到editable="1"元素),代码如下:

    <tr>

    接近editRow测试开始,尝试保存的行具有属性。它不归还,什么都不做。