I can't seem to get the navigation bar widget to work at all in my code. I'm building my first application in notepad++ and I'm trying to learn as I build so I apologize for any simple mistakes.
As of now, it shows up as two 2 row tables with the first showing the first button with a space below it and the second showing a space above it with the 2nd button below it. I've checked the jQuery mobile demo site to try and figure out the code and came up with noting, and so I come to you.
<div data-role="page" id="pageone">
<div data-role="header" data-id="header" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3><a/></li>
<li><a href="#todolist">
<h2>To-Do List</h2>
<h3>Application wish list</h3></a></li>
</ul>
</div><!--/navbar -->
</div><!--/header -->
<div data-role="main" class="ui-content">
<p>This is an ongoing test page for my League of Legends Statistical Analysis and Coaching application</p>
<p>Please enter your summoner name in the text box below.</p>
<h2>Enter Your Summoner Name</h2>
<div class="ui-grid-a">
<div class="ui-block-a"><input type="search" name="SumName" id="SumName" placeholder="Summoner Name" data-clear-btn="true"></div>
<div class="ui-block-b"><a href="#pagetwo" id="callSum" class="ui-btn" >Search</a></div>
</div>
</div>
<div data-role="footer">
<h1>Footer Text</h1>
</div>
You have a syntax error in closing tag of anchor. you have used like <a/> instead of </a>
Update your code like below.
<li><a href="#pagetwo" class ="ui-btn-active ui-state-persist">
<h2>Summoner Information</h2>
<h3>Statistics & Achievements</h3></a>
</li>
Related
I have a twitter bootstrap tabs component where i have five tabs.I want 3 of the tabs to be part of a form and the 4th, 5th not be.
So I thought, I'll just wrap the 3 tabs in a form.But it does not work. I have already checked How to wrap a selection of twitter bootstrap tabs as one form? this thread and from the first answer got two issues. Since in the 2nd answer issues are explained but i am expecting better solution using js and without modifying bootstrap core file.
I am using twitter bootstrap 3.3.2. How can I fix this?
Here is the sample code:
<div class="row">
<div class="col-lg-12 animated-panel zoomIn" style="animation-delay: 0.4s;">
<div class="hpanel">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">First</li>
<li class="">Second</li>
<li class="">Third</li>
<li class="">Fourth</li>
<li class="">Fifth</li>
</ul>
<div class="tab-content">
<form>
<div class="tab-pane active" id="tab-1">
<div class="panel-body">First tab fields
</div>
</div>
<div class="tab-pane" id="tab-2">
<div class="panel-body">Second tab fiels
</div>
</div>
<div class="tab-pane" id="tab-3">
<div class="panel-body">Third tab fields
</div>
</div>
</form>
<div class="tab-pane" id="tab-4">
<div class="panel-body">Fourth tab content
</div>
</div>
<div class="tab-pane" id="tab-5">
<div class="panel-body">Fifth tab content
</div>
</div>
</div>
</div>
</div>
</div>
I guess since bootstraps javascript conflicts with this kind of form placing you need to build an (dirty) workaround if you really want to use bootstraps tabs with this kind of form-placing.
You could place inside each of the first three tabs an single form and copy (only for submitting) the content of the other forms into the form submitted.
#lonesomeday mentions a way to intercept submitting forms
So you could do something like
$(document).on('submit', '.tab-pane:lt(3) form', function(e){
e.preventDefault();
$('.tab-pane:lt(3) form').not($(this)).children().clone().addClass('toRemove').hide().appendTo($(this));
this.submit();
$('.toRemove').remove();
});
Note: I did not test the code above
If your submit-button/trigger is outside of the tab-structure you could just copy the contents of the three tabs into an hidden form anywhere on the page and submit this one.
Another way would be to invoke jQuery's ajax without using forms.
I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup" on the button, nothing happens. If I remove the data-rel it opens - but as a full window. The logic works well, but still, I'd like to see a popup.
Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":
<!-- history page -->
<div data-role="page" id="history">
<div data-role="header" data-position="fixed">
Back
<h1>History</h1>
Delete
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
<h4 id="historyEmpty">History is empty</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
</div><!-- /footer -->
</div>
<!-- end history page -->
<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>Delete History?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Delete all items in history?</h3>
Cancel
Delete
</div>
</div>
<!-- delete history popup -->
Any idea what am I missing here?
Place popup inside <div data-role=page> and that div should be the direct parent of popup div. I placed before <div data-role=content> in the below demo.
Demo
Dialog should be placed outside <div data-role=page> because they are treated as a page.
I pulled very small snippets from my code to show a very simple example of my problem. I put it in JSFiddle -> http://jsfiddle.net/hollycoffee/LjLMU/
I have researched and found others with the same issue and they either tried addClass or refresh jQuery methods, so I tried both in a few different places in my code and nothing worked, so I'm hoping that by making the simple example in JSFiddle, someone can point me to exactly what I am missing and where.
The example is random and won't make sense, but the part that I am stuck on is the fact that only the dynamic portion of the menu loses style, the Skills list.
The menu portion markup looks like this:
<header data-role="header" data-position="absolute" data-theme="a">
<h1>View Skills</h1>
Menu
</header>
<!-- Starting our left side menu panel -->
<div data-role="panel" id="left-panel" data-theme="a">
<ul data-role="listview" data-theme="a">
<li data-icon="back">Back Home</li>
</ul><br />
<div class="ui-header ui-bar-a" data-theme="a">Settings</div>
<div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<h3>Optimization Settings</h3>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<ul data-role="listview">
<li>Colors</li>
<li>Preferences</li>
</ul>
</div><!-- /collapsible-set -->
</div><!-- /collapsible -->
<div class="ui-header ui-bar-a" data-theme="a">Skills Menu</div>
<div id="skillsList"></div>
<div class="ui-header ui-bar-a" data-theme="a">Saved</div>
<div data-role="collapsible" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<h3>Saved Searches</h3>
<div data-role="collapsible-set" data-inset="false" data-iconpos="right" data-theme="a" data-content-theme="a">
<ul data-role="listview">
<li>Angry Birds</li>
<li>Professional Events</li>
</ul>
</div><!-- /collapsible-set -->
</div><!-- /collapsible -->
</div><!-- / Menu panel -->
Everything looks good except for the skillsDiv, which is filled by this javascript:
function CreateSkillsList(skills){
var skillsDiv = $('#skillsList');
var html = "<div data-content-theme=\"a\" data-theme=\"a\" data-iconpos=\"right\" data-inset=\"false\" data-role=\"collapsible\"><h3>Skills</h3><div data-role=\"collapsible-set\" data-inset=\"false\" data-iconpos=\"right\" data-theme=\"a\" data-content-theme=\"a\">";
html += "<ul data-role='listview'>";
var size = skills.length;
for (i=0; i<size; i++) {
html += "<li><div id='Skill" + i + "'></div> </li>";
}
html += "</ul></div></div>";
skillsDiv.html(html);
}
Each skill does show as a list item, but has no CSS.
Here is the JSFiddle so you can use the top left Menu button to see the skills list with no style:
http://jsfiddle.net/hollycoffee/LjLMU/
Thank you so much for the help, you StackOverflow geniuses help me every time!
-Holly
(Quick note update - In my real application, I don't use the $(document).ready() - I just put it into this example to fill my array for me. My real application gets the array filled by an external API, so I thought this was the simplest way to re-create it.)
Edit: Add this at the end of your function
$('[data-role=page]').trigger('pagecreate');
Just add $('[data-role=panel]').trigger('updatelayout'); after injecting items dynamically to panel.
Demo
Use:
$('#panel-id').html(yourHtmlHere);
$('#panel-id').trigger('create');
$('#panel-id').trigger('updatelayout');
Standard CSS for styling.
I'm currently developing jquery custom mobile template. I need to know can we use data-role="header" tag more than once in a page ? Because in my page as per the header and footer I've couple of in the middle also. For example headings should be wrapped with background color and even though I used will it be validate http://validator.w3.org/mobile/. Also I tried applying following jquerymobile class to a div class="ui-bar" but it's not working as I expected eg :(not reading the background color).
Alternatively I can define a custom class but I need to know have jquery already defined a class something similar to my requirement.
FYI: here is my HTML example
<div data-role="page" data-theme="a">
<header data-role="header">
<div>Main Heading</div>
</header>
<!-- logo -->
<hr/>
<div class="ui-grid-b">
<div class="ui-block-a">
<a href="#">
<div class="h_bag"></div>
BAG (0)
</a>
</div>
<div class="ui-block-b">
<a href="#">
<div class="lust_list"></div>
LUST LIST
</a>
</div>
<div class="ui-block-c">
<a href="#">
<div class="search_size"></div>
SEARCH SIZE
</a>
</div>
</div>
<!-- header options -->
<div class="ui-bar">
<h1>This Sub heading should to wrapped with background colour</h1>
</div>
</div>
You can easily use more the one header in jQuery Mobile, and here's an example:
http://jsfiddle.net/Gajotres/UGVwW/
Background color of every element can also be easily achieved but you will need to fore it with !important:
#second-header {
background: red !important;
}
Here's an HTML example:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-theme="a" data-role="header" id="second-header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
Test button
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
I seem to be running into a problem with jquery-mobile's header and angularjs.
the issue is i'm trying to place a standard jquery-mobile header.
<div data-role="header">
Cancel
<h1>Edit Contact</h1>
Save
</div>
This works as expected when the header is outside of a ng-view.
in chrome, I see the following html.
<div data-role="header" class="ui-header ui-bar-a" role="banner">
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Cancel</span><span class="ui-icon ui-icon-delete ui-icon-shadow"> </span></span>
<h1 class="ui-title" role="heading" aria-level="1">Edit Contact</h1>
<span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Save</span><span class="ui-icon ui-icon-check ui-icon-shadow"> </span></span>
</div>
When I'm trying to put in a ng-view, angularjs puts a ng-scope on the div, which now produces a conflict. This is the final control being outputed
<div ng-view>
<div data-role="header" class="ng-scope">
Cancel
<h1>Edit Contact</h1>
Save
</div>
</div>
Is there a simple way to get the two platforms to behave nicely?
Found this solution in google groups
https://groups.google.com/forum/?fromgroups=#!searchin/angular/jquery$20mobile/angular/-BufJRGQ6-M/bYa6AfCSTVYJ