test1.html
<script>$(function(){
$.get(
"test1.php",{},function(result){
//$("#result").html(result);
$("#result").html(result);
});});</script><div data-role="page" id="home">
<div data-role="header">
<h1>test</h1>
</div>
<div data-role="content">
<div id="result"></div>
</div>
test1.php
<?
echo "<a href='#' id='btn_del' data-role='button' data-inline='true' data-icon='delete'>Del</a>";
?>
It don't show button,but It just show hyperlink.
How can I do?
You need to refresh the jquery embedding into your button...
refresh()
update the form button in jquery mobile.
If you manipulate a form button via JavaScript, you must call the refresh method on it to update the visual styling.
http://api.jquerymobile.com/button/#method-refresh
Related
I have a situation in jQuery mobile
<a class="fa fa-pencil editInfo">Click</a>
Inside updateInfoPages.html :
<div id="page1" data-role="page" data-theme="a" class="adminPage">
</div>
<div id="page2" data-role="page" data-theme="a" class="adminPage">
</div>
On .editInfo click i want to navigate to page1 or page2 based on some condition.
So how can i navigate to these pages ?
How will I know that page1 or page2 has been loaded ?
I tried this
$(".editInfo").click(function(){
$( ":mobile-pagecontainer" ).pagecontainer( "change", "updateInfoPages.html",{data:{"p1":"p111","p2":"p22"}});
});
It only shows page1 and also if i refresh updateInfoPages.html all css style is removed.
jQuery Mobile 1.3.1 has a very nice sliding panel feature, but the panel code must be placed within the same page it's used on.
I'm working on an app that needs to have the same panel on many pages. Instead of replicating code is there a way to dynamically inject the panel into these pages so that it will still retain the jqm panel functionality?
jQuery Mobile >= 1.4
Solution one:
Use an External panel that can be accessed from any page, this is in case you want to have the same panel contents in all pages.
Append panel to $.mobile.pageContainer once only on pagebeforecreate and then enhance the panel using $(".selector").panel().
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#mypanel").panel();
});
Add button to open the panel in each header (or wherever you want).
Note: When using External Panel data-theme should be added to panel div, as it doesn't inherit any styles/theme.
Demo
Solution two:
If you wish to do changes to panel before appending it, based on number of pages in DOM, add panel to each one with a different ID and a button to open that panel.
Note that you don't need to call any kind of enhancement, because you're adding panels on pagebeforecreate. Hence, panels will be auto-initialized once page is created.
var p = 1,
b = 1;
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("[data-role=page]").each(function () {
var panel = '<div data-role="panel" id="mypanel' + p + '" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
$(this).prepend(panel);
p++;
});
$.mobile.pageContainer.find("[data-role=header]").each(function () {
var panelBtn = ''
$(this).append(panelBtn);
b++;
});
});
Demo
Note: Make sure you use .one() not .on(), if you use the latter, panels will be added whenever a page is created.
jQuery Mobile <= 1.3
You can do it this way, using pagebeforecreate event and by checking if there is no Panel added already. Keeping in mind that panels markup should always be placed before [data-role=header] that's why I used .before().
There is no need to call any enhancement method since panels are added on pagebeforecreate. They will be initialized during that event.
Demo
Your panel
var panel = '<div data-role="panel" id="mypanel" data-position="right" data-display="push"><h1>Panel</h1><p>stuff</p></div>';
Add panels dynamically
$(document).on('pagebeforecreate', '[data-role=page]', function () {
if ($(this).find('[data-role=panel]').length === 0) {
$('[data-role=header]').before(panel);
}
});
Update
There are two alternative methods to inject "External Panel" dynamically.
For some one coming across this issue, there is something called External Panels in JQuery Mobile 1.4+, which can make our life easier.
http://demos.jquerymobile.com/1.4.0/panel-external/
You can do something like this.
<div data-role="panel" id="mainPanel">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
<!-- .... -->
</div>
<div data-role="page" id="page2" >
<!-- .... -->
</div>
You can also do one thing create a panel at the end or start of all pages and open that by Id and script code mentioned below.....its working fine for me.
$(function(){
$("#navigation").enhanceWithin().panel();
});
<div data-role="page" id="page1">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="main" class="ui-content ui-body-a ui-responsive">
<div data-role="header">
<div data-role="navbar">
<ul>
<li class="">
</li>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="ui-panel ui-panel-position-left ui-panel-display-reveal ui-body-b ui-panel-animate ui-panel-open" data-role="panel" id="navigation" data-position="left" data-display="overlay" data-theme="b" data-dismissible="true" data-swipe-close="true">
<div class="ui-panel-inner">
<ul class="">
</ul>
</div>
</div>
In order for hashcoder his response to work you need to initialize the external panel. Also add .enhanceWithin() to make listviews etc render properly within the panel.
Als add a data-rel=... attribute to the link via which you want to open the external panel.
<script>
$(function () {
$("div[data-role='panel']").panel().enhanceWithin();
});
</script>
<div data-role="panel" id="mainMenu">
<!-- .... -->
</div>
<div data-role="page" id="page1" >
Open main menu panel
<!-- .... -->
</div>
<div data-role="page" id="page2" >
Open main menu panel
<!-- .... -->
</div>
I'm using jQM popup to 'alert' users of something. For example, I make a $.ajax() request and if there's something wrong with the response I shoot a popup.
Something like this:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
</div>
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
It all works fine, but If I change the popup to include a button, this way:
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
Then the link is not styled, and it will just show an 'Ok' link.
If I move the popup to a dialog then it all works, button and all, but since I want the page underneath to be seen, I'd like to keep it a popup.
Am I missing something? I saw a lot of questions about popups/dialogs, but they all refer to clicking a button to show them.
I use jquery-1.8.2 and jquery.mobile-1.2.0.
Edit: the solution to my case is that the popup div must go inside the page div, and not outside of it (as a dialog div would), like this:
Before (wrong):
<div data-role="page">
<div data-role="content">
...page stuff...
</div>
</div>
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
After (right):
<div data-role="page">
<div data-role="content">
...page stuff...
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
You need to refresh the jQM markup
http://jsfiddle.net/xvvCA/1/
http://jsfiddle.net/xvvCA/ ( inline button )
JS
var msg = 'Look! A new button!';
$("#popupMsg").html(msg);
$("#popup").popup({
history:false,
overlayTheme: "a"
}).popup('open');
$('#okButton').button('refresh'); // you need to refresh jQM markup
HTML
<div data-role="page">
<div data-role="content">
<div data-role="popup" id="popup">
<p id="popupMsg"></p>
Ok
</div>
</div>
</div>
I'm trying to dynamically add a popup to my page, whith nice JQM content (buttons, etc). The popup is added, but no styles applied.
Here's the code (it's not so long, so I copied here):
<!DOCTYPE html>
<html>
<head>
<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/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> </head>
<body>
<div id='page' data-role='page'>
<div data-role='header'>
<h1> Header </h1>
</div>
<div data-role='content'>
<p>Code sample</p>
<a id='add' data-role='button'> Add popup </a>
<a href='#popup' data-role='button' data-rel='popup'> Show dynamic popup </a>
<a href='#popup2' data-role='button' data-rel='popup'> Show static popup </a>
</div>
<div id="popup2" data-role='popup'>
<div data-role="header">
<h1>Popup Header</h1>
</div>
<div data-role="content">
<p>Some content</p>
</div>
</div>
</div>
<script>
$(document).ready( function(){
$('#add').bind( 'click', function(ev){
var
page = $('#page');
var
popup = $('<div id="popup" data-role="popup"></div>').appendTo( page )
, header = $('<div data-role="header"> <h1>Popup Header</h1> </div>').appendTo( popup )
, content = $('<div data-role="content"> <p>Some content</p> </div>').appendTo( popup );
popup.popup();
});
});
</script>
</body>
</html>
there's a JsBin version, to play around with it.
So if I click to the Show static popup it displays the header nicely, but If I click Add popup, than show this newly added popup with Show dynamic popup the content of the popup looks differently.(using chrome)
So the question is: How can I enchanced the dynamically added popup content?
I found the solution, you can insert the popup in the same level as content, for ex.
<div data-role="page" >
<div data-role="content" ></div>
<div data-role="popup"></div>
</div>
Well with this way the popup function is good, but when you insert code for example from ajax request you have to insert the popup in the page and recall the method popup of the component.
ex .js file in the ajax call (the response is only the code of popup):
$('#page').append(response).trigger('create');
$("#popup").popup();
Remember that when you declare some popup in the principal page and it is not the same level as content. JQM automatically puts the popup in this place and it doesn't generate a problem.
You have to repaint the dynamically added content. To do this add page.page('destroy').page(); after popup.popup();.
working example: http://jsbin.com/orehuv/3/
My application has a button (on app.html) that leads to a new page with a navbar (app2.html). The Navigation has an internal link (Toolbar 2) that should show the internal div "page2".
When coming from the button with changePage() it is not able to display the content when clicking on the navigation. It seems like the reloadPage is not working.
app.html looks like this:
<body>
<!-- Home -->
<div data-role="page" id="page3">
<div data-role="content">
<a id="asdf" data-role="button" name="asdf">
Button
</a>
</div>
</div>
<script>
$('#asdf').click(function(){
$.mobile.changePage('app2.html', {transition: "slidedown", reloadPage: true, changeHash: true });
});
</script>
</body>
This is my app2.html:
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div id="navigation" data-role="navbar" data-iconpos="right">
<ul>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar1
</a>
</li>
<li>
<a href="#page2" data-theme="" data-icon="check">
toolbar 2
</a>
</li>
<li>
<a href="app.html" data-theme="" data-icon="">
Toolbar 3
</a>
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="header">
<h3>asdfasd</h3>
</div>
</div>
</div>
</body>
Where's the problem? I'm using jQuerymobile 1.1.1 with jQuery 1.7.1.
Here are the files:
app.html
app2.html
You cannot have two jQuery Mobile pages in the second page. When you click on the link in app.html, it will do an ajax request to app2.html to get the data-role="page" and it expects only in the html file. You should read up on the difference between a single page template and a multi-page template.
You can find more in the docs, look for "Linking within a multi-page document".
tl;dr: You either need to put all the pages in one HTML file and link to the id or put all the pages in separate HTML files and link to the file.