I am using jquery mobile and have a collapsible set.
When using a function to change its innerHTML it works just fine. Displaying the content inside as collapsibles.
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
</div>
works when using:
document.getElementById("doro").innerHTML ='<div data-role="collapsible">
<h3>Click me - Im collapsible!</h3>
<p>I'm the expanded content.</p>
</div>'
but when i try:
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
while:
function refreshPage(){
var text = "<div data-role='collapsible'><h1>Click me - I'm collapsible!</h1><p>I'm the expanded content.</p></div>";
document.getElementById("doro").innerHTML = text;
}
It changes the collapsible set I have into just text without the jqueryMobile css and javascript attached.
That's sort of what it looks like
function refreshPage()
{
var text = "<div data-role='collapsible'><h1>Click me</h1><p>I'm the new expanded content.</p></div>";
document.getElementById("doro").innerHTML =text;
}
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<!doctype html>
<html><head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div data-role="panel" id="left-panel" data-display="overlay">
<h2></h2>
<form id="checkuser" name="checkuser" method="post" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Enter your username:</label>
<input type="text" value="" name="username" id="username"/>
</div>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
</fieldset>
</form>
</div>
<div data-role="header">
<h1></h1>
Add
</div><!-- /header -->
<div data-role="content">
Star button
<p id="demo">
<div id="doro" data-role="collapsibleset" data-iconpos="right" dir="rtl" align="right">
<div data-role="collapsible">
<h3>Click me - I'm collapsible!</h3>
<p>I'm the expanded content.</p>
</div>
</div></p>
</div><!-- /content -->
<div data-role="footer">
<h4>My Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
this is a simplified example that won't work aswell, and I don't get why
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" id="name"> </div>
<script>
document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';
function refreshPage(){ document.getElementById("name").innerHTML ='<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>';}
</script>
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" onClick="refreshPage();">
<div data-role="footer">
<h1>Insert Footer Text Here</h1>
</div>
</div>
</body>
</html>
When you are dynamically creating jQuery mobile widgets after the page has already been enhanced, you have to initialize the widgets yourself in one of the following ways:
Call .enhanceWithin() on the container element.
Call the individual widget intializer, e.g. .colapsibleset(), .collapsible(), etc.
For your example, you could do the following. Given a button and a container DIV with id="name":
<div data-role="page" id="pageone">
<div data-role="header">
<h1>Collapsible Sets</h1>
</div>
<div data-role="main" class="ui-content" >
<input type="button" data-theme="b" name="submit" id="submit" value="Submit" />
<div id="name"></div>
</div>
</div>
On pagecreate, dynamically add the collapsibleset to the container and call enhanceWithin(). Also add a click handler to the button which calls refreshPage(). refreshPage() replaces the html in the container and again calls enhanceWithin().
$(document).on("pagecreate", "#pageone", function(){
$("#name").html('<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible!</h3><p>Im the expanded content.</p></div>').enhanceWithin();
$("#submit").on("click", function(){
refreshPage();
});
});
function refreshPage(){
var text = '<div data-role="collapsibleset"><div data-role="collapsible"><h3>Click me - Im collapsible 2!</h3><p>Im the expanded content from button.</p></div>';
$("#name").html(text).enhanceWithin();
}
Working DEMO
Also, in your second code snippet, you are loading 2 different versions of jQuery. Use either 2.1 or 1.11 but not both.
Related
I'm changing over from Java to Javascript as I'd like to expand my programming capabilities, and I'm not sure why but I'm having a really hard time adjusting. For example, I'm not even sure why I can't get the Javascript function to run, nevermind actually work the way I want it to.
I feel like I might not have the JS wired up to my HTML document properly, but I have included the correct filename within a script tag, and the two files are within the same folder, so why isn't the JS function even being called?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script src="script.js"></script>
<body>
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task"/>
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button onclick="addTask()">Button element</button>
</div>
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
It is window.alert("hello");, not document.alert("hello");
And inline script is not recommended, use addEventListener instead
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('button').addEventListener('click', addTask);
});
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
Note, the line adding the event listener needs to be called after DOM loaded, as seen in above code sample, or in a script at the end of the body, as shown in below sample.
<div class="container">
<div class="row">
<div class="one-half column" style="margin-top: 15%">
<h2>To-do Webapp</h4>
<p>Enter your task into the box below.</p>
</div>
</div>
<form>
<div class="row">
<div class="ten columns">
<input class="u-full-width" type="text" id="inputtask" placeholder="Enter a task" />
</div>
<div class="two columns">
<!-- <input class="button" onclick="addTask()" value="Add task"> -->
<button>Button element</button>
</div>
</div>
</form>
</div>
<script>
document.querySelector('button').addEventListener('click', addTask);
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
</script>
Click on any part of popup except button trigger focus on textfield and keyboard appears. I want the textfield to get focus when it is clicked. Is there any ways to solve this issue?
<div id="datasetPopup" data-role="popup" data-history="false" class="popupDialog" data-theme="b" data-dismissible='false'>
<div data-role="header" data-theme="b" class="popupHeader">
<h1><strong id="popupHeader"></strong></h1>
</div>
<div data-role="content" class="popupContent">
<input type="text" id="searchText"/>
<ul data-role="listview">
/* lists */
</ul>
</div>
<div class="footerFullButton">
<button type="button" id="cancelButton">Cancel</button>
</div>
</div>
This is by design, but you can adopt the "trick" to add another input element positioned outside the popup, then the focus goes to the whole popup window, which looks also somehow not so bad:
.ui-popup {
padding: 1em;
min-width: 200px;
}
.hidden {
position:absolute;
top:-100px;
width:1px;
height:1px;
overflow:hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).on('mobileinit', function() {
$.mobile.ignoreContentEnabled = true;
});
</script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="page-one">
<div data-role="header" data-position="fixed">
<h3>Page</h3>
</div>
<div data-role="content">
Popup
</div>
<div data-role="footer" data-position="fixed">
<h3>Footer</h3>
</div>
<div id="popup" data-role="popup" data-history="false" data-dismissible='false'>
<input data-enhanced="true" type="button" class="hidden">
<input type="text" id="usr" name="usr" value="">
Cancel
</div>
</div>
</body>
</html>
You should also tell JQM to not reposition inside the popup window this displaced element. This is the reason for the initialization line with $.mobile.ignoreContentEnabled = true;.
I have this problem, which had been working in previous versions, and I dont know what happend since its not working now.
The problem is that only the header and footer in jqm is "sliding/showing".
I've included the problem visually:
My code is:
<!DOCTYPE html>
<html>
<head>
<title>AP</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link href="js/jqm/jquery.mobile-1.4.3.min.css" rel="stylesheet" />
<style>
html {height:100%}
body {height:100%;margin:0;padding:0}
#googleMap {height:100%}
</style>
</head>
<body id="body">
<!-- LOGIN -->
<div data-role="page" id="loginPage" data-theme="a">
<!-- HEADER -->
<div data-role="header" data-theme="b">
<h3>AP</h3>
</div>
<!-- CONTENT -->
<div data-role="content">
<form id="check-user" class="ui-body ui-body-a ui-corner-all">
<fieldset>
<div data-role="fieldcontain">
<label for="username">Username:</label>
<input type="text" value="" name="username" id="username" />
</div>
<div data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" value="" name="password" id="password" />
</div>
<input type="button" data-theme="b" name="submit" id="loginSubmit" value="Log ind">
</fieldset>
</form>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<!-- MAP -->
<div data-role="page" id="mapPage">
<!-- PANEL LEFT -->
<div data-role="panel" id="mapPanel">
<ul data-role="listview" data-inset="true" id="mapPanelList"></ul>
</div>
<!-- HEADER -->
<div data-theme="b" data-role="header" id="mapHeader">
Menu
<h3 id="headerTitle"></h3>
<a id="logout" data-icon="delete">Exit</a>
</div>
<!-- CONTENT -->
<div data-role="content" style="margin: 0; padding: 0;" id="mapContent">
<div id="map" class="ui-panel-wrapper"></div>
</div>
<!-- FOOTER -->
<div data-theme="b" data-role="footer" data-position="fixed">
<h3>Version KICK-ASS</h3>
</div>
</div>
<script type="text/javascript" charset="utf-8" src="js/googlemaps3.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="js/jqm/jquery.mobile-1.4.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="georescue.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>
Same code works without googlemaps..
Any help appreciated.
I want to open a jquery-mobile dialog programmtically. I tried to do:
$("#jenia-dialog").dialog()
#("jenia-dialog").dialog("open")
Error: no such method 'open' for dialog widget instance
This is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p>Is this a question?</p>
</div>
</div>
<div data-role="page" data-url="dialog.html" id="dialog-jenia">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</body>
</html>
This is my jsfiddle page: http://jsfiddle.net/kK24p/
All I want to do is open the dialog using js instead of the button.
If someone could help me it would be great.
Thanks a lot in advance.
Working examples:
Solution 1
Page 1: - index.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p>Open dialog</p>
</div>
</div>
</body>
</html>
Page 2: - dialog.html
<div data-role="page">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
Solution 2
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-dialog', function(){
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
});
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a id="open-dialog" data-role="button">Onen dialog</a></p>
</div>
</div>
<div data-role="dialog" id="jenia-dialog">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
This is dialog content
</div>
</div>
</body>
</html>
Correct way of programatically opening dialogs requires changePage function, like this:
$.mobile.changePage("#jenia-dialog", {transition: 'pop', role: 'dialog'});
Same thing works if you need to open external dialog:
$.mobile.changePage("dialog.html", {transition: 'pop', role: 'dialog'});
I did couple of changes to your code please refer it. I removed the closing tag for opening div <div data-role="content"> in first page. It is wired but solve it in the future and the next point is you cannot load external page like that in a popup. Please refer this link How to load an external page in JQM popup
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
Is this a question?
</div>
<div data-role="popup" id="dialog-jenia">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
i'm trying to configure a slide-panel jqm 1.3.1. I always created "one page-jqm"-Pages
one index.html and several
Now im trying to get the slide panel to work but when i add a second page, the page stuck in loading screen.
My code will explain what i mean:
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<div data-role="page" id="page1">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
<!-- Page 2 -->
<div data-role="page" id="page2">
<div id="header" data-theme="c" data-role="header">
<a id="men" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
Test123
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div data-role="panel" id="menue" data-display="push" data-theme="a">
<div data-role="controlgroup">
<h2>Menü</h2>
Home
Erlaubte Lebensmittel
Verbotene Lebensmittel
Frühstück
</div>
</div>
<div>
I thank you all for your help in advance
cracker182
EDIT: browser console shows :
Uncaught TypeError: Cannot read property 'options' of undefined
EDIT2: I forgot to Close the page Divs, thank you very much Omar
I stripped your footer menu blocks and if you look at this structure it will probably help you out to why your page is not navigating to the next page... Be sure to take a look at the naming conventions as well pertaining to the anchor tags...
<!DOCTYPE html>
<html lang="de">
<head>
...
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<!-- jQuery and jQuery Mobile -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<!-- Page 1 -->
<section id="firstpage" data-role="page">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info"></a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
<p>This is page 1</p>
<p>Go to second page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>
</section>
<!-- Page 2 -->
<div data-role="page" id="secondpage">
<div id="header" data-theme="c" data-role="header">
<a id="menu" data-role="button" href="#menue" data-icon="grid" data-iconpos="notext" class="ui-btn-left info">
</a>
<h3>Body Change</h3>
</div>
<div id="content" data-role="content">
this is page 2
<p>Go to first page</p>
</div>
<div id ="footer" data-role="footer">
footer
</div>
<div>