Inline Edit on span element
Hi there , bumped with another doubt so here it goes i have the structure like below
- <div class="ui-widget">
<div class="ui-widget-header">
Sales<span class="ui-icon ui-icon-comment"></span><span class="ui-icon ui-icon-trash"></span>
</div>
<span class="ui-widget-content">visual basic</span>
</div>
Now here is the functionality all i wanted, when user clicks the Comment icon the Span with ui-widget-content class turn into textbox with the value. OnMouseOut i want the textbox to be removed and the text typed inside the textbox to be content of the span.
Just reminding you that I have about 10-12 div's of that sort and they can also be added dynamically.
Here is the code i have come up with only thing is it is not working
- $('.ui-icon-comment').click(function(){
var prevTxt = $(this).parent().siblings().text();
$(this).parent().siblings().html("<input type='text' style='width:120px' value='"+prevTxt+"' onmouseout='"+update(this)+"'>");
})
only thing i don't know is how to get the textbox value and then update the information.
Note: Sorry!! i don't want to use any plugins as this functionality is a 1 page requirement.