Solved: Direct Edit with no safe button - asynchronous AJAX

Check this : http://code.google.com/p/jquery-in-place-editor/
Try the demo

It depends on how you want to do it. You can do it in many ways. Some are:

1) Render a text fields as disabled and on click event make them editable or vice versa.
2) Display them as label, when clicked you can remove the label node from dom and add a text field node into the dom or vice versa.

goodk

ASKER

darkyin87: You are saying to create a control similar to

leakim971: I had already googled those links and many other ones. I actually like the idea of using jquery as the code will be concise.

I am requesting to show me an example like I wrote in my initial request

I followed the example in the jquery link OK but it does not have the iinformation on how create the page to capture and save the CHANGED value in asp.net Ajax.

leakim971

please provide the sample table with the two label fields

goodk

ASKER

I read through the following article but I am still confuse on how it would work with our example?
http://www.ezzylearning.com/tutorial.aspx?tid=3967791&q=calling-web-services-in-client-script-using-asp-net-ajax

leakim971

>please provide the sample table with the two label fields

Thanks.

darkyin87

Chk this out. I think this may be helpful for u

http://www.appelsiini.net/projects/jeditable

goodk

ASKER

"http://www.example.com/save.php"

Client part is quite clear. What will be the equalent of the above file in asp.net? What would it look like?

Would it be SERVICE or aspx file? Would it only a function which would return a string? I know I have to save the contents in the db in the file and return some value. How would it look like in it's simplest form?

thanks,

goodk

ASKER

Do we have any one use this jquery control in asp.net? please give me example?

goodk

ASKER

Please help - thanks

if url: "AsynResponse.aspx" does not exists, should I get an error?

$(".inplace-editor").editInPlace({ url: "AsynResponse.aspx"});

<script src="../jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.editinplace.js" type="text/javascript"></script>

<link href="../App_Themes/EditInPlacestyles.css" rel="stylesheet" type="text/css" />

<script src="../jquery/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="../jquery/demo.js" type="text/javascript"></script>
<script type="text/javascript">

AsnResponse.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AsynResponse.aspx.cs" Inherits="AceSA_12_12_2009.Prod.AsynResponse" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script runat="server">
protected override void OnLoad(EventArgs e)
{
this.Response.Clear(); this.Response.Cache.SetNoStore(); this.Response.Cache.SetExpires(DateTime.Now); this.Response.StatusCode = 200;
try
{
var postId = this.Request.Form["id"];
var value = this.Request.Form["value"];
this.Response.Write(value);
switch (postId)
{
case "id1":
// write 'value' to DB or whatever
break;
case "id2":
// write 'value' to DB or whatever
break;
default:
this.Response.StatusCode = 501; break;
// Not Implemented
}
this.Response.End();
}
catch
{
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>

leakim971

>if url: "AsynResponse.aspx" does not exists, should I get an error?

yes of course!
AsnResponse.aspx is a web service
a random link from Google : http://www.4guysfromrolla.com/articles/062602-1.aspx

if you can provide a simple form to edit-In-Place I would be happy to help you "more"

goodk

ASKER

leakim971:thanks for your response,

see the url file xxxAsynResponse.aspx does not exists but I do not get an error, when I save any of the following fields.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InPlaceEdit.aspx.cs" Inherits="AceSA_12_12_2009.Examples.InPlaceEdit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="../jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.editinplace.js" type="text/javascript"></script>

<link href="../App_Themes/EditInPlacestyles.css" rel="stylesheet" type="text/css" />

<script src="../jquery/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="../jquery/demo.js" type="text/javascript"></script>
      <script type="text/javascript">



       $(".inplace-editor").editInPlace({
       url: "xxxAsynResponse.aspx"
       });


       //http://www.joe-stevens.com/2010/01/12/edit-in-place-inline-editing-with-jquery-jtemplates-and-asp-net/

</script>
</head>
<body>
<form id="form1" runat="server">

<div id="container">

<h2>Example 1 - Standard Text box</h2>

<p id="editme1">
This example is with no options except for a callback that will handle the value when the edit is complete.
</p>

<h2>Example 2 - Text area</h2>

<p id="editme2">
This example shows how to call the function and display a textarea instead of a regular text box. A few other options are set as well, including an image saving icon, rows and columns for the textarea, and a different rollover color.
</p>

<h2>Example 3 - Select Dropdown</h2>

<p id="editme3">
How about a select input field so we can limit our options? Yup, just click here.
</p>

<h2>Example 4 - Using a callback function to update 2 divs</h2>

<p id="editme4">
Edit me now!
</p>

<div id="updateDiv1">First div to be updated</div>
<div id="updateDiv2">Second div to be updated</div>

<h2>Example 5 - Using saving animations while updating</h2>

<p id="editme5">Edit me now!</p>
</div>

</form>
</body>
</html>

leakim971

A simple page :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
<script language="javascript" type="text/javascript" src="Scripts/jquery-1.4.4.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery-ui-1.8.9.js"></script>
<script language="javascript" type="text/javascript" src="Scripts/jquery.editinplace.js"></script>
<link rel="stylesheet" href="Styles/styles.css" type="text/css" media="screen" title="no title" charset="utf-8" /> 
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#editme1").editInPlace({
                "url": "WebService.asmx/HelloWorld"
            });
        });
