Databases
StackOverflow2013
Postsdbo
POHow to append the content dynamically at swipe the page in jquery mobile
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to append the content dynamically at swipe the page in jquery mobile
    text
    copied!<p>I am trying to append the content dynamically when i swipe the page i try the following method</p> <p>JS part:</p> <pre class="lang-js prettyprint-override"><code>var i = 2; $(document).on('pagebeforeshow ', function () { loadPage(i); }); function loadPage(index) { $.ajax({ url: "connection.php", type: "POST", datatype: 'json', data: { "pageIndex": index }, beforeSend: function (a, b) { $.mobile.showPageLoadingMsg(); }, success: function (result) { var a = $.parseJSON(result); $('.primarycontent').append('&lt;img src="images/' + a.report + '" /&gt;'); $.each(a.controls, function (j, row) { if (row.controltype == "dropdown") { var selectarray = row.controlvalues.split(","); addDropDown(selectarray, j); } if (row.controltype == "button") { var urlvalue = row.controlvalues; addButton(urlvalue, j); } }); }, complete: function () { $.mobile.hidePageLoadingMsg(); }, error: function (request, error) { alert('Network error has occurred please try again!'); } }); var dropdown_array = []; function addDropDown(values, count) { var selectElm = $("&lt;select/&gt;"); selectElm.attr({ 'name': 'dropdown-' + count, 'id': 'dropdown-' + count }).appendTo('#dropdownplace'); dropdown_array.push('dropdown-' + count); $.each(values, function (a, b) { selectElm.append($("&lt;option/&gt;").attr("value", b).text(b)).appendTo('#dropdown-' + count); }); $('select').selectmenu(); return; } function addButton(url, count) { for (m = 0; m &lt; dropdown_array.length; m++) { var selected_dropdown = $("#" + dropdown_array[m]); // alert(selected_dropdown.val()); } $('#buttonPlaceHolder').append('&lt;a href="' + url + '" data-role="button"&gt;Refresh&lt;/a&gt;'); // refresh jQM controls $('#home2').trigger('create'); //myselect[0].selectedIndex = 3; //var button = $("&lt;a/&gt;"); //button.attr({'href':url+}); return; } } $(document).off('swipeleft').on('swipeleft', 'div[data-role="page"]', function (event) { if (event.handled !== true) // This will prevent event triggering more then once { alert(hi); var nextpage = $.mobile.activePage.next('div[data-role="page"]'); // swipe using id of next page if exists if (nextpage.length &gt; 0) { alert(hi); i++; $.mobile.changePage(nextpage, { transition: "slide", reverse: false }, true, true); loadPage(i++); } event.handled = true; } return false; }); $(document).off('swiperight').on('swiperight', 'div[data-role="page"]', function (event) { if (event.handled !== true) // This will prevent event triggering more then once { var prevpage = $(this).prev('article[data-role="page"]'); if (prevpage.length &gt; 0) { $.mobile.changePage(prevpage, { transition: "slide", reverse: true }, true, true); } event.handled = true; } return false; }); </code></pre> <p>index.html:</p> <pre class="lang-html prettyprint-override"><code> &lt;div data-role="page" id="home2"&gt; &lt;!-- Header --&gt; &lt;div data-role="header" class="header1" data-theme="b"&gt; &lt;h1&gt;Group:Group Name&lt;/h1&gt; &lt;a data-role="button" data-rel="back" data-icon="arrow-l"&gt;Search&lt;/a&gt; &lt;/div&gt; &lt;!-- Content --&gt; &lt;div data-role="content"&gt; &lt;div&gt; &lt;div id="dropdownplace"&gt;&lt;/div&gt; &lt;div id="buttonPlaceHolder"&gt;&lt;/div&gt; &lt;div class="primarycontent"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Footer --&gt; &lt;div data-role="footer" data-id="persistantFooter" data-position="fixed" class="nav-glyphish-example"&gt; &lt;div data-role="navbar" class="nav-glyphish-example" data-grid="c"&gt; &lt;ul&gt; &lt;li&gt;&lt;a href="#" id="home" data-icon="custom"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" id="feeds" data-icon="custom"&gt;Feeds&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" id="secure" data-icon="custom" class="ui-btn-active"&gt;Secure&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="#" id="contacts" data-icon="custom"&gt;Contacts&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>now i want to append the content when i swipe left or right i send the index value to my connection.php.I want to like this <a href="http://www.coldfusionjedi.com/demos/artbrowse" rel="nofollow">demo</a> from this <a href="http://www.raymondcamden.com/index.cfm/2011/3/26/Another-experiment-in-jQuery-Mobile-swipe-navigation" rel="nofollow">link</a></p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload