Dynamic update Ul Li using javascript ( mootools 1.2 ).

Question

Hi all,

I have one form which is submitting by ajax.

I am running on php.

After the entry completed by ajax, that entry should be updated to my html. For example

My HTML Code

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

Now when any one insert new entry with 5, then my html should be updated with below HTML.

<ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
</ul>

Thanks in advance.

Avinash

Answer 1

Using the "dollar" function to select and extend the UL, then using one of MooTool's Element methods to insert the new LI will probably work.

http://mootools.net/docs/core/Element/Element#dollar

http://mootools.net/docs/core/Element/Element#Element%3Ainject

Answer 2

Hi, I have done it my own.

Please check the below code for the answer.

// Select UL to append    
var commentUL = $('comment_ul');

//Create new li to insert
    var commentnewLI = new Element('li', {id: 'myFirstElement'});
// Append text to li
    commentnewLI.appendText(responseValueArray[1]);
// Insert li into UL
    commentUL.adopt(commentnewLI);

Mootools' admopt method has works for me.

But i have some problem regarding this.

My response has some HTML in the to append in the LI. Like below

Dummy text, Dummy text,Dummy text,<br/><span>User Name</span>

Can u please suggest that whats the problem over here.

Thanks Avinash

Answer 3

hi All , My HTML problem is solved.

I have just replace the

commentnewLI.appendText(responseValueArray[1]);

with below code.

commentnewLI.innerHTML= responseValueArray[1];

Its working fine.....