I searched around how to ad class to div in javascript and find some instruction for eather javascript or jquery but none dont seems to work.
What i tried is a simple code:
<!DOCTYPE html>
<html>
<head>
<title>XY</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel="stylesheet" href="files/jquery.mobile-1.4.0-rc.1.min.css"/>
<script src="files/jquery-2.0.3.min.js"></script>
<script src="files/jquery.mobile-1.4.0-rc.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<!--SLO STRAN ################################################ #################-->
<div data-role="page" id="slo" data-theme="a">
<div data-role="header" data-position="fixed" >
Domov
<h1>ABC</h1>
Osveži
</div><br>
<div id="osvezitev_cas_slo" style="margin-left:10px;"></div><br>
<div data-role="collapsible-set">
<!--boja-->
<div data-role="collapsible" data-collapsed="true">
<h3> <div class="ui-grid-a">
<div class="ui-block-a" id="postaja_boja" style="width: 65%;"></div>
<div class="ui-block-b" id="veter_boja" style="width: 35%;"></div>
</div>
</h3>
<div class="ui-grid-b">
<div class="ui-block-a" id="max_boja" style="width:50%;" "margin-left:10px"></div>
<div class="ui-block-b" id="maxob_boja" style="width: 50%;"></div>
</div>
<div id="tmp_boja"></div>
<div class="ui-grid-c">
<div class="ui-block-a" id="mmv1h_boja" style="width:50%;" "margin-left:10px"></div>
<div class="ui-block-b" id="mmv24h_boja" style="width: 50%;"></div>
</div>
</div>
<div data-role="footer" data-position="fixed">
SLO
</div>
</div>
</div>
</body>
</html>
<script>
$('#veter_boja').addClass('class_two');
</script>
I just one add class to "veter_boja" and it doesnt seem to work.
What am I doing wrong?
So, like #Jakadinho points out, your script is not run, because it is never called.
You should place the javascript script inside a function and call it e.g. on page load according to the following (though unrelated) example I modified out of http://www.w3schools.com/jsref/event_onload.asp tutorial example.
<!DOCTYPE html>
<html>
<head>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
I tried to get enough near to your problem getting the script out of html element and it worked.
So, attach to body that onload method, make your script a function and call it inside that onload.
Related
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 a html file like following.
<!DOCTYPE html>
<html>
<head>
<title>Testing..</title>
<script type="text/javascript">
function scrollLines(){
window.scrollByLines(3);
}
</script>
</head>
<body onload="scrollLines()">
<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>
<div id="4">4</div>
<div id="5">5</div>
<div id="6">6</div>
<div id="7">7</div>
<div id="8">8</div>
<div id="9">9</div>
<div id="10">10</div>
<div id="11">11</div>
<div id="12">12</div>
<div id="13">13</div>
<div id="14">14</div>
<div id="15">15</div>
<div id="16">16</div>
<div id="17">17</div>
<div id="18">18</div>
<div id="19">19</div>
<div id="20">20</div>
</body>
</html>
When opening html file in browser with #(hash) option like http://localhost/test.html#7 I expect first line of display is 10 but I am getting 7. But when opening html file without #(hash) I got first line as 3 as expected.
Why scrollByLines(3); doesn't work for #(hash) urls ?
Is there any other function/methods to do this ?
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.
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 developing a web app using JQuery Mobile (ver 1.3.0). If a have only one HTML file, I can bind the "pageshow" event to the page div:
<!DOCTYPE HTML>
<html>
<head>
<title>Funil de Vendas</title>
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="lib/jquery-1.8.2.min.js"></script>
<script src="lib/jquery.mobile-1.3.0.min.js"></script>
<script>
var nice = false;
$(document).ready( function(){
$("#other_page").bind('pageshow',function() {
alert('The page was called!');
});
});
</script>
</head>
<body>
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="#other_page" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
</div>
<div data-role="page" class="Page" id="other_page">
<div data-role="content">
...
</div>
...
...
...
</div>
</body></html>
How can I do the same using multiples HTML files. I cannot bind to the page the because this div is in another HTML file.
<div data-role="page" class="Page" id="home_page">
<div data-role="content">
<a data-role="button" href="other_page.html" data-inline="true" style="width:300px;">Iniciar</a>
</div>
</div>
Thanks in advance!
There are 2 possible ways here:
First solution. In case you are using multiple HTML files and all of them are loaded with an ajax (this is a standard jQuery Mobile way of page loading). In this case all of javascript must be loaded into the first html file, because jQM will load only BODY content of other html files.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/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>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Second solution. In case you have multiple HTML files but all your pages are linked wit links having rel="external" attribute or ajax is turned of on app level. In this case every html page must have its own HEAD and BODY. And every page must have it own javascript.
Example :
index.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/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>
<script>
$(document).on('pagebeforeshow', '#index', function(){
alert('This is a first page!');
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="b">
<div data-role="header" data-theme="a">
<h3>First page</h3>
</div>
<div data-role="content">
<a data-role="button" id="some-btn" href="second.html" rel="external">Open next page</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://www.dragan-gaic.info/js/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>
<script>
$(document).on('pagebeforeshow', '#second', function(){
alert('This is a second page!');
});
</script>
</head>
<body>
<div data-role="page" id="second" data-theme="b">
<div data-role="header" data-theme="a">
<h3>Second page</h3>
</div>
<div data-role="content">
This is a second page
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>