Modify a HTML element with jQuery and access the updates on the server (ASP.NET)

Question

I have a html element:

<div id="myElement" class="someClass" onclick="setText(this.innerHtml)" runat="server">text</div>

I want to be able to change this element on the client side using some jquery like so:

function setText(text) {            
    $(".someClass").text(text);
}

--OR--

function setAttribute(text) {            
    $(".someClass").attr("myAttr",text);
}

Once I do this I want to grab this element's new text or new attribute and then store the value of either or, server side. I should note that I then postback to the server using a LinkButton. It is at this time that when I look at the element the default text is still present or the new attribute I added is missing.

Can someone explain why the element does not get updated on the server and how I can get it too?

Can you please show the form tag that wraps the html element? Also, if you can post the code from the code-behind, showing where you are checking the value of the element? — Shai Cohen
– Shai Cohen, Commented Apr 24, 2012 at 17:26
@ShaiCohen Sure the form tag rests in my masterpage while the element is in my default page, if that makes a difference: <form id="form1" runat="server"> I am just checking the element by using either: myElement.Attributes["myAttr"] -OR- myElement.Text — jpalladino84
– jpalladino84, Commented Apr 24, 2012 at 17:29

Shai Cohen · Accepted Answer · 2012-04-24 17:52:55Z

1

I believe the problem you are facing is due to the type of html element you are using, a div. If you simply replace the div with an input of type "text", it will work as you expect it, allowing you to read values on postback. Only form elements are sent during form submission/postback.

An example of this is how web-based WYSIWYG text editors work. You type and edit in a div, but in the background all changes you make are stored in a hidden field. This hidden field is used to post the information back to the server.

answered Apr 24, 2012 at 17:52

Shai Cohen

6,2694 gold badges34 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jpalladino84 Over a year ago

Thank you! I added a hidden field and added the value using jQuery and it is being passed to the server now!

Machinegon · Accepted Answer · 2012-04-24 17:50:21Z

1

This method can work but it depends on the type of element that you modify and the type of attribute. Remember that all your controls get recreated on each request right? The only reason on why exactly you can pull out information in you button event is because asp.net pulled the data from the request ( or viewstate) on the LoadViewState event and replaced the default values of your control by this data.

If you div element is not a server side panel control ( this is the asp.net control that will render a div element) , it cannot work. If you make it a panel control, I'm not even 100% sure that this is passed in the Page.Request (especially the attributes)

What I would do is copy the value that you modified in you div element into a hidden field that can be easily accessed server side and get this new attribute form there.

answered Apr 24, 2012 at 17:50

Machinegon

1,8852 gold badges29 silver badges45 bronze badges

1 Comment

Shai Cohen Over a year ago

I ran a proof-of-concept for the asp Panel. Confirmed that this does not work. This is because in the end, the panel is output as a div on the client side.

Tejs · Accepted Answer · 2012-04-24 17:50:00Z

0

Attributes are not posted to the server, like at all (other than value, snerk). Only the name / value pairs of the items are, and (assuming you are using traditional webforms) the data that is contained in view state.

If you want to change items like this, and then access it on the server, you would need to post this data either on the query string, or as a key value pair (which you would then need to set on your server objects).

Otherwise, this is impossible.

answered Apr 24, 2012 at 17:50

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

Collectives™ on Stack Overflow

Modify a HTML element with jQuery and access the updates on the server (ASP.NET)

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related