【问题标题】:Performing action a button click event, button being placed inside dojox.grid.DataGrid.执行按钮单击事件的操作,按钮被放置在 dojox.grid.DataGrid 中。
【发布时间】:2012-04-21 11:02:18
【问题描述】:

我有一个dojox.grid.DataGrid。在此显示一组值,最后两列填充有buttons,它们是根据使用gridStruture 中的formatter 属性从数据库中检索的数据动态创建的。现在我的网格很好。按钮也很好。我现在需要做的是,当我单击该按钮单击事件上的特定按钮时,我将其重定向到一个新 URL,其中特定值(A)作为该 URL 中的查询字符串参数传递。而且我不希望我的页面被刷新。就像单击按钮时,它会在其他一些 JSP 页面上执行操作并显示消息 alert("Action is being performed")

我为我的数据网格编码的 java 脚本代码 ::

<script type="text/javascript">
function getInfoFromServer(){
        $.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) {
        success:postToPage(result),
        alert('Load was performed.');
            },"json");
    }


    function postToPage(data){
    alert(data);    
    var storedata = {
        identifier:"ActID",
        items: data
        };
    alert(storedata);

    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
    var gridStructure =[[

                          { field: "ActID",
                                name: "Activity ID",

                                classes:"firstName"
                          },
                          {
                              field: "Assigned To",
                              name: "Assigned To",

                              classes: "firstName"
                          },
                          { field: "Activity Type",
                                name: "Activity Type",

                                classes:"firstName"
                          },
                          {
                              field: "Status",
                              name: "Status",

                              classes: "firstName"
                          },
                          {
                              field: "Assigned Date",
                              name: "Assigned Date",

                              classes: "firstName"
                          },
                          {
                              field: "Assigned Time",
                              name: "Assigned Time",

                              classes: "firstName"
                          },
                          {
                              field: "Email",
                              name: "Send Mail",
                              formatter: sendmail,
                              classes: "firstName"

                          },
                          {
                              field: "ActID",
                              name: "Delete",
                              formatter: deleteact,
                                classes: "firstName"
                          }

                    ]
              ];
    //var grid = dijit.byId("gridDiv");
    //grid.setStore(store1);

    var grid = new dojox.grid.DataGrid({

        store: store1,
        structure: gridStructure,
        rowSelector: '30px',
        selectionMode: "single",
        autoHeight:true,
        columnReordering:true

        },'gridDiv');

    grid.startup();
    dojo.connect(grid, "onRowClick", grid, function(){
                var items = grid.selection.getSelected();
                dojo.forEach(items, function(item){
                    var v = grid.store.getValue(item, "ActID");
                    getdetailsfordialog(v);

                    function showDialog() {
                        dojo.require('dijit.Tooltip');
                        dijit.byId("terms").show();
                    }

                    showDialog();
                    }, grid);

            });
}

function sendmail(item) {
    alert(item);
      return "<button onclick=http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'\">Send Mail</button>";

    }
function deleteact(item) {
    alert(item);
      return "<button onclick=http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\">Delete</button>";
    }
</script>

我正在使用$.get 调用获取网格数据。在上面的代码字段中EmailActID 实际上是在formatter 中调用每个时间函数sendmaildeleteact 时创建的按钮。显示网格。此外,两个函数中的alert(item) 的值也会出现,即存在各自的值。就像alert(item) in Delete 我得到ActIDalert(item)sendmail 得到"shan@gmail.com" 现在我想在一个特定的button clickSendmail 列中的按钮)我的页面上>

http://localhost:8080/2_8_2012/jsp/SendMailReminder.jsp?Send Mail="+item+"'

button click 在此页面的Delete 列中

http://localhost:8080/2_8_2012/jsp/DeleteActivity.jsp?Activity ID="+item+"'\"

打开从数据库中检索到的项目的值。我还应用了rowClick 事件,这也导致了问题,因为当我单击 u 按钮时,我的 Rowclick 事件触发而不是按钮单击事件。这该怎么做。我想将点击事件应用于网格上的每个按钮。但是有ID我不知道。请帮我解决这个问题。谢谢。。

【问题讨论】:

  • performs action on some other JSP page 是什么意思?你想在弹出窗口中打开这个其他 JSP,还是发送 ajax 请求来执行一些服务器端操作或其他什么?
  • 在那个 JSP SendMailReminder.jsp 上。我有一个发送邮件类的对象。该对象调用类的特定函数,该函数将邮件发送到从查询字符串中的项目接收的值。所以基本上我需要将 item 的这个值作为参数传递给我的 SendMailReminder.jsp 中的被调用函数。或者我可以做的是仅在同一页面上调用该方法,而不将其重定向到 SendMailReminder.jsp。如果第二个是可能的,请建议我一种方法来做到这一点?谢谢
  • 先生,我一直收到错误消息“尝试注册一个 id="something" 但该 id 已经注册”。我知道这是一个非常常见的错误,并且 gt 与从 dojo registery 中删除 id 或其他东西有关。但我不清楚它是什么。以及如何克服这一点。谢谢..而且我在当前页面中没有收到此错误(被问到问题)。但继续在其他页面上获取它。

标签: javascript jsp button dojo dojox.grid.datagrid


【解决方案1】:

我认为,您需要调整服务器端代码以处理发送邮件的 ajax 发布请求,并在用户单击按钮时使用 dojo.xhrPost 方法。您的 JS 代码可能如下所示:

  function sendMailHandler(evt, item) {
    dojo.xhrPost({
      url: "/2_8_2012/jsp/SendMailReminder.jsp",
      content: {
        'SendMail': item
      },
      error: function() {
        alert("Sent failure");
      },
      load: function(result) {
        alert("Email sent with result: " + result);
      }
    });

    dojo.stopEvent(evt);
  }

  function sendmail(item) {
    return "<button onclick='sendMailHandler(arguments[0], \"" + item +  "\")'>Send Mail</button>";
  }

注意sendMailHandler 中的dojo.stopEvent(evt); 用于阻止事件冒泡并防止RowClick 引发。

还有dojo.xhrGet 具有类似的语法来执行ajax GET 请求,您可以使用它来代替jQuery 的$.get。在我的示例中,您还可以使用dojo.xhrGet 而不是dojo.xhrPost,因为它有可能无需调整即可与您的后端一起使用,但POST(或ajax 表单提交)在语义上会更正确。

关于“试图注册一个 id="something",你应该调整你的代码以避免 ID 重复。或者显示你的代码导致错误。

【讨论】:

猜你喜欢
  • 2022-12-02
  • 1970-01-01
  • 1970-01-01
  • 2012-02-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多