This is my jquery mobile page header section i want to populate my dynamically populated data from javascript to navigation bar in this code.
<div data-role="page" data-theme="a" id="homePage" >
<div data-theme="a" data-role="header" data-position="fixed">
<h3 class="mblHeading">Client</h3>
<a data-rel="dialog" data-position-to="window" data-transition="slidedown" data-theme="a" data-mini="true" href="#AboutDialog" class="ui-btn-right"> About </a>
<div data-role="navbar" >
<ul id="navid">
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
My java script code for dynamically populating the content.Here querytableid is navid.navigationList is an array
function populateQueryList4(queryTableID)
{
var listParent = jq(queryTableID);
listEntry = document.createElement("LI");
aNode = document.createElement("A");
aNode.innerHTML=navigationList[k-1];
listEntry.appendChild(aNode);
aNode.onclick = function() {
//displayArtifactContent(artifactAreaInfoMap[wiTitle]);
};
listParent.append(listEntry);
jq("#navid").navbar('refresh');
}
Unfortunately you cant populate navbar just like that. Functions navbar() and navbar('refresh') are not going to help you here, not trigger('create') or trigger('pagecreate'). For some reason, when you dynamically add additional navbar item it will not be styled as it should and this is an error.
There are 2 alternative ways how it can be done.
Dynamically populate navbar during the pagecreate or pagebeforecreate page venet.
Basically during those 2 events page is style not styled according to jQuery Mobile styles. So any added content at this point will be enhanced automatically.
Here's a working jsFiddle example for you: http://jsfiddle.net/Gajotres/SJG8W/
$(document).on('pagebeforecreate', '#index', function(){
$('[data-role="navbar"]').html('<ul>' +
'<li>By Brand</li>' +
'<li>By Flavor</li>' +
'<li>Zero Nicotine</li>' +
'</ul>');
});
Manually enhance dynamically added navbar items
Other solution is to do it by yourself. It is not complicated as you will see in a working example: http://jsfiddle.net/Gajotres/V6nHp/
$('#index').live('pagebeforeshow',function(e,data){
navbarHandler.addNewNavBarElement('navbar-test','el4','Page Four');
});
var navbarHandler = {
addNewNavBarElement:function(navBarID, newElementID, newElementText) {
var navbar = $("#" + navBarID);
var li = $("<li></li>");
var a = $("<a></a>");
a.attr("id", newElementID).text(newElementText);
li.append(a);
navbar = navbarHandler.clearNavBarStyle(navbar);
navbar.navbar("destroy");
li.appendTo($("#" + navBarID + " ul"));
navbar.navbar();
},
clearNavBarStyle:function(navbar){
navbar.find("*").andSelf().each(function(){
$(this).removeClass(function(i, cn){
var matches = cn.match (/ui-[\w\-]+/g) || [];
return (matches.join (' '));
});
if ($(this).attr("class") == "") {
$(this).removeAttr("class");
}
});
return navbar;
}
}
Comments
As you can see for this method to work you must understand how jQuery Mobile page events work, to find out more take a look at my other answer: jQuery Mobile: document ready vs page events.
Also take a look at my other answer regarding enhancement of jQuery Mobile pages markup: jQuery Mobile: Markup Enhancement of dynamically added content
Related
Why is this code not displaying all the data. It cuts off the display.
<script type="text/javascript">
$(document).ready(function() {
var url = "http://xxxxxxx/integration/json_news.php";
$.getJSON(url, function(result) {
console.log(result);
$.each(result, function(i, field) {
var source = field.source;
var summary = field.summary;
var heading = field.heading;
var news_date = field.news_date;
$("#newsview").append("<tr class='even gradeA' width = '30px'><td><li><b>"+heading+" - "+news_date+"</b> <br />"+summary+"</i></li><br /></td></tr>");
});
});
});
</script>
This is the DIV I am calling the ajax code.
<!--NEWS PAGE -->
<div data-page="news" class="page cached">
<div class="page-content">
<div id="newsview"></div>
</div>
</div>
I am using IntelXDK and building a Framework7 hybrid application
Somehow I can figure out why this is so when I test on the mobile phone. Could it be that Framework7 doesnot display data beyond certain size? Or my code is faulty somehow.
Unfortunately your js-generated HTML is not valid.
You're appending table rows tr to div. They also contain li.
tr should be a child node of table and li should be a child node of ul or ol.
Also width = '30px' should be without spaces: width='30px'.
BTW, do you really want so narrow container for your content?
And you have closing </i> tag which does not have open <i> before.
I suggest the following:
$("#newsview").append(
'<div class="even gradeA"><b>'+
heading+ ' - ' +news_date+
'</b><br><i>' +summary+ '</i></div>'
);
And then use CSS to style it.
So I have this thing where I need one div to be shown at any one time depending on the button clicked. I found this great fiddle which is almost perfect except for the fact that it doesn't show when one link is selected. I'd like to have it so that the link that's selected can have a sort of active class or look different from the other links. Is that possible? I've been looking through questions and I can't really find an answer for this.
If anyone's interested, I'm using it for this (but the code is really messed up, sorry). (I'd also like to change the filter buttons on the top row to reset and filter all the images, but am aware that's a different question. Still any help would be appreciated!)
html
<div id="linkwrapper">
<a id="link1" href="#">link1</a><br/>
<a id="link2" href="#">link2</a><br/>
<a id="link3" href="#">link3</a>
</div>
<div id="infocontent">
<div id="link1content">Information about 1.</div>
<div id="link2content">Information about 2.</div>
<div id="link3content">Information about 3.</div>
</div>
jquery
$(document).ready(function(){
$("#infocontent").hide();
$("#infocontent div").hide();
$('#linkwrapper a[id]').click(function(){
var vsubmen = this.id +"content";
if( $("#infocontent").is(":visible") == false ) {
$("#" + vsubmen).show('fast',function() {
$("#infocontent").slideDown();
});
} else if ( $("#" + vsubmen).is(":visible") == false ) {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
$("#" + vsubmen).show();
$("#infocontent").slideDown('slow');
});
} else {
$("#infocontent").slideUp('slow',function(){
$("#infocontent div").hide();
});
}
return false;
});
});
You can simplify that fiddle like this:
$('a[id^=link]').click(function(){
$('a[id^=link]').removeClass('meactive');
$(this).addClass('meactive');
$('#infocontent>div').slideUp();
var tmp = this.id;
$('#'+tmp+'content').slideDown();
}); //end a.click
jsFiddle Demo
Notes:
(1) $('a[id^=link]') -- grabs all a elements with a ID that starts with link
(2) $('#' +tmp+ 'content') -- builds selectors like: $('#link3content)`
I have a page shows a list of rows and with a pagination, when you click on next page the next page loads in same page contains another list of rows. so basically next page loads a bunch of other rows without my exact page been reloaded
So the problem im haven is i use this script below while it works fine but when the next page loads in same window this script does not work for them.
I hope i make sense here :) what is a good solution for this?
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
if (data.stream === null) {
span.html(
'<strong class="ipsOnlineStatus ipsOnlineStatus_offline"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta">Offline</div>');
} else {
var views = data.stream.viewers;
var game = data.stream.game;
span.html(
'<strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta"> ' + views + ' viewers </div><div class="ipsDataItem_meta">Playing: '+ game +' </div>');
}
$(function() {
var online = $('.ipsOnlineStatus_online').closest('.cCmsRecord_row');
var first = $('.cCmsRecord_row')[0];
online.each(function() {
$(first).before(this);
});
});
short of HTML
<ol class="List">
<li class="row">
<div class="main">
<a href="#" class="ease">
<div class="ltwitch" data-tnick="esl_lol"></div>
</a>
</div>
</li>
<li class="row">
<div class="main">
<a href="#" class="ease">
<div class="ltwitch" data-tnick="esl_lol"></div>
</a>
</div>
</li>
....
....
....
</ol>
<div data-role="tablePagination">
<ul class="ipsPagination">
<li class="ipsPagination_prev ipsPagination_inactive">Prev</li>
<li class="ipsPagination_next">Next</li>
</ul>
</div>
It sounds like you want to wrap your work in a named function so you can call it on subsequent paging. Your code right now is most likely in a document ready which is only called on initial page load. Turning all of that work into a function now allows it to be called many times.
function myFunction () {
...
};
myFunction();
Then where your pagination code is set up ( I figure an anchor click binding ) just call myFunction() again.
$('.ipsPagination_next').click(function(){
...
myFunction();
});
I would note that if these two areas are in different document ready functions or different files, ideas like scope and encapsulation might become problematic. We'd have to see more code to confirm if it would be an issue. If you are having problems you could put the function myFunction() onto the root which would be outside of any document ready, load, or whatever you might be using. Then it would be on the root or window level.
window.myFunction = function () {
...each(... your current work
};
This could be used if you aren't sure about encapsulation or how scope works.
Your $('.ltwitch') selector only captures the classes present in the first page. When a subsequent page is loaded, $('.ltwitch') is not executed again on the new classes.
I suggest that you somehow differentiate between classes corresponding to already loaded pages, and classes corresponding to new pages. You could do this by adding a class, e.g. .already-loaded to the classes as you load them.
$.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
$(this).addClass('already-loaded'); // Mark as loaded.
...
This way, replace your first line with this:
$('.ltwitch').not('.already-loaded').each(function () {
...
Not tested, but could work.
I'am using jquery mobile 1.3.2 for my web project.
The following code creates a panel for all pages:
function injectPanelIntoAllPages(){
console.log("IncetPanel");
var panel = '<div data-role="panel" id="mypanel" data-position="left" data-display="push">' +
'<div><ul data-role="listview" id="history"></ul></div> </div>';
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
$(document).on('pagebeforeshow', '[data-role=page]', function () {
$(this).trigger('pagecreate');
});
});
}
Now i want to add (dynamically) list items to the listview in the panel, but it don't works.
For adding list items i use the following method:
function addToHistory(value) {
$("#history").append(
"<li id='history-element'>" + value + "</li>");
$("#history").listview("refresh");
}
What can i do to solve this issue?
Note that you're using same Id for both panel and listview. This isn't recommended, however, it still can work as long as you specify which element to target within active page.
Another note, you don't need to call any enhancement method once you append panels dynamically, since you append them on pagebeforecreate. They will be created/initialized by jQM on that event.
$(document).on('pagebeforecreate', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
To append elements into listview, you need to look for it into active page's. Otherwise, new elements will be added to first element with #history ID.
var listview = $.mobile.activePage.find("#history");
listview.append("elements").listview("refresh");
Demo
I have a task to highlight the menu as selected while loading the page. For that I have the following code:
$('.menuHeader').each(function () {
$(this).attr('id', 'menu' + ($(this).index() + 1));
$(this).val($(this).index() + 1);
// Set the dynamic ids for links
$(this).find('a').attr('id', 'link' + ($(this).index() + 1));
//alert('New ID : ' + $(this).find('a').attr('id'));
});
$('.menuHeader a').click(function () {
alert("a");
$('.menuHeader a').removeClass('menuHeaderActive');
$(this).parent().parent(".menuHeader").addClass('menuHeaderActive');
});
But when I select the second menu, it's refreshed and missing the selection.
HTML:
<div class="menuBar">
<div class="menuHeader ui-corner-top menuHeaderActive">
<span>Home</span>
</div>
<div class="menuHeader ui-corner-top">
<span>New Transaction</span>
</div>
</div>
How can I solve this problem?
function Home() {
window.location.href = "../../home/welcome";
}
function NewTransaction() {
window.location.href = "../../EnergyCatagory/index";
}
I think you could amend your hyperlinks to include the correct url. Then in you jQuery test the browsers current url against the hyperlinks url - if it's a match apply your menuHeaderActive class.
$(document).ready(function () {
var currentUrl = window.location.href;
var menuLink = $('.menuHeader a[href="' + currentUrl + '"]');
menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});
When the page reloads after one of the menu links have been clicked the script I've shown should run and $('.menuHeader a[href="' + currentUrl + '"]'); should find the menu link (hyperlink/a-tag) that matches the url the user navigated too. Then it's a case of finding the container div and adding your class.
Basically you don't add the css class when the user clicks the menu link; you have to set the css class after the page has redirected to the other page. So it's the other page that has to set the css class against the correct active menu link. There are 100's of ways to do this but based on what you've provided matching urls is the simplest.
Personally I'd have each page register a page id that corresponds to one of the menu links. Something like this...
HTML
Note the attribute data-associated-page-id added to each menuHeader div
<div class="menuBar">
<div class="menuHeader ui-corner-top" data-associated-page-id="home-welcome">
<span>Home</span>
</div>
<div class="menuHeader ui-corner-top" data-associated-page-id="energy-catagory-index">
<span>New Transaction</span>
</div>
</div>
Javascript
Added to each page
document ready handler for welcome page aka ../../home/welcome
$(document).ready(function () {
SetActiveMenuCssClass('home-welcome');
});
document ready handler for energy catagory index page aka ../../EnergyCatagory/index
$(document).ready(function () {
SetActiveMenuCssClass('energy-catagory-index');
});
function defined globally
function SetActiveMenuCssClass(pageId) {
// finds div with menuHeader class that has the attribute data-associated-page-id equal to the page id
// then sets the active class
$('.menuHeader[data-associated-page-id="' + pageId + '"]')
.addClass('menuHeaderActive');
}
If you were using a server side language like PHP then you could do something like this https://stackoverflow.com/a/11814284/81053
NOTE: The answer Chris provided works really well, but you have to actually have the link in the href of <a></a>, otherwise it will be undefined.
You could add an id to a with the link and then use
var menuLink = $('#'+currentUrl);
the code provided by Chris
(this way the page won't redirect because you clicked the link but will run the function instead)
<div class="menuBar">
<div class="menuHeader ui-corner-top menuHeaderActive">
<span>Home</span>
</div>
<div class="menuHeader ui-corner-top">
<span>New Transaction</span>
</div>
</div>
And the JS
$(document).ready(function () {
var currentUrl = window.location.href;
var menuLink = $('#'+currentUrl);
menuLink.parent().parent(".menuHeader").addClass('menuHeaderActive');
});
On a side note, if that's a different page you only have to add menuHeaderActive to the active a and remove it from the other on that specific page