CODEWITHSUNDEEP
javascriptjquery
NewBie
NewBie

Reputation: 1844

Issue with updating text within a Div

I'm trying to update the text within a div. The div is draggable and resizable (using jquery ui plugin). I need to update the text without affecting any of these properties set to the div.

On making a div resizable, jquery plugin adds two inner divs and this divs are getting removed on updating the text of the parent div using .text() method. Does anyone know how to fix this?

Structure of the div before updating

<div ondblclick="showPopup(this)" class="draggable ui-draggable ui-resizable" 
             id="Text10" style="position: relative;">
    test
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" 
         style="z-index: 1001;"></div></div>

Structure of the div after updating

<div ondblclick="showPopup(this)" class="draggable ui-draggable ui-resizable"     
             id="Text10" style="position: relative; background-color: rgb(255, 255, 255); font-family: Arial; font-size: 13px; font-weight: bold;">
    test-updated
</div>

Script used:

$('#Text10').text($('#newText').val());

Upvotes: 2

Views: 134

Answers (2)

Minko Gechev
Minko Gechev

Reputation: 25682

Here is solution using inner span element http://jsfiddle.net/4P73F/

JavaScript:

var i = 0;
$('#foo').draggable();
$('#foo').resizable();
setInterval(function () {
    $('#innerText').text('Some text ' + i);
    i += 1;
}, 1000);

HTML:

<div id="foo" style="width: 100px; height: 100px; background-color: #ccc"><span id="innerText"></span></div>

Upvotes: 0

a&#39;r
a&#39;r

Reputation: 36999

One approach might be to add a span tag in the outer div. The text change can then be performed with:

$('#Text10 > span').text($('#newText').val());

Upvotes: 2

Related Questions