jquery mobile and textpattern ... passing variable

jquery mobile and textpattern ... passing variable

I am new to jquery mobile
My scenario:
I simply want to pass the value to different page in same dom. I went
through lot of solution mentioned but could not find exactly how to solve
it. I want to get value passed through url and store in cookies and later
to want to retrieve it
Problem:
I am able to store value in cookies but when i go to page
http://test.com/test121#singlepage?eid= mention below after click event
page content is article detail related to previous cookies. Right content
only gets updated when i refresh the page
$(document).bind("pagebeforechange",function(event,data){
var u = $.mobile.path.parseUrl( data.toPage );
if ( $.mobile.path.isEmbeddedPage( u ) ) {
var u2 = $.mobile.path.parseUrl( u.hash.replace( /^#/, "" ) );
if ( u2.search ) {
if ( !data.options.dataUrl ) {
data.options.dataUrl = data.toPage;
}
var artid = queryStringToObject(u2.search);
data.options.pageData = queryStringToObject( u2.search );
data.toPage = u.hrefNoHash + "#" + u2.pathname;
selectorid = "#"+u2.filename;
selartid = u2.search;
setCookie('artidpage',artid.eid,365);
$.mobile.pageData = data.options.pageData;
}
}
})
<!--------------today------------------>
<div data-role="page" id="today" data-theme="b">
<div id="header" data-role="header" data-theme="b">
<a id="back-button" data-rel="back" data-icon="back"
class="ui-btn-right" style="margin-top:10px;">Back</a>
<h3>Today</h3>
</div>
<div id="main" date-role="content">
<txp:variable name="selected_date"><txp:skp_act_plg
orderby="Posted asc" filter='today'/></txp:variable>
<txp:article_custom limit="9999" section="events" sort="Posted
asc" time="any" id='<txp:variable name="selected_date"/>' >
<a rel="external" class="ui-link-inherit"
href="http://test.com/test121#singlepage?eid=<txp:article_id/>"
id="test">
<h3><txp:title /></h3>
<img class="thumb4 lazyload" width="100" alt=""
data-original='<txp:smd_thumbnail display="url"
id='<txp:custom_field name="article_image" />'/>'
src='<txp:smd_thumbnail display="url"
id='<txp:custom_field name="article_image"
/>'/>'/>
</a>
<txp:excerpt/>
</txp:article_custom>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h4>footer</h4>
</div>
</div>
<!----------------------------single page ----------------------------->
<div data-role="page" id="singlepage" data-theme="b">
<div id="header" data-role="header" data-theme="b">
<a id="back-button" data-rel="back" data-icon="back"
class="ui-btn-right" style="margin-top:10px;">Back</a>
<h3>Single Page</h3>
</div>
<div class="ui-content" data-role="content" role="main">
<script>
</script>
<txp:etc_query data="{?artidpage}" globals="_COOKIE">
<txp:variable name="artid" value='<txp:etc_query
data="{?artidpage}" globals="_COOKIE" />' />
<txp:article_custom id='<txp:variable name="artid"/>' />
<txp:else/>
<p>no cookie no cream</p>
</txp:etc_query>
</div>
<div id="footer" data-role="footer" data-theme="b">
<h4>Mosman Events 2013</h4>
</div>
</div>
Any help appreciated. Note it should be textpattern way