Heirarcial display using javascript

hi all

I have attached an image.please check this.I have 3 buttons on the page such as Add certificate,Add Module and Add Paper.

How can I do these kind of arrangments using jasvscript.How can I implement javascript code for creating these type of things.

When the page is loading first time I will have only add certificate and Add Module textbox and Add paper textbox with button.There will be only one Add certificate button always in the page .the changing sections are add module and addpaper and also I can add multiple certificate below as shown in the image.
Basicaly I need to create a multiple items on the correct postion.If I select a add module in the first part it should only be added in first part.If I add a module in second part it should always added in the second part.

please help me to solve this.
Thanks

Not having seem the image yet, I would say that the only appropriate way to do this is without scripting, to instead use forms and server-side programming.

There is no need to complicate things by using javascript for this task. Instead, it seems that a better use of javascript relating to this is to trigger some of the server-side code from the non-javsacript solution, in a similar manner as described and espoused in the Bulletproof Ajax book

you mean it is not possible by using jaavscript

The attachment is still pending approval, without which a judgement cannot be made.
But from what I’ve heard from you regarding this, no - it’s not feasible without server-side code - so get the server-code code working first, and then enhance the user experience with javascript.

why my attachment taking time to get approved ???

It might be that SitePoint is based in Australia, and it’s currently around 2:30 AM over there.

Bit of patience, bit of patience… we will get there in the end… Apologies for the delay… Attachment approved! :smiley:

Anyway, I will leave my ideas for later… It seems that today is not my day… I don’t understand the question :frowning:

Yep, that’s all server-side code to achieve what you’re after.

Other than using JavaScript to communicate with server-side code, I don’t see any useful way in which JavaScript can be used to help you wit your task.

can’t I use javascript at all to implement this.

While it is possible to use javascript, the only purpose that javascript would serve is to ask the server-side code to perform different parts of the work. You still need the server-side code that does the grotty talking to the database side of things.

You do not want javascript to directly control your database. You’re leaving yourself wide open for hackers to exploit your database, which is in part why javascript is not capable of doing such dangerous behaviour.

I still don’t understand the question very well so take this with a pinch of salt as I may say something completely stupid…

I don’t see why you can’t do it with Javascript to show and hide the parts you need while they’re feeling the information, and then when they hit the button check that there’s nothign to damage the database (first on the client side with Javascript and then on the server side with PHP so when it goes there you know that everything is OK and secure)

I see it as a form with a div where all the grouped items (the fields and the addpaper and addmodule buttons… the whole group) may be in a div. Whenever they hit the add certificate, a new div with the same items will be created using Javascript so the user will be able to add a second certificate…

When he’s ready to send the information, he can hit a send button and then trigger all the checking script on the javascript side, then send to the database where php will do a second check and, if everything is OK, save the data.

Mea culpa, my assumption has been that the original poster wants to perform the database manipulation with javascript. If my assumption is wrong, then all the better.

It may not be the case, pmw… I may be the one who’s wrong… Yet, I risked it and I hope that the answer makes some sense. :smiley:

yes,I need to implement fully in client side using javascript.Is there any built in methods or any examples have you seen like this

No, javascript is not capable of full client-side. The only way it can work client-side is as father-daughter relationship, with the server being the father :smiley:

I don’t want to intract with database,On submit I will have interaction with db.There is no need to intact with db before that.

I think you have not yet got my question.

I have seen appendchild,CloneNode function in jaavscript.Will it be helpfull to create multiple textboxex like this.Using javascript I just need to craete the interface.So can you suggets any good examples of these?

Thanks for clearing that up.

The advice that molona gives is very good and well worth listening to.

I don’t have any specific link for a case like this. I use to have a link to a mortage form that used this type of approach to show parts of the form depending on the user’s answers but I deleted it long ago.

The other link that I have is in Spanish but basically you need to work with appendChild and appendNode.

You can use javascript to dynamically create dom elements(including form input elements).
You will need to create event handlers for your buttons. The functions need to be aware of the position of the button in the dom hiearchy, so that when further new elements are created as a result of clicking the button, the new elements get placed into the appropriate location in the dom.

You have a natural hierarchy here.


<div class="certificateList">

  <div class="certificate">
    <div class="moduleList">
      <div class="module">
        ...
      </div>
      <div class="module">
        ...
      </div>
    </div>
  </div>

  <div class="certificate">
    <div class="moduleList">
      <div class="module">
        ...
      </div>
      <div class="module">
        ...
      </div>
    </div>
  </div>

</div>

The event handler for add certificate would just locate the one and only certificateList, and append new dom elements at the end.
The event handler for add module would traverse up the dom, starting from the clicked button. The traversal stops when you find an element with class=“moduleList”. Append new elements to the end.
Same goes for add paper, traverse up until you find the closest module.

This could be very difficult for you if you’re not familiar with javascript or the dom.

Can you please explain in a simple way?

Can I use any JS library like jquery,prototype etc…
Thanks to all