YUI Panel: Changing buttons and re-using a panel on same page

YUI is a natural Javascript library, it is different from jQuery and other Javascript frameworks due to its closeness to original JS where it supports you to build widgets and enhance the user experience, the other JS libraries such as jQuery and Dojo are incredibly easy to work in but they divert you so much from the original language that they become almost a language of their own. The closeness of YUI to the Javascript at the one end gives you the depth to work at your own ease and develop whatever you want, on the other hand it proves to be a bit difficult for the beginners, probably that is the reason, you will not find much support for YUI around, YUI has its own forums where the original developers of YUI reply in time-efficient manner as well but they speak at very high level and people to support at beginner and middle level are very less on Google.

So, I have decided to write some blog posts about the problems I faced and I was not able to find help on Google but then I figured out in some way (occasionally from the help of developers at yuilibrary.com where I got some hints and I made something out of it). I have already wrote first in this series which was about IE rendering problem in YUI tabs, today I will explain how you change modal panel buttons on the fly.

The requirement was to make a modal panel in YUI, which work at its own as a activation widget using Ajax (YUI connection manager). The idea was pop up a YUI panel when a user clicks on “Activate”, that modal panel will allow the user to enter details of when he/she wants to schedule the activation (where user can choose now or a later date) and then user can hit Submit and Cancel buttons. Uptil now its usual YUI panel which you will find in any YUI panel example, here is the example of making this panel:

//function to execute if user clicks on Cancel button
var handleCancel = function() {
 this.cancel();
 };

// Instantiate the Dialog
 var dialog23 = new YAHOO.widget.Dialog("dialog23",
 { width : "340px",
 fixedcenter : true,
 visible : false,
 modal: true,
 constraintoviewport : true,
 hideaftersubmit: false,
 buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
 { text:"Cancel", handler:handleCancel } ]
 });
//delcare the call back
dialog23.callback = { success: handleSuccess,
 failure: handleFailure };
 // Render the Dialog
 dialog23.render(document.body);

//attach the listener to Activate (button, div,
//span where ever you want to attach the click listener)
YAHOO.util.Event.addListener("Activate", "click",
dialog23.show, dialog23, true);

A function of handleSuccess is missing in this example, I will leave that to you because in my code its very inter-related. The handleSuccess is where I make an Ajax request through YUI connection manager, once the request get submitted, I show a spinning wheel and then the Ajax response get shown to the user. The problem here is, you can easily show the response but changing the buttons at the bottom became a night-mare. Once the response is shown, you don’t really want to show the user Submit, Cancel buttons, what you really need there is a OK button so that user can acknowledge and on acknowledgment the panel hides away.

Here is how you change the button at the bottom of YUI panel:

//embed the OK button, on click handleOK function will be called
 dialog23.cfg.setProperty("buttons", [ { text:"OK",
handler:handleOK, isDefault:true }]);

and then write a funciton to act when user press Ok

//these are events which happen after a user clicks OK
 var handleOK = function() {
 //hiding the dialog box
 dialog23.hide();
 };

There is one other approach I am using in this panel, that is if once activated, the user clicks on the Activate/Deactivate button again, what will happen then? You really need to make it dynamic.

For example your panel HTML was this:

<div id="dialog23">
<div>Activation</div>
<div align="left"><div id="ajaxResponse">
<form method="POST" action="timeschedule.php">
 <input type="hidden" name="buttontime" value="1">
 <div id="resp"></div>
<div>Enter the date here: <input type=text value=date name=date>
</div>
</form>
</div></div>
</div>

In this case before initializing anything get the all the ajaxResponse innerHTML in a variable like:

var div = document.getElementById('ajaxResponse');
//we are storing schedule HTML which we will restore at the end
var divHTML = div.innerHTML;

Now our ajax response will change the bits you get in ajaxResponse div, the input text box and other will be changed something like:

User specified action has been activated.

What you need now is to restore the original panel just when the user clicks OK, the handleOK function will get changed to this:

//these are events which happen after a user clicks OK
 var handleOK = function() {
 //restore the schedule HTML in case user wants to use it again
 div.innerHTML = divHTML; //populating the initial schedule HTML back
 //hiding the dialog box
 dialog23.hide();
 //rebuilding the submit and cancel buttons for re-use
 dialog23.cfg.setProperty("buttons", [ { text:"Submit",
handler:handleSubmit, isDefault:true },
 { text:"Cancel", handler:handleCancel } ] );
 };

And here you will replace the buttons in the bottom of the panel again to Submit and Cancel.

I have elaborated enough here to give you an idea of how things work, its possible you are not working on same thing but my idea was really to give you ability to change buttons in the panel on the fly and to give you an idea that how you can use a panel again and again. If you need any further help, don’t hesitate to comment and I will try to reply as much as I can.

  1. Thanks for starting this series…we’re looking forward to seeing future installments!

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Get Adobe Flash player