Results 1 to 5 of 5

Thread: ExtJS + Ajax + Safari never finishes loading

  1. #1

    Thumbs up ExtJS + Ajax + Safari never finishes loading

    Hello everyone,

    ARGHHHH! I'm trying to load external html content into a div tag. My code below works great in all browsers EXCEPT Safari 4.0.4 (it never stops loading). I've drilled it down to the line of code that calls update(). Can anyone tell me what I'm doing wrong?

    HTML:
    HTML Code:
    <body>
        <div id="content" style="height: 100%;"></div>
    </body>
    JAVASCRIPT:
    Code:
    onPageLoad = function(response, options)
    {
        Ext.get('test').update(response.responseText);  //throws safari onto an endless loading loop??
        alert('AJAX loaded successfully.');  //This line will still get called though.
    };
    
    onPageError = function(response, options)
    {
        alert('Error loading AJAX content.');  //This never gets called (at least not yet)
    };
    
    
    Ext.get('content').createChild({'tag': 'div', 'id': 'test'});  //Create a child node
    Ext.Ajax.request({
        url: './test.html',
        success: onPageLoad,
        failure: onPageError,
        disableCaching: true,
        scope: this
    });

  2. #2
    Ext User
    Join Date
    Mar 2009
    Location
    Sinaloa, Mxico
    Posts
    102

    Default

    No problems here on my Safari 4.0.4

    What test.html contain ?

    Btw, if the file is on the same folder you don't need "./"

  3. #3

    Default

    It seems to be tied into the display attribute for the DIV. If a DIV display attribute is set to 'none' then Safari will go into some type of endless loading loop. I plan to load several divs and need to hide/show them according to user interaction. Is there a recommended way to do this? It is pretty straightforward in jQuery but ExtJS seems to be a little more difficult. I was hoping to write some kind of funtion like below:

    Code:
    var currentPage = 'page1';
    
    showPage = function(pageName)
    {
        //Hide current page
        Ext.get(currentPage).setVisibilityMode(Ext.Element.DISPLAY);
        Ext.get(currentPage).hide();
            
        //Redefine currentPage
        currentPage = pageName;
                
         //Show current page
         Ext.get(currentPage).show();
    };
    
    showPage('page2');

  4. #4

    Default Hrm

    For this code:
    Code:
    onPageLoad = function(response, options)
    {
        Ext.get('test').update(response.responseText);  //throws safari onto an endless loading loop??
        alert('AJAX loaded successfully.');  //This line will still get called though.
    };
    Why not:
    Code:
    Ext.get('test').dom.innerHTML = ""; // to clear it
    Ext.get('test').insertHtml('beforeEnd', response.responseText); // to put the html in there properly
    Additionally, instead of creating a child 'test' div inside 'content', you could try making a regular panel inside 'content' with an id of 'test' and populating that. I'm using that approach with a TabPanel of tabs containing panel objects (populating the panels) and it is working 100% correctly in my simple tests.

  5. #5

    Default

    rbastic,

    Thanks for the suggestion. The interface needs to switch back and forth between pages. I'm wanting to store the HTML in div tags instead of variables and having to re-insert HTML each time a page is called. Eventually I'm going to port this as a mobile site using Core ExtJS so I'm avoiding components like panels.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •