Here is the code
var URI= "getNDealsAjax.do";
var ajN = $.getJSON(URI, function(data) {
var htmlStr = "";
$.each(data, function(i,item){
htmlStr += "<li><a href='#'>";
htmlStr += "<img src='"+item.merchantImage+"'>";
htmlStr += "</a></li>";
});
alert("htmlStr: "+htmlStr);
$('#ullink').html(htmlStr).trigger('create');
});
<div data-role="page" data-theme="a" id="demo-page" class="my-page" data-url="demo-page">
<div data-role="content">
<ul data-role="listview" id="ullink" data-inset="true">
</ul>
</div>
</div>
I used .trigger('create'); for loading the html from javascript.
Please let me know if any idea how to resolve this
If you are adding just listview content then you need to do it a little bit different:
$('#ullink').html(htmlStr).listview('refresh');
or if that throws an error use this:
$('#ullink').html(htmlStr).listview().listview('refresh');
trigger('create') should be used to enhance whole content and as such it can be used correctly only on a data-role="content" DIV:
Related
I want to navigate to a website's page on the tap event.But I am not sure how to pass a link in the function.
Please suggest !!
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<div data-role="content">
<ul data-role="listview" id="first">
<li>Go Beyond 140 Characters</li>
</ul>
</div>
</div>
<script>
$("#first").bind("tap", function(e) {
});
</script>
Maybe something like:
$("#first").bind("tap", function(e) {
window.location.href = "http://www.tricksfind.in/2014/09/twitlonger-go-beyond-140-characters-in.html";
});
Hope it helps!
JQM AJAX navigation doesn't work well when navigating to a page with an in-page dialog?
page1.aspx:
<div data-role="page">
<div data-role="header">Page 1</div>
<div data-role="content">
<a href='page2.aspx'>Click here</a>
</div>
</div>
page2.aspx:
<div data-role="page">
<div data-role="header">Page 2</div>
<div data-role="content">
Popup
</div>
</div>
<div data-role="dialog" id='popup'> <!-- This is not loaded on AJAX navigation -->
<div data-role="header">Page 2 Popup</div>
<div data-role="content">
Popup content
</div>
</div>
When you click the link from Page 1, it doesn't load the <div data-role='dialog'> of Page 2.
How do you get around this issue?
There is a workaround here. I modified it a little:
$(document).bind('pagecontainerload', function (event, ui) {
// Find all dialogs in the DOM
var response = ui.xhr.responseText;
var data = $(response).find("div[data-role='dialog'],div[data-role='popup']");
for (var i = 0; i < data.length; i++) {
var node = data.eq(i);
if (node.attr('id') && document.getElementById(node.attr('id')))
$('#' + node.attr('id')).remove(); // Delete existing one
node.addClass('cache').appendTo('#form1'); // or appendTo('body')
}
});
I added the class cache for cleanup purpose.
I'm working on a single page application using jquery mobile along with knockout.js binding on MVC4 platform..
This is my button on the main div page:
<div data-role="page" id="pageMain">
<div data-role="content">
View Invoices
</div>
</div>
This is my target div page:
<div data-role="page" id="pageExisting">
<div data-role="header">
<h1>Existing Invoices's</h1>
<a data-rel="back" data-role="button">Back</a>
</div>
<div class="choice_list" data-role="content" data-bind="visible: Headers().length > 0">
<ul id="headersList" data-role="listview" data-bind="foreach: Headers" data-filter-placeholder="Search Invoice" data-filter-theme="a" data-inset="true"
data-filter="true" data-theme="b">
<li>
<a href="#" data-inline="true">
<h2>Invoice No.: <span data-bind="text: inv_no"></span></h2>
<p>Amount.: <span data-bind="text: inv_amt"></span></p>
</a>
</ul>
</div>
</div>
Here is the script section:
var HeaderViewModel = function () {
//Make the self as 'this' reference
var self = this;
self.Headers = ko.observableArray([]);
function GetHeaders() {
//Ajax Call Get All Employee Records
// self.GetHeaders = function () {
$.ajax({
type: "GET",
url: "/api/InvAPI",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
self.Headers(data);
},
complete: function () {
$.mobile.changePage("#pageExisting");
},
error: function (error) {
alert(error.status + "<--and--> " + error.statusText);
}
});
}
self.GetHeader = function () {
GetHeaders();
}
};
$(document).ready(function () {
ko.applyBindings(new HeaderViewModel());
}
When I hit the button "view Invoices" I get a typical Jquery mobile formated listview
but the problem is when I hit the back button and navigate again to the "PageExisiting" div Page I get the list data with no styling..
When viewing page source in both cases, I noticed that on second navigation;
Li tags have not attributes.
I have tried some solutions like: listview refresh, page destroy, page create prior to the line:
$.mobile.changePage("#pageExisting");
with no luck.
I'm stuck here guys and I will appreciate your proposed solutions
Thanks
Refresh list view before showing the page.
$('#pageID').on('pagebeforeshow', function() {
$('[data-role=listview]').listview('refresh');
});
I am trying to load data using ajax, listview works charm on intialpage load, during ajax loading css is not loading.
nearly tried everything, like listview refresh,trigger etc..but nothing works out for me.
please help me
my code:
$('.more').live("click",function() {
var ID = $(this).attr("id");
var CASE = $(".case").attr("id");
var EXTRADATA = $(".extra_data").attr("id");
if(ID) {
$("#more"+ID).find("#loader").css('display', 'block');
$.ajax({
type: "POST",
url: "/ajax.php",
data: "lastpos=" + ID +"&case=" + CASE + "&extradata=" + EXTRADATA,
cache: false,
success: function(html){
$("#video_listing").append(html);
$("#more"+ID).remove(); // removing old more button
}
});
I had tried with
$('#video_listing').listview('refresh');
$(html).trigger('create');
.trigger( "enhance" );
Nothing works out...though lot of topics,covers this question,nothing worksout for me..please help
Here is a quick example: http://jsfiddle.net/Twisty/9SVPN/
JQuery:
$(document).ready(function() {
$('.more').live("click", function() {
$("#myList").append("<li>Added Item</li>");
$("#myList").listview("refresh");
});
});
HTML:
<html>
<head>
<title>Test</title>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h2>Test Page</h2>
</div>
<div data-role="content">
<ul data-role="listview" id="myList">
<li>Item 1</li>
</ul>
<a id="actionBtn" data-role="button" class="more">Add LI</a>
</div>
</div>
</body>
</html>
Your question does not define what HTML is returned or what your HTML looks like before the AJAX event, so I am making somassumptions that your returned data is wrapped within <li></li>. Then you want to perform the .listview("refresh") on the <ul data-role="listview"> or <ol data-role="listview"> itself.
I'm trying to use the autodividersSelector option of a jquery-mobile listview as described in the "Autodividers" section of the List views section of the jquery-mobile documentation.
The list renders fine, but no dividers whatsoever. The function assigned to autodividersSelector just never gets called.
There are some other complexities here like jsrender and such, so I'm leaving them intact, but you'll see them below and I don't expect they are part of the problem. What am I missing?
Relevant code below:
<div data-role="page" id="myListPage">
<div data-role="content">
<ul id="myListView"
data-role="listview"
data-autodividers="true"
>
</ul>
</div><!-- /content -->
</div><!-- /page -->
<script type="text/javascript">
$( "#myListPage" ).on("pagebeforecreate", function(event) {
renderTemplates();
});
function renderTemplates() {
var data = {
testItems: [
{name:1},
{name:2},
{name:3},
]
};
$('#myListView').html(
$('#myTemplate').render(data)
);
}
/********** FORMATTING **********/
$("#myListPage").on("pagecreate", function (event) {
console.log("pagecreate");
$("#myListView").listview({
autodividers: true,
autodividersSelector: function (li) {
console.log("autodividersSelector");
var out = "hi"; //var out = $(li).find("h3").text;
return out;
}
});
$("#myListView").listview("refresh");
});
/********** FORMATTING **********/
</script>
<script id="myTemplate" type="text/x-jsrender">
{{for testItems}}
<li><a href="#">
<h3>Name: {{:name}}</h3>
<p>Test: {{:name}}</p>
</a></li>
{{/for}}
</script>
The document you linked to is experimental. You are trying to implement something that isn't quite finished yet. Notice how the url says test.