PDA

View Full Version : dom manipulation



666ragez666
14 Jul 2009, 5:33 AM
Hello Everyone,

I have a strange bug that I cannot get rid off.

I am coding a CMS article edit page, I basically want the user to be able to move a figure to next and previous paragraph, for some reason time to time the figure is skipping some paragraphs.

Here is my code


nextP = divFig.next('p[class=content]');
divFig.insertAfter(nextP);
I have to mention, I have some code that clone the content dom tree and do the same operation to update the database, that might be a problem. Do someone have a good sample where you can generate html by cloning some dom node. I would like to be able to generate the hml with the moved content, do the ajax call to update the db, if the ajax call is sucessful do the actual move of the figure in the document.

Thanks for your help and sorry for my quiet long post.....

edit: typo mistake

steffenk
14 Jul 2009, 6:07 AM
the interesting question would be: what is divFig

666ragez666
14 Jul 2009, 6:33 AM
basic answer

is an ext element pulled with this code


var divFig = el.down('div[figureid=' + id + ']');


I am also sure divFig is not null or any error come up, just some time Ext happen to insert too far away .... :) (probably my fault .... but cannot find what I doing wrong ...)

666ragez666
14 Jul 2009, 6:52 AM
BTW I will post a example tomorrow ... might be better for getting help

666ragez666
14 Jul 2009, 5:50 PM
here come the example, if you play with it you would see it definitely doesn't work .... and I think it should snif :((



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Drag and Drop between 2 TreePanels</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="two-trees.js"></script>

<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<style type="text/css">

</style>
</head>
<body>
<script type="text/javascript" >
Ext.onReady(function(){
divFig = Ext.get('figure');

getMainText = function(el){
var elChild = el.first();
finalVal = '';
while(elChild != null){
var dom = elChild.dom;
if(dom.tagName == 'P' && elChild.hasClass('content')){
// looks like some content to me
finalVal += '<p class="content">' + dom.innerHTML + '</p>';
}
if(dom.tagName == 'DIV' ){
// looks like some figure
finalVal += '$IMG$';
}

elChild = elChild.next();
}

return finalVal;
}
clone = true;
downFig = function(){
nextP = Ext.fly('figure').next('p[class=content]');
if(nextP === null){
return;
}
if(clone){
var elClone = Ext.get(document.body.cloneNode(true));
var elClonedFig = elClone.down('div[id=figure]');
nextCloned = new Ext.Element(elClonedFig.next());

elClonedFig.insertAfter(nextCloned);
finalVal = getMainText(elClone);
elClonedFig.remove();
elClone.remove();
Ext.fly('result').dom.innerHTML = finalVal;
}
// here should be some AJAX call

Ext.get('figure').insertAfter(Ext.fly('figure').next());
Ext.fly('upLink').on('click', upFig , this);
Ext.fly('downLink').on('click', downFig , this);
}

upFig = function(){

prevP = Ext.fly('figure').prev();
if(prevP === null){
return;
}
if(clone){
var elClone = Ext.get(document.body.cloneNode(true));
var elClonedFig = elClone.down('div[id=figure]');
prevCloned = new Ext.Element(elClonedFig.prev());

elClonedFig.insertBefore(prevCloned);
finalVal = getMainText(elClone);
elClonedFig.remove();
elClone.remove();
Ext.fly('result').dom.innerHTML = finalVal;
}
// here should be some AJAX call

Ext.get('figure').insertBefore(Ext.fly('figure').prev());
Ext.fly('upLink').on('click', upFig , this);
Ext.fly('downLink').on('click', downFig , this);
}

Ext.fly('upLink').on('click', upFig , this);

Ext.fly('downLink').on('click', downFig, this);


});

</script><!-- EXAMPLES -->
<textarea id="result" cols="85" rows="15"></textarea>

<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet ante vel dui sollicitudin venenatis viverra ante sollicitudin. Cras nisi libero, tempor tincidunt tempor et, placerat ac massa. Ut vitae tincidunt elit. Vestibulum in turpis nisl, ac hendrerit ante. Curabitur nunc risus, ornare in auctor eu, condimentum ac velit. Sed ipsum dolor, dignissim non placerat non, faucibus in dui. Nulla eu eros est, quis pretium elit. Proin quis blandit neque. Integer vitae scelerisque metus. Vestibulum ut fermentum quam. Praesent imperdiet odio nisl. Nam laoreet tristique mauris, eu aliquet diam vehicula a.</p>

