PDA

View Full Version : Unique Dialog Validation Requested



Bobafart
24 Jan 2007, 5:37 AM
I have been playing around with dialog and panel creation.

Currently I am having difficulty creating unique dialogs when I am selecting multiple rows from a db call (mySQL and PHP). I am listing a number of headlines so that when the user clicks a headline a new dialog box pops up displaying the article content.

The problem occurs when the user clicks the headline. All of the dialog boxes for each headline end up being created and displayed when I only want the dialog box for the headline that was clicked.

Basically, I need to code a JS validation to check that only the headline clicked activates the dialog box. (line 56)

The demo is below:

http://www.gabbr.com/sandbox/yahooui/yahoodialog4.php

___

If you are still not clear as to what my goal is I have a working example using yui-ext panels here:

http://www.gabbr.com/sandbox/yahooui/yahoopanel1.php (you click a headline, the correct article content displays in a panel -- viola! panels work, but dialogs don't)

Animal
24 Jan 2007, 6:11 AM
Think about the code you write. Step through it line by line in Firebug's debugger if necessary. You DO know what's going on here, somewhere deep down, I'm sure of it.

You attach a listener to all the "buttons" which are spans. So for EVERY CLICK on those buttons you call the showDialog function.

Your showDialog function creates, anew, on every click, EVERY DIALOG. They are visible by default, so you get them all showing.

Program what you want to happen!

YOU only need to create them once don't you?

OK, so in the onclick handler:

* Look at what you clicked on - the id of the span. Using that, decide WHICH ONE, SINGLE dialog you need to show.

* If it hasn't been created, create it - put it into a known var name like YAHOO.util.mydialogs[divId] - when divId is the id of the div from which you create the dialog. Now you can check that variable next time - it will exist (truth test will succeed), so you don't have to create it again.

* Show it.

How hard is that?

Animal
24 Jan 2007, 6:17 AM
In fact, since you're usnig a closure, you can store the created dialogs in a private array:



HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
var myDialogs = [];


So just put the created BasicDialogs into myDialogs indexed by their div ids. That way, you can check if they exist.

I mean, in your copied and pasted code you've got a great big clue! "everything in this space is private and only accessible in the HelloWorld block"!

Bobafart
24 Jan 2007, 7:51 AM
Think about the code you write. Step through it line by line in Firebug's debugger if necessary. You DO know what's going on here, somewhere deep down, I'm sure of it.

You attach a listener to all the "buttons" which are spans. So for EVERY CLICK on those buttons you call the showDialog function.

Your showDialog function creates, anew, on every click, EVERY DIALOG. They are visible by default, so you get them all showing.

Program what you want to happen!

YOU only need to create them once don't you?

OK, so in the onclick handler:

* Look at what you clicked on - the id of the span. Using that, decide WHICH ONE, SINGLE dialog you need to show.

* If it hasn't been created, create it - put it into a known var name like YAHOO.util.mydialogs[divId] - when divId is the id of the div from which you create the dialog. Now you can check that variable next time - it will exist (truth test will succeed), so you don't have to create it again.

* Show it.

How hard is that?

Animal, all of this is exactly what I am trying to do. I am trying to display the one handler that was clicked.

In JS I would have done something like this:






<script>
func($foo) {
// done via HXMLhttpRequest -- not the actual code I would have used of course:
$dbquery = mysql_query("SELECT * FROM table WHERE fieldname = '$foo'");
echo $dbquery;

}
</script>

<span id="divid3" onclick="func(divid3)">headline3</span>


I would not have to require a unique validation so that only the one div is displayed.
but this whole yui-ext thing is totally confusing.

I would have solved this problem like what code I typed above -- but you can't seem to pass variables into functions with yui-ext (from what I have seen)

Bobafart
24 Jan 2007, 7:54 AM
In fact, since you're usnig a closure, you can store the created dialogs in a private array:



HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
var myDialogs = [];


So just put the created BasicDialogs into myDialogs indexed by their div ids. That way, you can check if they exist.

