PDA

View Full Version : ExtJS + Ajax + Safari never finishes loading



mrtedweb
20 Feb 2010, 6:02 AM
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:


<body>
<div id="content" style="height: 100%;"></div>
</body>
JAVASCRIPT:


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
});

sunco
20 Feb 2010, 9:19 AM
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 "./"

mrtedweb
21 Feb 2010, 6:21 AM
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:



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');

rbastic
23 Feb 2010, 7:30 AM
For this 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:


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.

mrtedweb
23 Feb 2010, 5:52 PM
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.