</script>
</head>
<body>
<div id="container"> 
    <h2>Example 1 - Standard Text box</h2> 
    <p id="editme1">This example is with no options except for a callback that will handle the value when the edit is complete.</p> 
</div> 
</body>
</html>

Open in new window

leakim971

the parameters sent by editInPlace are :

element_id : the id of the element, in our case ! editme1
original_html : the innerHTML of the field
original_value : the text from the innerHTML
update_value : the value you entered and you're going to update/save

In the following simple web service, we just send back "update_value" with some text around instead save it for example :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService {

    public WebService () {
    }

    [WebMethod]
    public string HelloWorld(string element_id, string original_html, string original_value, string update_value)
    {
        // we return the field itself for testing purpose
        return "you enter : " + update_value + " !!!";
    }
    
}

Open in new window

goodk

ASKER

when I tried "Simple Page" it worked fine. I did not create any webservice but it does not give me any error. Should i see an error, when callback url file is missing?

leakim971

I was thinking you want to save data each time you change a field content

goodk

ASKER

yes - but I am asking should'nt the page tell me if the call back file is missing?

leakim971

no, the url parameter override the callback

goodk

ASKER

1-when I click on the text field why do I see two new lines pop up below the text field?
2-Also, after I edit, and hit enter I see the following message - not sure where it is coming from

please help - thanks

goodk

ASKER

Am I going to get any response?

leakim971

Did you try my example?

goodk

ASKER

yes, let me post the code also - thanks

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InPlaceEdit.aspx.cs" Inherits="AceSA_12_12_2009.Examples.InPlaceEdit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>

<script src="../jquery/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="../jquery/jquery.editinplace.js" type="text/javascript"></script>

<link href="../App_Themes/EditInPlacestyles.css" rel="stylesheet" type="text/css" />

<script src="../jquery/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script src="../jquery/demo.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
$("#editme1").editInPlace({
"url": "ListenforAjax.asmx/HelloWorld"
});
});
</script>
</head>
<body>
<div id="container">
<h2>Example 1 - Standard Text box</h2>
<p id="editme1">This example is with no options except for a callback that will handle the value when the edit is complete.</p>
</div>
</body>
</html>

service

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;

namespace AceSA_12_12_2009.Prod
{
/// <summary>
/// Summary description for ListenforAjax
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class ListenforAjax : System.Web.Services.WebService
{

[WebMethod]

public string HelloWorld(string element_id, string original_html, string original_value, string update_value)
{
// we return the field itself for testing purpose
return "you enter : " + update_value + " !!!";
}

public string ListenforAjaxResponse()
{
return "OK";
}
}
}

leakim971

try your web service with vs before use it

you said you try lmy code, did it work on your side?

goodk

ASKER

no it did not work for me. I have posted your code above. I have .also posted the screen shots of the problems

what is vs - not sure how to test the webservice?

I still need help!!

leakim971

vs : visual studio

WebSite70.zip

goodk

ASKER

leakim971: thanks, it is works. Not sure, why in 3.5 framework it was not working or one older verion of jquery. I will look at it some more to understand why, when I was trying your examples and were not working.

I very greatly appreciate your persistance and help.

thanks again,

goodk

ASKER

very very helpful!!

leakim971

You're welcome! Thanks for the points!