I mean, in your copied and pasted code you've got a great big clue! "everything in this space is private and only accessible in the HelloWorld block"!

an array isn't even needed -- if I can pass the unique divid to the function I can create a unique dialog each time the handler is clicked. That would not only prevent me from having to come up with a validation line but it would also make the initial page load a lot quicker/efficient.

The question remains: how can this be done using yui-ext?

Animal
24 Jan 2007, 11:38 AM
In fact, since you're usnig a closure, you can store the created dialogs in a private array:



HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
var myDialogs = [];


So just put the created BasicDialogs into myDialogs indexed by their div ids. That way, you can check if they exist.

I mean, in your copied and pasted code you've got a great big clue! "everything in this space is private and only accessible in the HelloWorld block"!

an array isn't even needed -- if I can pass the unique divid to the function I can create a unique dialog each time the handler is clicked. That would not only prevent me from having to come up with a validation line but it would also make the initial page load a lot quicker/efficient.

The question remains: how can this be done using yui-ext?

Nooooooooooooooo!

Why create a dialog each time the click handler is invoked??????? You want to create each one, just ONCE, the FIRST TIME ITS BUTTON IS CLICKED.

You are trying to do things on the server side that should be done on the client side.

The only thing that your PHP should be doing is generating those content divs from which the dialogs are to be created. Give them a known id.

Then in the button's click handler, do what I suiggested. Put the created dialog into te array using the id as it's index. Then before creating it, you can see if it's there.

Really. It's that simple. That is what you need to do.

Bobafart
24 Jan 2007, 4:46 PM
ok, how about this?

http://gabbr.com/sandbox/yahooui/yahoodialog5.php

still doesn't work but I think it is closer to what you are referring to...

I keep getting error: "el has no properties" -- and I am not sure why since I used the proper getEl(name)

any other hints from here?

tryanDLS
24 Jan 2007, 4:55 PM
What's name in that rtn ? If you invoke via onclick=createDiaglog(this), isn't the 1st arg an event object? Did you stop in debug and see what the object looks like?

Animal
25 Jan 2007, 12:02 AM
Bob, wat you are struggling with now is basic Javascript authoring. I think it's off-topic for this group.

You would get better help at comp.lang.javascript

Bobafart
25 Jan 2007, 4:28 AM
Bob, wat you are struggling with now is basic Javascript authoring. I think it's off-topic for this group.

You would get better help at comp.lang.javascript

Been there, done that. No help. I have also been to 3 different IRC servers and other help forums this week. They all say the same thing: either "I don't know" or "it's a YUI library -- go ask in a YUI forum".

I have read a number of JS tutorials (basic, intermediate and advanced) but none give enough information to solve the problem.

This is ridiculous and incredibly frustrating. I don't see how new users can adopt this library.

I don't see why seeing someone's example is really such a big deal. Learning by example is a great way to learn. I have been trying to solve this problem for days and have tried every means possible.

Animal
25 Jan 2007, 4:43 AM
This is ridiculous and incredibly frustrating. I don't see how new users can adopt this library.

I don't see why seeing someone's example is really such a big deal. Learning by example is a great way to learn. I have been trying to solve this problem for days and have tried every means possible.

That's an absurd statement. The YUI and yui-ext libraries are well documented, and easy to use.

You are not encountering problems with the YUI library or the yui-ext ilbrary. You are having difficulties programming

You have been given a guide to the solution, but nobody wants to write the code for you.

Bobafart
25 Jan 2007, 4:59 AM
You are having difficulties programming

You have been given a guide to the solution, but nobody wants to write the code for you.

And you learn to program by seeing examples.

I don't want anyone to write code for me -- you are being condescending -- I am asking someone to help by example. Big difference.

Animal
25 Jan 2007, 5:18 AM
As I posted above. In your click handler:

* Look at what you clicked on - the id of the span. Using that, decide WHICH ONE, SINGLE dialog you need to show.

* If it hasn't been created, create it - put it into an array indexed by the divId]. Now you can check that variable next time - it will exist (truth test will succeed), so you don't have to create it again.

