Loading ...
Sorry, an error occurred while loading the content.
 

Re: [ydn-javascript] Re: Initiate YAHOO.util.Event.addListener only after element appears

Expand Messages
  • Adam Moore
    ... Brian, it looks like you are trying to attach the load event after the page has loaded. If you are executing that function only when a checkbox is
    Message 1 of 3 , Jul 7, 2006
      On Fri, Jul 07, 2006 at 07:31:06AM -0000, noshankus wrote:
      > Hi All,
      >
      > sorry for bumping this, but I still can't get it to work.
      > If I leave YAHOO.util.Event.addListener(window,'load',autoCompInit);
      > outside the makeRequest function, then it works... only in the
      > function it doesn't.
      >
      > Any ideas or any suggestions would be really appreciated.
      > Thanks all for your time.
      >
      > Best regards,
      > Brian

      Brian, it looks like you are trying to attach the load event after the page
      has loaded. If you are executing that function only when a checkbox is
      unchecked, you should not need to use addListener at all. Just execute
      autoCompInit directly.

      -Adam

      >
      >
      > --- In ydn-javascript@yahoogroups.com, "noshankus"
      > <briansmailinglists@...> wrote:
      > >
      > > Hi All,
      > >
      > > I'm having a strange problem, which I thought would be easy enough to
      > > implement.
      > >
      > > Basically, I have a checkbox that once unchecked adds a textarea to a
      > > div. Now this text area I want to have a similar example of the
      > > autocomplete "Flat Data Custom PHP Script"
      > > (yui/examples/autocomplete/ysearch_flat.html).
      > >
      > > So, I created the javascript that once the checkbox is checked it
      > > makes a request to see if the div should be populated or not. I also
      > > thought that at that stage I could just add a simple if statement to
      > > find out if the checkbox is unchecked, and in that case kick off the
      > > YAHOO.util.Event.addListener(window,'load',autoCompInit);
      > >
      > > However, this never worked. Adding an extra textarea for testing
      > > puposes and sticking the
      > > YAHOO.util.Event.addListener(window,'load',autoCompInit) outside of my
      > > initial makeRequest function worked...
      > >
      > > So I guess my question is if it's possible to call a
      > > YAHOO.util.Event.addListener at any other time than at the very start
      > > of the page loading? I can't understand why it doesn't work "on the
      > fly".
      > >
      > > Apologies if you don't require the code to understand what I mean, but
      > > I'll add it so anyone can test for themselves.
      > > Here is sample code showing the basic idea:
      > >
      > >
      > > ///////////CODE SNIPET -- test.html//////////////
      > > <html>
      > > <head>
      > > <script src="../../build/yahoo/yahoo.js"></script>
      > > <script src="../../build/dom/dom.js"></script>
      > > <script src="../../build/event/event.js"></script>
      > > <script src="../../build/connection/connection.js"></script>
      > > <script src="../../build/animation/animation.js"></script>
      > > <script src="../../build/autocomplete/autocomplete.js"></script>
      > > </head>
      > > <body>
      > >
      > > <div id="container"></div>
      > > <script>
      > > var div = document.getElementById('container');
      > > var handleSuccess = function(o){
      > > if(o.responseText !== undefined){
      > > div.innerHTML = o.responseText;
      > > }
      > > }
      > > var handleFailure = function(o){
      > > if(o.responseText !== undefined){
      > > }
      > > }
      > > var callback = {
      > > success:handleSuccess,
      > > failure:handleFailure,
      > > argument: { foo:"foo", bar:"bar" }
      > > }
      > > function makeRequest(chek){
      > > var sUrl = "php/get.php?forMe="+chek;
      > > var request = YAHOO.util.Connect.asyncRequest('GET', sUrl,
      > > callback);
      > > if(chek == false) {
      > > YAHOO.util.Event.addListener(window,'load',autoCompInit); }
      > > }
      > >
      > > function validateForm() {
      > > return false;
      > > }
      > >
      > > function autoCompInit() {
      > > oACDS = new YAHOO.widget.DS_XHR("php/array.php", ["\n", "\t"]);
      > > oACDS.responseType = YAHOO.widget.DS_XHR.prototype.TYPE_FLAT;
      > > oACDS.maxCacheEntries = 0;
      > > oACDS.queryMatchSubset = true;
      > >
      > > // Instantiate first auto complete
      > > var myInput = document.getElementById('input1');
      > > var myContainer = document.getElementById('container0');
      > > oAutoComp0 = new
      > > YAHOO.widget.AutoComplete(myInput,myContainer,oACDS);
      > > oAutoComp0.delimChar = ";";
      > > oAutoComp0.queryDelay = 1;
      > > oAutoComp0.formatResult = function(oResultItem, sQuery) {
      > > var sKey = oResultItem[0];
      > > var nQuantity = oResultItem[1];
      > > var sKeyQuery = sKey.substr(0, sQuery.length);
      > > var sKeyRemainder = sKey.substr(sQuery.length);
      > > var aMarkup = ["<div id='result'><div class='query'>",
      > > nQuantity, "</div><span style='font-weight:bold'>", sKeyQuery,
      > > "</span>", sKeyRemainder, "</div>"];
      > > return (aMarkup.join(""));
      > > };
      > > // Subscribe to custom events
      > > oACDS.queryEvent.subscribe(myOnQuery);
      > > oACDS.cacheQueryEvent.subscribe(myOnCacheQuery);
      > > oACDS.getResultsEvent.subscribe(myOnGetResults);
      > > oACDS.getCachedResultsEvent.subscribe(myOnGetCachedResults);
      > > oACDS.dataErrorEvent.subscribe(myOnDataError);
      > > oACDS.cacheFlushEvent.subscribe(myOnCacheFlush);
      > > oAutoComp0.textboxFocusEvent.subscribe(myOnTextboxFocus);
      > > oAutoComp0.textboxKeyEvent.subscribe(myOnTextboxKey);
      > > oAutoComp0.dataRequestEvent.subscribe(myOnDataRequest);
      > > oAutoComp0.dataReturnEvent.subscribe(myOnDataReturn);
      > > oAutoComp0.dataErrorEvent.subscribe(myOnDataError);
      > > oAutoComp0.containerExpandEvent.subscribe(myOnContainerExpand);
      > > oAutoComp0.typeAheadEvent.subscribe(myOnTypeAhead);
      > > oAutoComp0.itemMouseOverEvent.subscribe(myOnItemMouseOver);
      > > oAutoComp0.itemMouseOutEvent.subscribe(myOnItemMouseOut);
      > > oAutoComp0.itemArrowToEvent.subscribe(myOnItemArrowTo);
      > > oAutoComp0.itemArrowFromEvent.subscribe(myOnItemArrowFrom);
      > > oAutoComp0.itemSelectEvent.subscribe(myOnItemSelect);
      > >
      > oAutoComp0.selectionEnforceEvent.subscribe(myOnSelectionEnforce);
      > >
      > > oAutoComp0.containerCollapseEvent.subscribe(myOnContainerCollapse);
      > > oAutoComp0.textboxBlurEvent.subscribe(myOnTextboxBlur);
      > >
      > > // Define custom event handlers
      > > function myOnQuery(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > var oParent = aArgs[1];
      > > var sQuery = aArgs[2];
      > > }
      > >
      > > function myOnCacheQuery(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > var oParent = aArgs[1];
      > > var sQuery = aArgs[2];
      > > }
      > > function myOnGetResults(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > var oParent = aArgs[1];
      > > var sQuery = aArgs[2];
      > > var aResults = aArgs[3];
      > > }
      > >
      > > function myOnGetCachedResults(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > var oParent = aArgs[1];
      > > var sQuery = aArgs[2];
      > > var aResults = aArgs[3];
      > > }
      > >
      > > function myOnDataError(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > var oParent = aArgs[1];
      > > var sQuery = aArgs[2];
      > > var sMessage = aArgs[3];
      > > }
      > >
      > > function myOnCacheFlush(sType, aArgs) {
      > > var oDataSource = aArgs[0];
      > > }
      > > function myOnTextboxFocus(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > }
      > >
      > > function myOnTextboxKey(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var nKeyCode = aArgs[1];
      > > }
      > >
      > > function myOnDataRequest(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var sQuery = aArgs[1];
      > > }
      > >
      > > function myOnDataReturn(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var sQuery = aArgs[1];
      > > var aResults = aArgs[2];
      > > }
      > >
      > > function myOnDataError(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var sQuery = aArgs[1];
      > > }
      > >
      > > function myOnContainerExpand(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > }
      > >
      > > function myOnTypeAhead(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var sQuery = aArgs[1];
      > > var sPrefill = aArgs[2];
      > > }
      > >
      > > function myOnItemMouseOver(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var oItem = aArgs[1];
      > > }
      > > function myOnItemMouseOut(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var oItem = aArgs[1];
      > > }
      > >
      > > function myOnItemArrowTo(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var oItem = aArgs[1];
      > > }
      > >
      > > function myOnItemArrowFrom(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var oItem = aArgs[1];
      > > }
      > >
      > > function myOnItemSelect(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > var oItem = aArgs[1];
      > > var sMsg = (oItem) ? oItem.id : "a non-query-result";
      > > }
      > >
      > > function myOnSelectionEnforce(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > }
      > > function myOnContainerCollapse(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > }
      > >
      > > function myOnTextboxBlur(sType, aArgs) {
      > > var oAutoComp = aArgs[0];
      > > }
      > > }
      > >
      > >
      > > </script>
      > > <form name=form>
      > > Note: Only using the number 0 will work in the drop down box as this
      > > is just for testing purposes
      > > <input type=checkbox name=forWho checked
      > > onclick="makeRequest(document.form.forWho.checked);">
      > > <br/><div id="boxOrNot"></div>
      > > <br/><input id="input1" type="text"><div id="shadow0"><div
      > > id="container0"></div></div>
      > >
      > > </form>
      > >
      > > </body>
      > > </html>
      > >
      > > ////////END test.html SNIPET//////////
      > >
      > >
      > >
      > > ////////CODE SNIPET -- php/array.php/////////
      > > <?php
      > >
      > > header('Content-type: text/plain');
      > > $search_queries = initArray();
      > > $query = $_GET['query'];
      > > $results = search($search_queries, $query);
      > > sendResults($query,$results);
      > >
      > > function search($search_queries, $query) {
      > > if (strlen($query) == 0) { return; }
      > >
      > > $query = strtolower($query);
      > > $firstChar = $query[0];
      > > if (!preg_match('/[0-9a-z]/',$firstChar,$matches)) {
      > > return;
      > > }
      > > $charQueries = $search_queries[$firstChar];
      > > $results = array();
      > > for($i = 0; $i < count($charQueries); $i++) {
      > > if
      > > (strcasecmp(substr($charQueries[$i],0,strlen($query)),$query) == 0) {
      > > $results[] = $charQueries[$i];
      > > }
      > > }
      > > return $results;
      > > }
      > >
      > > function sendResults($query,$results) {
      > > for ($i = 0; $i < count($results); $i++) {
      > > print "$results[$i]\n";
      > > }
      > > }
      > >
      > > function initArray() {
      > >
      > > return array(
      > > '0' => array(
      > > "00000000 1082",
      > > "007 25010",
      > > "007post 2872",
      > > "01 4948",
      > > "04 2277",
      > > "071641815056 1078",
      > > "0 apr credit cards 2103",
      > > "0x80004005 1033",
      > > ));
      > >
      > > }
      > > ?>
      > > ////////END php/array.php SNIPET//////////
      > >
      > >
      > > ///////CODE SNIPET -- php/get.php /////////
      > >
      > > <?php
      > >
      > > if($_GET[forMe] == 'true') {
      > > print <<<EOM
      > > <input id="input0" type="text"><div id="shadow0"><div
      > > id="container0"></div></div>
      > > EOM;
      > > } else {
      > > }
      > > ?>
      > >
      > > ////////END php/get.php SNIPET/////////////
      > >
      > >
      > > I hope someone can understand what I'm talking about. If not, I'd be
      > > happy to clarify any questions you may have.
      > >
      > > I'm really digging this yui stuff =)
      > >
      > > Best regards,
      > > Brian
      > >
      >
      >
      >
      >
      >
      >
      >
      >
      >
      > Yahoo! Groups Links
      >
      >
      >
      >
      >
      >
      >
      >

      --
    Your message has been successfully submitted and would be delivered to recipients shortly.