<p class="content">Vestibulum ipsum odio, placerat sed luctus a, placerat sit amet orci. Phasellus est ante, gravida sit amet sodales eu, egestas quis libero. Quisque sollicitudin commodo sem ac hendrerit. Vestibulum varius accumsan ante eget placerat. Nulla laoreet enim a nisi malesuada et blandit ipsum dapibus. Cras vitae sem sit amet enim placerat ullamcorper eget non eros. In accumsan, purus tempor sollicitudin consectetur, tellus tortor pulvinar libero, quis sagittis ligula magna eget neque. Aliquam sollicitudin massa vel magna volutpat pulvinar. In tincidunt dapibus mattis. Integer at felis dui, at ornare velit. Nunc venenatis, nisi ac luctus interdum, orci neque sagittis mauris, ut ultricies urna risus quis lorem. Nunc nec pellentesque massa. Nulla ullamcorper dui a velit tincidunt euismod vitae ac ante. Ut tortor urna, porta id tempus sit amet, malesuada a nisi. Cras porta nulla vitae lectus egestas porttitor. Duis rutrum tristique lobortis. Sed porttitor sodales pellentesque. Vivamus orci enim, condimentum quis suscipit ac, pharetra non erat.</p>

<p class="content">Donec at nisi non mi tempor hendrerit. Donec suscipit orci nec quam blandit a tristique nunc fermentum. Pellentesque orci dui, ullamcorper quis placerat ut, ultrices id tellus. Donec accumsan rhoncus mi, ac tempus diam faucibus sit amet. Ut lacinia gravida dignissim. Suspendisse lorem metus, bibendum eget hendrerit quis, ullamcorper vitae nisl. Ut venenatis semper lacinia. Nam vehicula nulla nec enim tincidunt interdum. Sed adipiscing, quam in adipiscing viverra, quam est consectetur diam, rhoncus ornare augue neque eget lectus. In tincidunt eleifend libero, et fermentum nisl pharetra vitae. Sed diam ligula, viverra eu egestas quis, lacinia eu erat.</p>
<div id="figure">
<a href="javascript: void(0)" id="upLink">Up</a>
<a href="javascript: void(0)" id="downLink">down</a>
</div>
<p class="content">Integer blandit massa ut risus molestie vel convallis velit fringilla. Nulla facilisi. Donec in odio elit, sit amet bibendum massa. Vestibulum malesuada metus non urna porttitor fermentum. Ut lacinia sapien mi, sed imperdiet libero. Nunc ac nibh vitae neque consectetur aliquam. Morbi ultricies justo non dolor molestie vel fermentum justo congue. Cras porttitor condimentum nulla sit amet placerat. Nam elit dui, varius sit amet faucibus et, vestibulum eu leo. Morbi a malesuada urna. Vestibulum gravida varius enim, sed tincidunt libero gravida a. Cras commodo velit a mi rutrum viverra.</p>

<p class="content">Aenean ipsum nibh, pellentesque quis lacinia non, congue ac ante. Donec pulvinar eleifend arcu, nec pulvinar nisl viverra nec. Ut sollicitudin enim et arcu pretium eu rutrum sem dapibus. Aliquam nec eros ac leo elementum suscipit. Etiam orci magna, pellentesque ac congue sed, ullamcorper pharetra felis. Morbi consectetur purus nulla, nec semper nulla. Suspendisse lobortis porta porttitor. Aliquam lacinia scelerisque placerat. Quisque dapibus dignissim lacinia. Etiam hendrerit posuere enim, in faucibus augue luctus vitae. Phasellus egestas sapien id dui placerat a tincidunt enim congue. Morbi dapibus, elit quis dictum malesuada, mauris neque sodales mi, et placerat augue lacus vel augue. Cras dapibus justo at augue molestie sed mollis mi blandit. Duis lorem sapien, malesuada at tempor et, consectetur vitae magna.</p>

</p>
</body>
</html>

666ragez666
14 Jul 2009, 6:08 PM
looks like cloning the dom node just mess everything up ...