CODEWITHSUNDEEP
javascriptpopupyui
lisak
lisak

Reputation: 21981

How to popup an error message on event with YUI?

could please anybody provide a sample how to do this ? I'm not talking about form validation, but for instance when a user clicks a button in an auction system and it is too late - a fancy message pops up.

Is there anything like this in YUI api, or some widget ?

Upvotes: 0

Views: 2417

Answers (2)

drtz
drtz

Reputation: 101

Depending on how 'fancy' you really want to get, you could just use click handler with a simple alert box in your js like so:

  YUI().use('node', function(Y) {
    Y.one('#clickme').on('click', function(e) {
        e.preventDefault();
        alert('You Clicked!'); 
    });
  });

With the following in your html:

<a id="clickme" href="#">Click Me</a>

More Fancy:
Are you working with YUI2 or YUI3? YUI2 has some built-in overlays they call panels that act kind of like a window on your desktop. This, combined with the YUI sam skin lets you do something a little more 'fancy' without any more work if you're using YUI2:

<head>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.2r1/build/container/assets/skins/sam/container.css" />

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.2r1/build/container/container-min.js"></script>
</head>

<script type="text/javascript">
  YAHOO.util.Event.addListener(window, 'load', function() {
    panel = new YAHOO.widget.Panel('mypanel', { width:"200px", visible:false, constraintoviewport:true } );   
    panel.render();    
    YAHOO.util.Event.addListener('clickme', 'click', panel.show, panel, true);
  });
</script>

<body class="yui-skin-sam">

<a id="clickme" href="#">Click Me</a>

<div id="mypanel">
   <div class="hd">Nifty Panel</div>
   <div class="bd">Nifty Content.</div>
   <div class="ft">Nifty Footer#1</div>
</div>
</body>

Note the class="yui-skim-sam" in the body tag. This gives all the YUI elements a nice, pretty look and feel.

More on YUI panels:
http://developer.yahoo.com/yui/container/panel/

More on YUI skins:
http://developer.yahoo.com/yui/articles/skinning/

Upvotes: 0

Luke
Luke

Reputation: 2581

Y.Overlay is the widget to use here. http://developer.yahoo.com/yui/3/overlay/

var overlay = new Y.Overlay({
    width:"40em",
    visible:false,
    center: true,
    zIndex:10,
    headerContent: "Uh oh!"
}).render("#somewhere");

This will create the Overlay in the DOM, but it will be hidden. In response to an error, you would then do

overlay.set('bodyContent', "The error message");
overlay.show();

Overlay does not come with a default skin, so you'll need to include css to style it like your app. Check out the user guide or just inspect the rendered Overlay in FireBug or Web Inspector to see the DOM and class structure for skinning.

Upvotes: 1

Related Questions