Yes No Dialog box

Board index » YUI 2.x: » Using YUI 2.x Components

Page 1 of 1

[ 5 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

Adam W

Username: astarum
Joined: Mon Dec 14, 2009 3:22 pm
Posts: 5
Location: UK

Tags:

Yes No Dialog box

Posted: Mon Dec 14, 2009 3:39 pm

+0-

Hi guys,

Let me start off by saying that Im very new to javascript and YUI in general, so if I apologize in advanced if I'm asking a stupid question here!!!

I have a problem with a Yes/No dialog box that I have been trying to use - my problem is this - I will try and explain the best I can...

I have a div on my page called "MiddleInfoBox" - information in here is fetched Asynchronously using YAHOO.util.Connect.asyncRequest when an image is clicked. Part of the information that is fetched into this div is a page that has a span called "show" (you can tell I just ripped that from the example pages

)

When you click this span - a lovely Yes/No box appears. Nice. However, if you click the same image again, or another image (causing another async request to change the content in "MiddleInfoBox" then clicking on the "show" div does nothing. It always works once per page refresh, but never after that unless you reload the whole page again....

How can I get it so that clicking the span named "show" (which is always located in the MiddleInfoBox div ) always results in the yes/no box being called?

Hope that makes sense to you guys, as my brain hurts from just trying to figure this stuff out!!

Thanks!

renzo

Username: renzos
Joined: Mon Dec 14, 2009 10:08 am
Posts: 12
Location: Netherlands

Tags:

dialog

Re: Yes No Dialog box

Posted: Tue Dec 15, 2009 3:15 am

+0-

I think a little more info on regarding your actual code is require to help you allong. Post a link or the code you are working on.

Adam W

Username: astarum
Joined: Mon Dec 14, 2009 3:22 pm
Posts: 5
Location: UK

Tags:

dialog

Re: Yes No Dialog box

Posted: Tue Dec 15, 2009 4:46 am

+0-

Code:

<HTML>
   <HEAD>

<script>
YAHOO.namespace("example.container");

function init() {
   
   // Define various event handlers for Dialog
   var handleYes = function() {
      alert("yarr!!");
      this.hide();
   };
   var handleNo = function() {
      this.hide();
   };

   // Instantiate the Dialog
   YAHOO.example.container.simpledialog1 = new YAHOO.widget.SimpleDialog("simpledialog1", 
                                                          { width: "300px",
                                                            fixedcenter: true,
                                                            visible: false,
                                                            draggable: false,
                                                            close: true,
                                                            text: "Do you want to continue?",
                                                            icon: YAHOO.widget.SimpleDialog.ICON_HELP,
                                                            constraintoviewport: true,
                                                            buttons: [ { text:"Yes", handler:handleYes, isDefault:true },
                                                                    { text:"No",  handler:handleNo } ]
                                                          } );
   YAHOO.example.container.simpledialog1.setHeader("Are you sure?");
   
   // Render the Dialog
   YAHOO.example.container.simpledialog1.render("container");

   YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.simpledialog1.show, YAHOO.example.container.simpledialog1, true);
   
}

YAHOO.util.Event.addListener(window, "load", init);
 

</script>      


</HEAD>

<

... Some random divs and other code ...

<div id="MiddleInfoBox"></div>

... Some random divs and other code ...


</body>
</html>

--- Inside MiddleInfoBox called by YAHOO.util.Connect.asyncRequest ---

Lost of stuff including....

Code:

<span id='show' onmouseover=\"this.style.cursor='hand'\" >[Scrap]</span>

--- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---

Works the first time you use it, but then never again. Its quite hard just to pull out the bits that I need to show you, as lots of content is ajax'ed in from lots of places. Also Im a complete noob!

Thanks and hope this helps!

Satyen Desai

YUI Developer

Username: sdesai
Joined: Tue Dec 09, 2008 4:17 pm
Posts: 302
GitHub: sdesai
Gists: sdesai

Tags:

Re: Yes No Dialog box

Posted: Tue Dec 15, 2009 4:33 pm

+0-

Based on your description (can't really tell from your code snippet)...

"However, if you click the same image again, or another image (causing another async request to change the content in "MiddleInfoBox" then clicking on the "show" div does nothing."

You're blowing away and recreating the span each time one of your Async loading "images" is clicked on. Any event listeners bound to the original span will be lost.

You'll either need to re-attach them...

YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.simpledialog1.show, YAHOO.example.container.simpledialog1, true);

... each time the span is replaced (which as a new frontend developer is probably the first thing to try).

If that resolves your issue, you can start optimizing your solution. First see if you really need to reload the same content (with the span) multiple times. If you really do, you can use event bubbling/delegation or look at Caridy's Bubbling Library (http://www.bubbling-library.com/eng/api ... mples.html) to allow you to setup your click listeners on content higher up in the document, which won't get blown away.

Regards,
Satyen

Adam W

Username: astarum
Joined: Mon Dec 14, 2009 3:22 pm
Posts: 5
Location: UK

Tags:

dialog

Re: Yes No Dialog box

Posted: Wed Dec 16, 2009 3:15 pm

+0-

Thanks! That suggestion worked perfectly! I didn't realise that once a listener has been created that if the thing its listening to goes, then so does it!

I think I'm starting to get the hang of it now!

Thanks once again!

Page 1 of 1

[ 5 posts ]

New Topic | Post Reply | Print view

Previous topic | Next topic

You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum