Search jQuery

jQuery Forum

Problem with dialogs closing not displaying collapsible-set data previously loaded via AJAX.

in jQuery Mobile • 10 years ago

Hey all,

I am new to jQuery Mobile and have been struggling with this particular issue for several days now.

Essentially what I have is a site with the following url structure:

domain.com/dashboard/ - the landing page, or "homepage".
domain.com/page/ - a page that has a "search" bar and a collapsible-set which has its contents retrieved via AJAX based on what the user enters in the "search" bar.

Here is the source of the page search page which is the page I have problems with:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/css/themes/customtheme.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" class="container">
<div data-role="header" data-position="inline">
<h1>Page Search</h1>
<a href="/" data-icon="home" data-iconpos="left" data-direction="reverse">Home</a>
<a href="/user/logout" data-role="button" data-icon="delete" data-iconpos="right">Logout</a>
</div>
<div data-role="content" data-theme="a">
<input type="search" name="search" id="pageSearchBar" data-ajax="false" />
<div id="pageSearchList" data-role="collapsible-set">
</div>
<script type="text/javascript">
$(function() {
var t;
$("#pageSearchBar").live("keypress", function(e){
if(t != ''){
clearTimeout(t);
}
t = setTimeout(function(){
$.ajax({
url: "/page/search/",
type: "POST",
data: "searchText=" + $('#pageSearchBar').val(),
success: function(data){
$('#pageSearchList').html(data);
$('#pageSearchList .collapsiblePage').collapsible({refresh:true});
$('#pageSearchList .collapsibleOptionButton').button({refresh:true});
}
});
clearTimeout(t);
}, 700);
});
});
</script>
</div>
</div>
</body>
</html>

If I search for a page the collapsible-set gets populated with the following for each of the pages found:

<div data-role="collapsible" data-content-theme="a" class="collapsiblePage">
<h3><?php echo $page->title;?></h3>
<p>
<a href="/page/dialogue/live/" data-rel="dialog" data-transition="pop" data-role="button" data-icon="arrow-r" data-inline="true" class="collapsibleOptionButton" data-iconpos="right">Launch Live Page</a>
<a href="/page/dialogue/preview/" data-rel="dialog" data-transition="pop" data-role="button" data-icon="arrow-r" data-inline="true" class="collapsibleOptionButton" data-iconpos="right">Preview Page</a>
<a href="/page/dialogue/cacheLive/" data-rel="dialog" data-transition="pop" data-role="button" data-icon="arrow-r" data-inline="true" class="collapsibleOptionButton" data-iconpos="right">Clear Cache & Launch</a>
</p>
</div>

As you can see I create 3 buttons - each launches a dialog box, which works perfectly fine. Here is the dialog source:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CodeIgniter & jQuery Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/css/themes/customtheme.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-theme="a" data-position="inline">
<h1><?php echo $pageTitle; ?></h1>
</div>
<div data-role="content" data-theme="a">
// some content
</div>
</div>
</body>
</html>

The problem is the if I access the page search page (/page/) directly via the URL, then search, then click on one of the dialog boxes - when I come to close the dialog the collapsible-set remains populated. However, if I navigate to the /page/ page from the /dashboard/ page first, search, click on a dialog box and then close it - the collapsible-set is empty, the search form is empty and essentially the page search page has been reset back to the original form.

This is annoying because ideally I'd want people to be able to close the dialog box and still view the list of pages in the collapsible-set.

I assume this is something to do with the domCache and I have tried a bag load of things, including enabling domCache globally (which I am uncomfortable with as the size of the DOM could end up being huge). I've tried enabling it just on the search page and that seemed to have no effect.

I'm fresh out of ideas - could any one help me work out how I can ensure that the collapsible-set is always populated with the search results after a dialog is closed. It seems weird that it works if I go straight to /page/ via the URL, but not if I go via another page first.

Thanks in advance.

Owen

Response title

Attachments

jQuery Forum

Problem with dialogs closing not displaying collapsible-set data previously loaded via AJAX.

Statistics

Tags

Actions