【问题标题】:jqgrid saveRow not making ajax calljqgrid saveRow 不进行 ajax 调用
【发布时间】:2011-05-30 10:18:12
【问题描述】:

我正在使用 jqgrid,虽然我仍然无法将行数据保存到服务器

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

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

编辑--------------

我已更改代码以尝试从 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 }); 

alert(jQuery("#rowed2").jqGrid('saveRow',myID) jQuery("#rowed2").jqGrid('saveRow',myID, {errorfunc:函数(id,错误){ alert('saveRow() 中有错误- ID:'+id+' Error: '+error); } }); })

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

------------响应奥列格的更新----------------------------- -

嗨 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() 时。 当按下网格行的“地理”按钮时,按钮(其中 3 个)在网格下方生成)

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

(我之前没有使用过ASP.NET MVC的WFC、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)您的数据库有更多作为一个具有相同 id_mdt 的项目; 2)服务器响应有HTTP/1.1 200 OK,而不是一些错误代码,以防出错,并将错误消息作为响应发布。
  • 感谢 oleg,在网络选项卡或控制台下的 firebug 中很奇怪,我也没有看到 server.php 发出任何请求,您从哪里得到响应?
  • @Oleg: 我已经输入了 'alert(jQuery('#rowed2').saveRow(myID));'在setRowData之后,它返回false,我该如何调试这个方法???
  • 评论中没有足够的位置,所以我会在答案中写下我的评论......

标签: jquery ajax jqgrid


【解决方案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 不是相应数据库表中的主键,因为存在多个具有 id_mdt 的数据项。您应该验证数据库的设计。
  2. 奇怪的错误信息显示更新失败。您应该检查E:\Domains\f\focus-on-plants.com\user\htdocs\admin\stokists\data\server.php 服务器代码的第 137 行。
  3. 您应该更改您的代码,以便在出错时将任何error HTTP code 放在服务器响应中。

我自己不使用 PHP,所以我不能给你更准确的建议,但我很清楚,首先你应该在你的服务器代码中搜索错误。

再说一句。从服务器标头可以看出您使用 Microsoft IIS 7.0 作为 Web 服务器。为什么你不使用 WFC,你站点的 ASP.NET MVC 的 ASMX Web 服务?无论如何,我应该打开 Web 服务器上动态和静态包含的compression。这将提高网站的性能。此外,您应该考虑更改您当前在gridComplete 中使用的代码以提高性能。有很多选择。看看here。例如herehere(在最后一个答案中,性能和事件绑定部分很重要;自定义格式化程序可以从链接替换为按钮)。

更新:在我看来,您的下一个问题是您尝试使用saveRow 只是将有关该行的信息发布到服务器。 saveRow 发布有关处于内联编辑模式的行的信息,以便调用editRow。与editRow 一起将editable="1" 属性添加到行(添加到&lt;tr&gt; 元素),代码如下:

$("#"+rowid).attr("editable","1");

接近开始saveRow 测试尝试保存的行是否具有属性。它不是返回并且什么也不做。

【讨论】:

  • @Oleg:谢谢你的详细回答,我会看看 fiddler,我理解 php 错误只是我自己看不到 firebug 中的调用,会尝试你的 suguestions
  • @Oleg:我真的很感谢你的时间,我已经更新了我的问题,在 -----Update to Oleg 我的问题不在于网格中集成的功能,它是一个外部按钮使用 saveRow() 它会返回 false 并且似乎不会触发 ajax 调用
  • @Dizzy Bryan High:我附上了我的答案。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-11-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多