javascript - jquery resizable not working after ajax update -


i have resizable div has text in , edit button.

on edit button click opens layer textbox , save button user can edit text.

then user clicks save, layer closed , db updated ajax. div on parent page updated ajax.

the problem have div no longer resizable.

i know line of code doing , why doing cant find other solution updating original div without stripping out resizable code well.

on 'save' button click on layer function called 

$(document).ready(function() {     $('.button').click(function() {      var edit_content = $('#myfrm').find('.nicedit-main').html();                 var box_id = $('#myfrm').find("#box_id").val();      var page_ref = $('#myfrm').find("#page_ref").val();      var template_ref = $('#myfrm').find("#template_ref").val();       $.post("update_textarea.php",           {             box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content           },           function(data,status){             updateelementofparent(box_id, page_ref, template_ref)                        edit_box('hide')           });     }); });

this updates db , function updateelementofparent() called on parent page

function updateelementofparent(box_id, page_ref, template_ref) {    var mybox = box_id;    $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })    .done(function(data) {                           $('#'+mybox).html(data);                      });  }

this updates original div updated content db.

i know $('#'+mybox).html(data); strips out inner html of div , replaces text , removes jquery resizable text cant find way update text.

i have tried

$('#'+mybox).value(data); $('#'+mybox).text(data); $('#'+mybox).innerhtml(data); document.getelementbyid('mybox').val(data); document.getelementbyid('mybox').value(data); document.getelementbyid('mybox').text(data); document.getelementbyid('mybox').val=data; document.getelementbyid('mybox').value=data; document.getelementbyid('mybox').text=data;

none of these work.

my javascript not strong(as can tell).

can solution?

any appreciated

quick update

i noticed if use firebug inspector div before has text updates so

<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]">   newtextarea   <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; display: none;"></div>   <div class="ui-resizable-handle ui-resizable-s" style="z-index: 90; display: none;"></div>   <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div> </div>

but once update (i use nicedit format text) div has hidden ipnout within called 'content[]'

<div id="3" class="textarea1 ui-resizable ui-resizable-autohide" style="width:300px; height:300px;position:absolute; top:10px;left:0px;overflow-y: none;background-color:transparent;" name="textarea[3]"></div> <br></br> <input type="hidden" value="   <div align="justify">      <font face="trebuchet ms" size="2"><strong>lorem ipsum</strong> es simplemente el texto de relleno de las imprentas y archivos de texto.</font>   </div>" name="contents[1]"> </input>

so seem structure of div has change , inner input need updating. input not have id how can update using name

more

ok have edited update function this

function updateelementofparent(box_id, page_ref, template_ref) { var mybox = box_id; $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })     .done(function(data) {                                         var updatedata=data+"<div class='ui-resizable-handle ui-resizable-e' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-s' style='z-index: 90; display: none;'></div><div class='ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se' style='z-index: 90; display: none;'></div></div>"; ('#'+mybox).html(updatedata);                                                   });  }

now when check original dv in firebug newly updated 1 structure , contents same.

i need reinitialise resizable. clues?

not sure want but.

var oldcontent = $('#'+mybox).html();   $('#'+mybox).html(data+oldcontent);

will keep old content , add new one.

or can use .append() http://api.jquery.com/append/ depending on when updating database

$('#'+mybox).append(data);

update:

from can see data retrieves hidden input value of new text. suggest either change data give else or add input value div manually.

the input wrong. in input value="" should value='' because have " inside of it. after function should place value inside right div.

function updateelementofparent(box_id, page_ref, template_ref) {    var mybox = box_id;    $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref })    .done(function(data) {                           $('#'+mybox).html(data);          var inval = $("input[name='contents["+mybox+"]']").val();         $("#"+mybox).html(inval).resizable();                     });  }

the basic problem had @ start forgot reinitialize .resizable() on new div.


Comments

Post a Comment

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

running rails generate controller foo home results in: class foocontroller < application controller def home end end (there's nothing on line in actual file, blank line) is there purpose blank line? it's common use newline indicate end of line, last line. many editors (like vi, use) add in newline silently. consensus text files (especially in unix world) should end in newline, , there have been problems historically if wasn't present. why should text files end newline? the tool used count lines in file "wc" counts newlines in file, without trailing newline show 3 instead of 4. it improves readability of templates used in generator. consider: https://github.com/rails/rails/blob/master/railties/lib/rails/generators/rails/controller/templates/controller.rb to remove trailing newline, template have last line of: end<% end -%> instead of: end <% end -%> that seems less readable me. the discussion below refers
Read more

keyboard - Smiles and long press feature in Android -

i've created android keyboard. how add features inserting smilies, , using long keypresses display symbols? to create long-press behavior allows select several options pop-up menu, follow guide (specifically pop-up menu section): http://developer.android.com/guide/topics/ui/menus.html smileys (also known emoticons) combination of keys, understood programs , parsed same way. have do, when clicks smiley face on keyboard, simulate pressing of key combination matching emoticon. example, when clicks smiley, should simulate key presses ':' , ')' :). here's list of emoticons: http://en.wikipedia.org/wiki/list_of_emoticons
Read more

node.js - Bad Request - node js ajax post -

i'm using express 3.0 , node v0.11.0. have button submits form , i'm using ajax post data json object node server. client code is: $('#contact').submit(function(e) { console.log('submit called'); var formdata = json.stringify($('form').serializeobject()); console.log(formdata); $.ajax({ url: "http://localhost:3000/savedata/", type: "post", datatype: 'json', data: {objectdata: formdata}, contenttype: "application/json", complete: function() { console.log('process complete'); }, success: function(data) { console.log('process sucess'); }, error: function() { console.log('process error'); }, }); return false; }); then on server: var express = require('express'); var app = express(); app.set('views', __dirname + '/views'); app.set('view engine', 'jade'); app.use(express.bodyparser());
Read more