jquery - Call a function with parameter, opens a modal dialog and send the content via ajax -
jquery - Call a function with parameter, opens a modal dialog and send the content via ajax -
i have datalist ids deleted, want inquire first why beingness deleted, using modal dialog. that, there piece of code repeats according number of records returned:
<asp:imagebutton runat="server" id="deleteimagebutton" imageurl="~/images/delete.png" tooltip="baixar item!" onclientclick='<%# string.format("postdelete(\"{0}\")", eval("orcid")) %>' /> and here code process it:
function postdelete(temporcid) { $.ajax({ type: "get", url: "baixar_teste.aspx", data: { paramorcid: temporcid, reasontext: $("#reasontext").val() } }); }; it works perfectly.
however show ui dialog when user clicks image in 'asp' code above. then, modal dialog show , capture parameter 'reasontext' code below, , finally, update database.
<div id="dialogo" style="display: none"> <asp:label id="razao" text="razão" runat="server" /> <asp:textbox id="reasontext" runat="server" /> </div> i've tried this, no success @ all:
$("#dialogo").dialog({ autoopen: false, height: auto, width: auto, modal: true, buttons: { "ok": function () { $.ajax({ type: "get", url: "baixar_teste.aspx", data: { paramorcid: temporcid, reasontext: $("#reasontext").val() } }), $("#dialogo").dialog('close'); }, "no": function () { $("#dialogo").dialog('close'); } } }); and wrap all, first part of function replaced this:
function postdelete(temporcid) { $("#dialogo").dialog('open'); }; and after pressing 'ok' button within modal dialog, ajax code work does.
i'm afraid, nil happens. don't see modal dialog. help?
regards.
hi eric. came 2 approaches. first plain javascript, usual popups:
<script type="text/javascript"> function confirmdelete(temporcid) { var reasontext = prompt("por qual motivo?"); // reason? if (confirm("dar baixa nesse registro?")) { // ok $.ajax({ type: "get", url: "baixar_via_ajax.aspx", data: { paramorcid: temporcid, paramreasontext: reasontext } }) } else { $(this).submit(function (e) { e.preventdefault(); $(this).unbind('submit').submit() }); } }; </script> the problem: 'paramreasontext: reasontext' didn't work in firefox desktop worked in firefox android. chrome (40+) desktop , android along ie (10+) desktop, worked fine.
the sec approach jquery wise, next inputs:
<script type="text/javascript"> $(document).ready(function () { $('.delete_link').each(function () { $(this).click(function (e) { e.preventdefault(); // otherwise doesn't stop in modal orcid = $(this).data('orcid'); // here respective id i'm delete. reason there datalist, repeat same 'image button' along way. code @ end. $("#reasontext").val(""); $("#dialogo").dialog({ height: "auto", width: "auto", modal: true, buttons: { "confirmar": function () { $.ajax({ type: "get", url: "baixar_via_ajax.aspx", data: { paramorcid: orcid, paramreasontext: $("#reasontext").val() } }); $("#dialogo").dialog('close'); }, "cancelar": function () { alert("baixa cancelada!"); // action cancelled $("#dialogo").dialog('close'); } } }); }); }); }); </script> here html(asp) code apply over:
<body> <div id="dialogo" title="justifique baixa!" style="display: none"> <label id='razao'>razão:</label> <input type="text" id='reasontext'/> </div> <asp:datalist id="datalistbaixa" runat="server" > <alternatingitemstyle /> <headerstyle /> <headertemplate> <table> <tr> <th style="width: 50px">ação</th> <th style="width: 150px">conta</th> <th style="width: 150px">grupo</th> <th style="width: 180px">item</th> <th style="width: 120px">data</th> <th style="width: 80px">por</th> <th style="width: 100px">(r$)</th> </tr> </table> </headertemplate> <itemstyle /> <itemtemplate> <table> <tr> <td style="width: 50px; text-align: center"> <input type="image" data-orcid='<%# eval("orcid") %>' class="delete_link" src="../images/delete.png" id="deleteimage" /> </td> <td style="width: 150px; text-align: center"> <label id="labeltipo" text='<%# eval("conta") %>' runat="server" /> </td> <td style="width: 150px; text-align: center"> <label id="labelgrupo" text='<%# eval("grupo") %>' runat="server" /> </td> <td style="width: 180px; text-align: center"> <label id="labelitem" text='<%# eval("item") %>' runat="server" /> </td> <td style="width: 120px; text-align: center"> <label id="labeldata" text='<%# eval("data", "{0:dd/mm/yyyy}") %>' runat="server" /> </td> <td style="width: 80px; text-align: center"> <label id="username" text='<%# eval("por") %>' runat="server" /> </td> <td style="width: 100px; text-align: center"> <label id="labelvalor" text='<%# eval("valor","{0:n}") %>' runat="server" /> </td> </tr> </table> </itemtemplate> </asp:datalist> approach based on creating class image (delete_link) , iterate through using '$('#delete_link").each', getting appropriate id in order delete it.
problem: used have code below render image (delete_link), run commandargument/oncommand in c# code behind, because want update datalist content, showing record deleted/removed. here is:
<asp:imagebutton id="deleteimagebutton" runat="server" imageurl="~/images/delete.png" imagealign="top" cssclass="delete_link" data-orcid='<%# eval("orcid") %>' commandargument='<%# eval("orcid") %>' oncommand="baixardb_click"/> the sec asp part doesn't work (commanargument/oncommand). beingness 'private void baixardb_click', used other purposes, can't declare 'pubic static void baixardb_click' (webmethod) phone call jquery.
apart it, first javascript snippet works fine (with asp code mentioned right above) , sec one, there.
any clues how might sort thing out?
thanks 1 time again help.
i think auto should "auto". according this
string: supported string value "auto" allow dialog height adjust based on content.
also, might more info debugging if utilize developer console display js error messages. should f12 key browsers.
jquery ajax dialog parameter-passing
Comments
Post a Comment