With very nice tutorial how to create, modify and use this simple modal popup. However I'm very new to using JQuery and have problems when I want to save the data that I enter. I this example the data that user enters show on the page but I want that this
data is inserted in SQL Server. Here is my code:
Thank you very much for your fast response and time! So this is not possible without only using JQuery and ASP.NET? I had some troubles using AJAX in current project (ASP.NET 2.0) and I wll probably need to build page again. If I open new project I have
option "ajax enabled website" whereas in this project that otpion is not available :/
I've lost hope on finishing this. Didn't find anything similar on the web, tried with only button who would fire the stored procedure. No success. This is much more easier done with AJAX. It has it's own problems but it's easier. The end result won't be
so great but on older computer I was testing the sliding jQuery effect it dindn't work so smooth. So guess would be AJAX...
Thanks anyway!
all the best
Please mark as answer if the post(s) help you. In that way the others will much easily find the solutions for their problems.
Marked as answer by StarkWolf on Dec 22, 2009 08:02 AM
StarkWolf
Member
308 Points
217 Posts
using JQuery modal popup for inserting data into SQL Server table
Nov 30, 2009 11:14 AM|LINK
Hello!
I've found this site:
http://beckelman.net/post/2008/10/30/Inserting-Content-Using-jQuery-SimpleModal-Plugin-Demo.aspx
With very nice tutorial how to create, modify and use this simple modal popup. However I'm very new to using JQuery and have problems when I want to save the data that I enter. I this example the data that user enters show on the page but I want that this data is inserted in SQL Server. Here is my code:
markup:
<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master" AutoEventWireup="true" CodeFile="Copy of pedagog_dod_preSta2.aspx.cs" Inherits="Test_pedagog_pedagog_dod_preSta2" %> <asp:Content ID="Content4" ContentPlaceHolderID="Main" Runat="Server"> <script runat="server"> protected void ButtonHiddenAddCustomer_Click(object sender, EventArgs e) { Literal LiteralNewCustomer = (Literal)DataList1.FindControl("LiteralNewCustomer"); TextBox txtBoxKomentar = (TextBox)DataList1.FindControl("txtBoxKomentar"); LiteralNewCustomer.Text = @"<b>The following would of been saved:</b><br>" + "Contact: " + txtBoxKomentar.Text + "<br>Title: "; } </script> <link href="../../CSS/popup_StyleSheet.css" rel="stylesheet" type="text/css" /> <link href="../../CSS/popup_confirm.css" rel="stylesheet" type="text/css" /> <script src="../../JS/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="../../JS/jquery.simplemodal-1.1.1.js" type="text/javascript"></script> <!-- IE 6 hacks --> <!--[if lt IE 7]> <link href="../../Dizajn/CSS/popup_confirm_ie.css" rel="stylesheet" type="text/css" /> <![endif]--> <script type="text/javascript"> $(document).ready(function() { $(".deleteCustomer").click(function(ev) { ev.preventDefault(); var msg = $(this).attr("title"); $("#HiddenFieldRowId").val($(this).parent("tr").find(".id").val()); confirm(msg + "?"); }); $("#addNewCustomerImg").click(function(ev) { ev.preventDefault(); $("#TextBoxContactName").val(""); $("#TextBoxContactTitle").val(""); $("#TextBoxCountry").val(""); $("#TextBoxPhone").val(""); $("#addNewCustomer").modal({ onOpen: modalOpenAddCustomer, onClose: modalOnClose, persist: true, containerCss: ({ width: "500px", height: "275px", marginLeft: "-250px" }) }); }); $("#addNewCustomerInstructionsImg").click(function(ev) { toggleAddCustomerInstructions(); }); $("#addNewCustomerInstructionsLink").click(function(ev) { ev.preventDefault(); toggleAddCustomerInstructions(); }); $("#addNewCustomerInstructionsClose").click(function(ev) { ev.preventDefault(); toggleAddCustomerInstructions(); }); $("#customerResponse").fadeOut(5000); }); function confirm(message) { $("#confirm").modal({ close: true, overlayId: 'confirmModalOverlay', containerId: 'confirmModalContainer', onClose: modalOnClose, onShow: function modalShow(dialog) { dialog.overlay.fadeIn('slow', function() { dialog.container.fadeIn('fast', function() { dialog.data.hide().slideDown('slow'); }); }); dialog.data.find(".confirmmessage").append(message); // Yes button clicked dialog.data.find("#ButtonYes").click(function(ev) { ev.preventDefault(); $.modal.close(); alert('The customer would of been deleted.'); //$("#ButtonDeleteCustomer").click(); }); } }) } function modalOpenAddCustomer(dialog) { dialog.overlay.fadeIn('fast', function() { dialog.container.fadeIn('fast', function() { dialog.data.hide().slideDown('slow'); }); }); //naslov popupa dialog.data.find(".modalheader span").html("Izbriši temo"); // if the user clicks "yes" dialog.data.find("#ButtonAddCustomer").click(function(ev) { ev.preventDefault(); //Perfom validation if (Page_ClientValidate("addCustomer")) { $.modal.close(); $("#ButtonHiddenAddCustomer").click(); } }); } function toggleAddCustomerInstructions() { $("#addNewCustomerFields").toggle(); $("#addNewCustomerInstructions").toggle() } function modalOnClose(dialog) { dialog.data.fadeOut('slow', function() { dialog.container.slideUp('slow', function() { dialog.overlay.fadeOut('slow', function() { $.modal.close(); // must call this to have SimpleModal // re-insert the data correctly and // clean up the dialog elements }); }); }); } </script> <asp:FormView ID="DataList1" runat="server" DataSourceID="SqlDataSource1" OnDataBound="" EmptyDataText="!!!!" Width="900px" CellPadding="0" > <ItemTemplate> <!--Insert Customer--> <div id="addNewCustomer" style="display:none;"> <div class="modalheader"><span></span></div> <div class="modalbody"> <div style="padding:10px;"> <img id="addNewCustomerInstructionsImg" src="../../Slike/popup/information.png" alt="Informacije" title="Click to View Instructions" /> <a href="#" id="addNewCustomerInstructionsLink" title="Click to View Instructions" style="text-decoration:none;">Informacije</a> </div> <div id="addNewCustomerInstructions" style="display:none;padding:10px;"> <p>text</p> <button id="addNewCustomerInstructionsClose" class="yui-button">Nazaj</button> </div> <div id="addNewCustomerFields"> <table> <tr> <%--manjši tekst th--%> <th style="font-size: 13px;"> TextField: </th> <td> <asp:TextBox ID="txtBoxKomentar" runat="server" TextMode="MultiLine" Rows="8" Columns="45"></asp:TextBox> </td> </tr> </table> <div class="modalbodysubmitbuttons"> <button id="ButtonAddCustomer" class="yui-button" title="Izbriši" onclick="LinkButton2_Click" >Izbriši</button> <button id="Button1" class="yui-button" title="Izbriši in dodaj komentar">Izbriši + komentar</button> <button id="ButtonCancelAddCustomer" class="yui-button modalClose" title="Prekliči">Prekliči</button> </div> </div> </div> </div> <!-- Hidden command button that actually issues the insert OnClick="ButtonHiddenAddCustomer_Click"--> <asp:Button ID="ButtonHiddenAddCustomer" runat="server" CssClass="addCustomer" style="display:none" /> <div id="customerResponse" style="padding-top:20px;"> <asp:Literal ID="LiteralNewCustomer" runat="server"></asp:Literal> </div> </ItemTemplate> </asp:FormView> <div id ="zbrisi" runat="server" class='drobiz' visible="false"> <table style="font-size:10px; color:#BF1238; width: 300px; border: dotted 1px #FF0000;"> <tr> <td class='drobiz'> <a runat="server" class='drobiz' href="" id="addNewCustomerImg" >Zbriši temo in dodaj komentar</a><img id="addNewCustomerImg" src="../../Slike/popup/plus.png" title="Add New Customer" alt="Izbris teme" style="cursor: pointer;" /> <br /><br /> Evidentirano temo lahko zbrišete kadarkoli do njene uradne prijave. Do podatkov študenta, ki jo je evidentiral, boste lahko dostopali preko arhiva. <div id="Div1" style="padding-top:20px;"> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </div> </td> </tr> </table> </div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Conn %>" SelectCommand="SELECT_TEST1" SelectCommandType="StoredProcedure"> <SelectParameters> <asp:QueryStringParameter Name="id" QueryStringField="id" Type="Int32" /> </SelectParameters> </asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:Conn %>" SelectCommand="SELECT_TEST12" SelectCommandType="StoredProcedure"> </asp:SqlDataSource> </asp:Content> and codebehind: protected void LinkButton2_Click(object sender, EventArgs e) { string connectionstring = WebConfigurationManager.ConnectionStrings["Conn"].ConnectionString; SqlConnection efweb = new SqlConnection(connectionstring); efweb.Open(); SqlCommand cmd = new SqlCommand(); cmd.CommandType = System.Data.CommandType.StoredProcedure; cmd.CommandText = "INSERT"; cmd.Connection = efweb; cmd.Parameters.Add("@Date", SqlDbType.SmallDateTime).Value = DateTime.Now.ToShortDateString(); cmd.Parameters.Add("@id", SqlDbType.Int).Value = Request.QueryString["id"]; cmd.ExecuteNonQuery(); efweb.Close(); DataList1.DataBind(); zbrisi.Visible = false; }I hope that is clear enough what I want :)
Thank you very much!!!
mudassarkhan
All-Star
78956 Points
13402 Posts
MVP
Re: using JQuery modal popup for inserting data into SQL Server table
Nov 30, 2009 12:25 PM|LINK
You will have to make AJAX calls to your page using JQuery on submit something similar as done here
http://aspsnippets.com/post/2009/08/27/Check-User-Name-Availability-in-ASPNet-using-JQuery.aspx
Contact me
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Nov 30, 2009 01:22 PM|LINK
Hello!
Thank you very much for your fast response and time! So this is not possible without only using JQuery and ASP.NET? I had some troubles using AJAX in current project (ASP.NET 2.0) and I wll probably need to build page again. If I open new project I have option "ajax enabled website" whereas in this project that otpion is not available :/
Thanks!
all the best
EDIT:
Will try first this:
http://aspdotnetcodebook.blogspot.com/2008/04/passing-data-from-javascript-to-aspnet.html
I am trying to avoid AJAX if possible. Although it's great I don't no if it will work with my current project...
mudassarkhan
All-Star
78956 Points
13402 Posts
MVP
Re: using JQuery modal popup for inserting data into SQL Server table
Nov 30, 2009 05:07 PM|LINK
The link I gave you uses only JQuery and ASP.net
Contact me
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 14, 2009 10:43 AM|LINK
Hello!
Sorry for my late reply. I am trying with your code and have problems when using non static method for static void.
c# code:
[System.Web.Services.WebMethod] public static void LinkButton2_Click(object sender, EventArgs e) { string connectionstring = WebConfigurationManager.ConnectionStrings["Conn"].ConnectionString; SqlConnection conn = new SqlConnection(connectionstring); conn .Open(); SqlCommand cmd = new SqlCommand(); cmd.CommandType = System.Data.CommandType.StoredProcedure; cmd.CommandText = "UPDATE"; cmd.Connection = efweb; cmd.Parameters.Add("@Date", SqlDbType.SmallDateTime).Value = DateTime.Now.ToShortDateString(); cmd.Parameters.Add("@id", SqlDbType.Int).Value = HttpContext.Current.Request.QueryString["id"]; cmd.ExecuteNonQuery(); conn .Close(); //first error DataList1.DataBind(); //second error ;; divHide.Visible = false; }Thanks!
all the best
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 15, 2009 08:12 AM|LINK
I copied your sample to new .aspx page and it's working but when I try it on mine project it's not working.
Guess I'm missing something... I've spent a lot of time on this I can't just move on... :/
Thanks!
mudassarkhan
All-Star
78956 Points
13402 Posts
MVP
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 15, 2009 08:49 AM|LINK
You cannot use non static items inside static methods
Contact me
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 15, 2009 09:18 AM|LINK
but even if I delete or comment the last 2 lines:
is it not working. maybe I missed something. Nothing happens a I don't error message...
Thanks!
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 17, 2009 10:03 AM|LINK
I think that the problem is in these lines:
<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">function ShowAvailability() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $.ajax({</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> type: "POST",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> url: "pedagog_dod_preSta2.aspx/LinkButton2_Click",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> data: "{}",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> contentType: "application/json; charset=utf-8",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> dataType: "json",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> success: OnSuccess,</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> failure: function(response) {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> alert(response);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> }</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> }</div>function ShowAvailability() {
$.ajax({
type: "POST",
url: "preSta2.aspx/LinkButton2_Click",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function(response) {
alert(response);
}
});
}
The code from popup is from tested page, the codebehind function should be working fine and so probably the problem is in lines I've posted above.
StarkWolf
Member
308 Points
217 Posts
Re: using JQuery modal popup for inserting data into SQL Server table
Dec 22, 2009 08:02 AM|LINK
I've lost hope on finishing this. Didn't find anything similar on the web, tried with only button who would fire the stored procedure. No success. This is much more easier done with AJAX. It has it's own problems but it's easier. The end result won't be so great but on older computer I was testing the sliding jQuery effect it dindn't work so smooth. So guess would be AJAX...
Thanks anyway!
all the best