We just updated from jquery mobile beta 2 to rc2. We had a custom button that we don't want jqm to initialize (add extra markup) so we used this:
<button id="buttonid" data-role="none"></button>
And that worked perfectly, but now with the update it is actually initializing the button. I don't see any updates in the release notes or the documentation. Am I missing something?
Markup after update:
<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-down-c ui-btn-up-c" aria-disabled="false">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text"></span>
</span>
<button id="buttonid" data-role="none" class="ui-btn-hidden" aria-disabled="false"></button>
</div>
UPDATE
As Phill pointed out, my problem is hard to reproduce. Could be something with my code but it seems strange that simple changing version creates the behaviour for me. Here is additional markup that I first stripped out from example:
<ul class="item" data-role="listview" data-inset="true">
<li data-role="list-divider">Something</li>
<li>
<div class="block_container" data-role="none">
<div class="block block_small">
<button data-role="none" id="check-123" class="check" data-id="something"></button>
</div>
<div class="block block_small assignment">
<button data-role="none" id="assign-123" class="assignmentoverlay"></button>
</div>
<div class="block">
<h3>
Something
</h3>
<p>
lorem..
</p>
</div>
</div>
</li>
UPDATE 2
I found what the problem is. I am populating my list from javascript. At the end I'm calling trigger("create"). This will enhance all the elements in my list, even those with data-role="none.
jsfiddle to reproduce problem - http://jsfiddle.net/V2xAX/9/
Updating title of question
UPDATE 3
Hopefully the last update. We got it to work by doing the following:
When calling trigger("create")on my list, every element will be enhanced. We don't want this.
When calling trigger("create")on the page element holding the jquery mobile page, only elements without data-role="none"will be enhanced. This is the behavior we want.
Link for testing - http://jsfiddle.net/V2xAX/16/
It would be interesting to know why this happens :)
Related
I'm a touch lost - I have taken a popup example from the jquery demo page as a template...
If I put my popup within the first page, it works - I can call it from within js script to open.
Thus... the following does work
<div data-role="page" class="page" id="Menu">
<div data-role="header" data-position="fixed" class="ui-title center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="MainContent">
<div id="MenuList"></div>
</div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
I can dynamically open it via
$("#popup").popup("open");
However if I move the popup to another (data-role) page within the same document, it does not get displayed, nor errors in console.log. Can anyone steer me forward? The following does NOT work...
<div data-role="page" class="page" id="OrderList">
<div data-role="header" data-position="fixed" class="ui-title text-center">
<div data-role="controlgroup" data-type="horizontal">
<span class='htitle'>Barserver.com</span>
</div>
</div>
<div id="OrderListContent" class="productdhtml ui-content"></div>
<div data-role="popup" id="popup" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="a">
<h1>Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.</p>
Cancel
Delete
</div>
</div>
</div>
To avoid misunderstanding - the first code sample works, the second one does not work (meaning no errors, no modal like dialog box gets displayed).
Why?
(All help appreciated of course)
I got it (thanks to #Omar for direction). A coded answer is not easy but I will try draft and share in a few days (I'm behind on my work because of trying to fix this problem).
For the purpose of this note, when I say "this failed" I mean "no popup, no change in address bar, no console error."
I have a form. If operator attempted to navigate away, a test should be done to confirm all data was entered. All my a-href tags had page references, and jquery gives precedence to a-href tags over any other events I had applied. I had not considered the ramifications of this. The result? Form displayed, incompletely filled, operator selects to navigate elsewhere, popup call starts/ends but "failed" and jquery quickly navigates to the page named in the a-href page.
Solution:
When using popups, do not name pages in a-href tags. Thus, when using popups, avoid
<a href='#Page5'>Page 5</a>
and instead
<a href='#' id='page5'>Page 5</a>
and create an event that decides if a popup should be displayed, or if not, that page5 should be navigated to.
I hope that makes sense.
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I have a <button> in jQuery Mobile 1.4.2 that's being shown with an extra <div> container appearing around it. I did not have this problem with jQM 1.3.2.
This is the code I'm using (note that the problem doesn't appear in jsFiddle):
<div data-theme="a" data-role="page">
<div role="main" class="ui-content">
<button id="test1" data-inline="true" data-mini="true" title="test1">Test 1</button>
</div>
</div>
And this is the fiddle that shows the extra div inserted by jQM: Demo With Extra Div
How do I get rid of the extra div?
As of jQuery Mobile 1.4, use .button() only for input with type button, submit or reset.
input is converted into a div that holds all styles.
<div class="ui-btn ui-input-btn ui-corner-all ui-shadow">
Submit
<input type="submit" value="Submit">
</div>
If you call .button() on <a> or <button> tags, they will be wrapped in a div.
I am trying to use bootstrap's carousel inside an angular.dart component. Here is the html:
<div id="carousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol ng-repeat="pic in ctrl.pics" class="carousel-indicators">
<li data-target="#carousel" data-slide-to="{{ $index }}" ng-class="{ active: {{$first}} }"></li>
</ol>
<!-- Slides -->
<div ng-repeat="pic in ctrl.pics" class="carousel-inner">
<div class="item" ng-class="{ active: {{$first}} }">
<img src="{{ ctrl.pic.image }}">
<div class="carousel-caption">{{ ctrl.pic.title }}</div>
</div>
</div>
<!-- Controls -->
<a id="carousel-control-left" class="left carousel-control" href="#carousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a id="carousel-control-right" class="right carousel-control" href="#carousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
The prev/next controls don't work (maybe other things too), probably because the href attributes are wrong. I tried to fix them by updating the hrefs at run time, but I don't know how to enter a url pointing to an id that is inside shadow dom.
Alternatively, I tried to add event listeners that would use dart:js to call the carousel('prev') and carousel('next') bootstrap functions. This approach failed too because I don't know how to pass the shadow dom root reference from dart to javascript.
Any suggestions?
There may be two issues:
JavaScript tries to querySelect() an element and can't find it because it's hidden in the shadowDOM
you could change the JavaScript code
The CSS doesn't work because you haven't added applyAuthorStyles: true to your AngularDart component.
Currently Angular UI Bootstrap components are being ported to Angular Dart
see https://github.com/akserg/angular.dart.ui
Carousel is not yet working AFAIK
I Did do my home work but i cannot get it to work.The Button Styles Are Not Refreshing Please Help.
<div id="qpage" data-role="page">
<div data-role="header">
<a id="exit-quiz" data-role="button" data-icon="arrow-l" >Exit</a>
<h1 id="ques-title">#ques-title</h1></div>
<div data-role="content">
<div class="ui-bar-a" id="ques-timer">
#ques-timer
</div>
<div id="question"><h3>#Question</h3></div>
<div class=".button-set" data-role="controlgroup" id="answerbox">
<a data-role="button" id="answer_1">#answer_1</a>
<a data-role="button" id="answer_2">#answer_2</a>
<a data-role="button" id="answer_3">#answer_3</a>
<a data-role="button" id="answer_4">#answer_4</a>
</div>
<div id="explanation">
</div>
</div>
<div data-role="footer"><h2>Copyright Kaveen</h2></div>
</div>
This is Th Javascript I wrote
$("#subject1").bind('click',function(){
var json = $.get("test.json",function(data){
$("#question").html(data.question);
$("#answer_1").html(data.mcq_1);
$("#answer_2").html(data.mcq_2);
$("#answer_3").html(data.mcq_3);
$("#answer_4").html(data.mcq_4);
});
i did try $( "div[data-role=page]" ).page( "destroy" ).page(); But it wont work Plese Help Me Thank you. JSFIDDLE http://jsfiddle.net/xRTCu/
Try this, it should work:
$("#answer_1").button("refresh");
If that is also not working, try this
$("#answer_1").buttonMarkup();
EDIT: jsfiddle updated http://jsfiddle.net/androdify/xRTCu/4/
Use this:
$("#answer_1 .ui-btn-text").text(data.mcq_1);
Why? Because jquery mobile adds a span around the button which has class="ui-btn-text"
Try $( "div[data-role=page]" ).trigger ("create") if you're using the latest version of jQuery mobile. page was deprecated some versions ago.
If you're using an older version of jQM, then you could use $("[data-role=button]").button().button ("refresh") after you're done appending your JSON data into those buttons.
EDIT
From your fiddle I can see that you're using html() and that's erasing jQM's markup. This is what data-role=button converts your markup:
<a data-role="button" id="answer_1">#answer_1</a>
//becomes
<a data-role="button" id="answer_1" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-first-child ui-btn-up-c">
<span class="ui-btn-inner">
<span class="ui-btn-text">mcq wrong</span>
</span>
</a>
So by using html() youre effectively erasing everything inside a. Try searching for ui-btn-text class inside a like this and then run html with your text in it:
$(".ui-btn-text", "#answer_1").html(data.mcq_1);
//OR
$("#answer_1").find(".ui-btn-text").html(data.mcq_1);
Here's your updated demo : http://jsfiddle.net/hungerpain/xRTCu/3/