1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    j555 is on a distinguished road

      0  

    Default help with asyncRequest

    help with asyncRequest


    I can't seem to figure out how to make a div id available after I reload the div via a php include statement. Here is what I am doing. I have a layout where one section of the layout reloads another div. The div works initially and properly reloads thelist.php upon a keyup but upon a reload the script stops working and does nothing upon a keyup. The code in the reloaded div is as follows:

    <script language="JavaScript" type="text/javascript">
    <!--
    YAHOO.example = function() {
    return {
    init : function() {
    YAHOO.util.Event.on('getList', 'keyup', this.getListCall);
    },
    keywordCall : function(e) {
    currentListItem = document.getElementById('getList').value;
    var getResults = new connectionWrapper('thelist.php?getList='+currentListItem, 'inner2');
    YAHOO.util.Event.stopEvent(e);
    }
    }
    }();
    YAHOO.util.Event.on (window, 'load', YAHOO.example.init, YAHOO.example, true);
    //-->
    </script>

    List by:

    Item: <input type="text" name="getList" id="getList" size="15" style="font-size:9px; font-family:tahoma, verdana, helvetica" />

    I know the listener is no longer listening on the reloaded input but I don't know how to recreate the listener. I thought the code above would do it. The initial layout calls this script using an include statement and when the div is refreshed by another layout item, the same include statement again calls this script. Any help would be greatly appreciated.

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    If you load that code dynamically, the script won't execute.

    The window is loaded, the "load" event will never fire again.

    You need to know whether markup you generate is for a whole page, or a fragment.

    If for a whole page, you can use window's "load" event to start your stuff off.

    If you are outputting a fragment, just go ahead and execute script. The code is not eval'd until the new content is loaded into the DOM.

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    j555 is on a distinguished road

      0  

    Default


    I am new to javascript. I thought the line:

    YAHOO.util.Event.on (window, 'load', YAHOO.example.init, YAHOO.example, true);

    would start off the script.

    I am reloading the entire page in the php include statement so what would a window's "load" event look like to start the script on this page?

    I have been playing with this and I can't seem to figure this out.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    That code should run on window load. Just not if it's "reloaded in another div".

    Basically I have no idea what you are doing. You initial writeup was all over the place. Do you have a link to the page you are building?

  5. #5
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    j555 is on a distinguished road

      0  

    Default


    The script I am working on is local with no routable address so unfortunately I can't send a link.

    I know my explanation was confusing so I will try again.

    My initial page is a yui-ext layout that has north, east and center regions. When a link is clicked in the east region, the north area is reloaded using an asyncRequest through a connectionWrapper function. The north region has a key listener and when there is a keyup effect, the center area should reload. The north region works upon the initial load of the page. However, when a link is clicked in the east region, the north region is reloaded and the keyup listener stops working.

    As for the DIV tags, they look like this:

    <div id="north" class="ylayout-inactive-content">
    <? include_once("north.php"); ?>
    </div>
    <div id="east" class="ylayout-inactive-content">
    <? include_once("east.php"); ?>
    </div>
    <div id="center" class="ylayout-inactive-content">
    <? include_once("center.php"); ?>
    </div>

    When a link is clicked in the east region the following function is called which should reload the north region:

    function eastCalled(link){
    var changeNorth = new connectionWrapper('north.php?link='+link, 'north');
    }

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    It's hard to tell without seeing your complete code, but I'd guess that you are overwriting your north content without reattaching your event handlers. The handlers are attached to a specific instance of an object, and if you create a new instance of that object or overwrite it, you have to reattach those handlers (or create new ones) to the new object. If you only create the handlers once (on page load) but overwrite them during the page lifecycle, you'll have to manage that during your process somewhere. If you can't get it figure out, post your complete code that shows the lifecycle of what you're doing.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    If you attach a key listener to the Element of the ContentPanel that you add to the north Region, or the Element of the Region, that should persist across updates. It's if you attach the key listener to elements [b]within[/n] the ContentPanel that they will stop working because those elements are completely wiped out when the update occurs.

  8. #8
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    j555 is on a distinguished road

      0  

    Default


    Here is the code with the non-working listener. Thanks for the help up till now, but I still can't get it to work. When the center contentpanel is updated, the listener no longer works. Feel free to let me know everything I am doing wrong here. As I said before I am new to javascript and want to do things the correct way. Thanks again for all the help.

    <html>
    <head>
    <title>Title</title>
    <script type="text/javascript" src="js2/utilities_2.1.0.js"></script>
    <script type="text/javascript" src="js2/yui-ext.js"></script>

    <script language="JavaScript" type="text/javascript">
    function connectionWrapper(url, id) {
    var connectUrl = url;
    var connectID = id;
    var handleSuccess = function(o){
    document.getElementById(connectID).innerHTML = o.responseText;
    }
    var handleFailure = function(o){
    // Failure handler
    alert("Unable to load requested page : " + o.status + " " + o.statusText);
    }
    var callback =
    {
    success:handleSuccess,
    failure:handleFailure
    }
    YAHOO.util.Connect.asyncRequest('GET', connectUrl, callback, null);
    }
    </script>


    <script language="JavaScript" type="text/javascript">
    function eastCalled(link){
    var changeNorth = new connectionWrapper('north.php?link='+link, 'north');
    var changeEast = new connectionWrapper('east.php?link='+link, 'east');
    var changeCenter = new connectionWrapper('center.php?link='+link, 'center');
    }

    </script>

    <link rel="stylesheet" type="text/css" href="css2/reset-min.css" />
    <link rel="stylesheet" type="text/css" href="css2/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css2/grid.css"/>

    <script type="text/javascript">
    Example = function(){
    return {
    init : function(){
    layout = new YAHOO.ext.BorderLayout(document.body, {
    hideOnLayout: true,
    north: {
    autoScroll: false
    },
    west: {
    split:true,
    autoScroll: true,
    initialSize: 150,
    titlebar: true,
    collapsible: true,
    minSize: 100,
    maxSize: 200
    },
    east: {
    split:true,
    initialSize: 100,
    titlebar: true,
    collapsible: true,
    minSize: 100,
    maxSize: 200
    },
    center: {
    autoScroll: false
    }
    });
    layout.beginUpdate();
    layout.add('north', new YAHOO.ext.ContentPanel('north', {fitToFrame:true, closable:false}));
    layout.add('east', new YAHOO.ext.ContentPanel('east', {title: 'East', fitToFrame:true, closable:false}));
    layout.add('center', new YAHOO.ext.ContentPanel('center', {title: 'Center', fitToFrame:true, closable:false}));
    layout.endUpdate();
    }
    }

    }();
    YAHOO.ext.EventManager.onDocumentReady(Example.init, Example, true);
    </script>
    </head>
    <body class="ytheme-blue">
    <div id ="container">
    <div id="north" class="ylayout-inactive-content">
    <? include_once("north.php"); ?>
    </div>
    <div id="east" class="ylayout-inactive-content">
    <? include_once("east.php"); ?>
    </div>
    <div id="center" class="ylayout-inactive-content">
    <? include_once("center.php"); ?>
    </div>
    </div>

    </body>
    </html>


    north.php
    //this is where I am having my problems. When the north.php page is reloaded, my listener stops working.
    <script language="JavaScript" type="text/javascript">
    <!--
    YAHOO.example = function() {
    return {
    init : function() {
    YAHOO.util.Event.on('getList', 'keyup', this.getListCall);
    },
    getListCall: function(e) {
    currentListItem = document.getElementById('getList').value;
    var getResults = new connectionWrapper(center.php?getList='+currentListItem, 'center');
    YAHOO.util.Event.stopEvent(e);
    }
    }
    }();
    YAHOO.util.Event.on (window, 'load', YAHOO.example.init, YAHOO.example, true);
    //-->
    </script>

    Item: <input type="text" name="getList" id="getList" size="15" style="font-size:9px; font-family:tahoma, verdana, helvetica" />

    east.php
    //this page updates both other contentpanels when a link is clicked.
    Link1
    Link2
    Link3

    center.php
    //this needs to use what ever was typed in the listener in the north.php page.
    <? $listItem=$_REQUEST['getList'];
    echo $listItem;
    ?>

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,545
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    You call getListCall on key down. Where is that?

  10. #10
    Ext User
    Join Date
    Mar 2007
    Posts
    28
    Vote Rating
    0
    j555 is on a distinguished road

      0  

    Default


    getListCall now refers to a function that exists. I changed the function name by editing the prior post. I hope someone can figure out what I am doing wrong. Thanks for the help up till now.

Similar Threads

  1. YAHOO.util.Connect.asyncRequest Alternative
    By manugoel2003 in forum Community Discussion
    Replies: 15
    Last Post: 24 May 2007, 5:42 AM
  2. A question about the callback function of asyncRequest
    By suamt in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 9 Feb 2007, 4:31 AM
  3. Member Variables for AsyncRequest
    By Domitian in forum Ext 1.x: Help & Discussion
    Replies: 5
    Last Post: 30 Jan 2007, 2:01 PM
  4. asyncRequest POST, but nothing is posted
    By moraes in forum Ext 1.x: Help & Discussion
    Replies: 13
    Last Post: 21 Dec 2006, 4:14 AM
  5. asyncRequest
    By pomata in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 2 Dec 2006, 11:51 PM

Thread Participants: 3