jQWidgets Forums

Tagged: javascript editor, jquery editor, text editor control

This topic contains 3 replies, has 2 voices, and was last updated by Peter Stoev 10 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

no content after moving Posts

September 8, 2014 at 12:13 pm no content after moving #59252

Participant

Dear all,

I try to move a container-DIV with an included Editor from one place to an other via detach/append.
After moving the Editor has lost any content.
Where is my mistake?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	
	<script type="text/javascript">
       $(document).ready(function () {
		$("#jqx").jqxEditor({ width: "100%", height: 200, tools: 'bold' });

	   });

function move()
		{
		var elem=$("#container").detach();
		$("#tdright").append(elem);
		}
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
</head>
<body>
<table style="width:100%; height:100%">
<tr style="height:100%">
	<td id="tdleft" style="width:50%;" ><span id="container" class=""><div id="jqx" class="">it look's nice</div></span></td>
	<td id="tdright"></td>
</tr>
<tr>
	<td colspan=2><input type="button" value="press button to move" onclick="move()"></td>
</tr>
</table>

</body>
</html>

Greatings from Bavaria

September 8, 2014 at 10:21 pm no content after moving #59284

Peter Stoev

Keymaster

Hi quietcry,

To move the Editor by detaching it from the DOM can happen only if you destroy it, append it and create it.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxeditor.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
	
	<script type="text/javascript">
	    $(document).ready(function () {
	        $("#jqx").jqxEditor({ width: "100%", height: 200, tools: 'bold' });
	    });

	    function move() {
	        var value = $("#jqx").val();
	        $("#container").children().remove();
	        var elem = $("#container").detach();
	        $("#tdright").append(elem);
	        $("#container").append("<div id='jqx'></div>");
	        $("#jqx").jqxEditor({ width: "100%", height: 200, tools: 'bold' });
	        $("#jqx").val(value);
	    }
    </script>
    <style type="text/css">
    html, body 
    {
        height: 100%;
        width: 100%;
        margin: 0px;
        padding: 0px;
        overflow: hidden;
    }
    </style>
</head>
<body>
<table style="width:100%; height:100%">
<tr style="height:100%">
	<td id="tdleft" style="width:50%;" ><div id="container" class=""><div id="jqx" class="">it look's nice</div></div></td>
	<td id="tdright"></td>
</tr>
<tr>
	<td colspan=2><input type="button" value="press button to move" onclick="move()"></td>
</tr>
</table>

</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

September 9, 2014 at 5:54 am no content after moving #59288

quietcry

Participant

Many thanks Peter and Good Morning,

this was not the expected answer. – I hoped I make an error.

Now I must check if a DIV or TEXTAREA includes a jqxeditor control. One way is to check the used classnames in the DIV. But what would you propose?

Best Regards

September 9, 2014 at 8:07 am no content after moving #59303

Peter Stoev

Keymaster

Hi quietcry,

You can check whether it includes or not an editor by using its CSS Class name which is .jqx-editor.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.