* Show it.

That's the pseudo code. You implement it. We'll help you if you actually start to listen and take programming advice step by step to make your code do what it should.

But you are just posting unthought out code which doesn't do anything, and wanting us to make it work!

daviferreira
25 Jan 2007, 5:30 AM
The problem is in your onclick call.

Just replace the createDialog(this) with createDialog('879') (or any other code). Also the id of the span must be only the code, since you are adding it to the dialog name in the JS. So it would be:


<span style="text-decoration: underline; cursor: pointer;" id="879" onclick="createDialog('879');">

I've modified your html here: http://www.daviferreira.com/_tmp/dialog.html

Sorry about my english, hope it will help :)

Animal
25 Jan 2007, 5:41 AM
OK, better, but look.

On click, you are adding a click handler. Do you think this is what you need to do?

tryanDLS
25 Jan 2007, 7:43 AM
@Bobafart.

You obviously don't get message that Animal and I have been trying to get across to you and others. If you think we are being unfair/unhelpful, you are advised to take a look at JohnT's thread here http://www.yui-ext.com/forum/viewtopic.php?t=2277. He has asked numerous questions, had issues and struggled, but he's making the attempt and effort to learn what's going on and how to do things. We have continued to help him b/c he is a making the effort, not asking us to build an example to dump on his webpage.

For the benefit of other readers of this thread, I'm posting my response to your PM regarding clarification of my answer further up in this post.



1) Please don't PM me for this type of question - continue the thread in the forum.

2) If you don't understand the concept of debugging thru the code, you are frankly WAY over head and need to take a step back. Learn to use firebug - see this http://www.yui-ext.com/forum/viewtopic.php?t=2211. Take a working example and step thru it with the debugger - look at objects - look at the generated HTML.

3) This is not cut and paste javascript snippets - if you're going to use this and yui-ext, you need to get serious about learning javascript and debugging. Read other posts, even if they don't apply to your situation. Play with examples and make them do new things in order to learn what's going on.

I'm sorry if this comes across as harsh, but there are far too many people in the forum who think they're just going to write a line of code and put something cool on their site with little or no effort. Jack, myself and the other mods spend a huge amount of time providing user support, for 0 compensation, in addition to working fulltime jobs - we are not in a position to build an example for every possible situation, replicate every user's problem for debugging purposes, or hold everyone's hand.


These are not issues regarding use of the library or the documentation or lack of examples. These are basic programming and design issues.
1) Checking a var to see if a dialog has been previously created.
2) Adding an event handler to an element before the event ocurrs, not after.
3) Reading other people's code and understanding what's going on.

Bobafart
25 Jan 2007, 9:12 AM
yeah you are right

I am way in over my head

I guess I will give up on yui-ext and go back to using mootools or dojotookit

jack.slocum
25 Jan 2007, 9:58 AM
It really doesn't matter what library is used. What you are trying to do is lazy initialize a single variable, and use it across multiple function calls. This has nothing to do with the library.

As you said, you are trying to learn from the examples. However, what I see is code that looks nothing like any of the examples:

Global variables and functions instead of the standard (in EVERY example) closure + init() function:

<script language="javascript">
var arrayDialog = new Array();
function createDialog (name){
.....
}
</script>

Legacy event handlers:

onclick="createDialog(this);"

You won't find any code like this anywhere in the examples. So the first step I would recommend is learning how to organize your code (look at the example code blocks) and how to add event handlers outside of the markup (there are lots of examples of this, but i'd be happy to provide a specific one). These things are JavaScript 101 and have nothing to do with the lib you are using.

After you have those two down, you may want to take a look at Ext.DialogManager which has a function Ext.DialogManager.get(id) and use that to lazy initialize your dialogs, or get a reference anywhere.

One thing I would like to note is that no one here is obligated to help you. People take time out of their day to come in here and help people (with nothing in it for them) and I think you should show a little more gratitude and respect. Remember, they are doing you a favor, not the other way around.