I tried many ways of using my app as a jquerymobile but didn't succeed.
I know I have to use pageinit instead of document ready. Can you please show me the right way to do it. When I add it, it just simply not working. Here is code
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
try {
$(function() {});
} catch (error) {
console.error("Your javascript has an error: " + error);
}
</script>
<script>
$(document).ready(function() {
$("form").change(function() {
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<form name="myform" id="myform" method="get">
<label for="DogalGaz">Doğal Gaz</label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="">Seçiniz</option>
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
What i did was, just simply send the form data to test2.php file and process. Thank you for any help
The Flip Toggle Switch should have 2 options instead of 3.
Try this:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script>
if (navigator.userAgent.match(/Android/i)) {
window.scrollTo(0, 1);
}
</script>
<script src="https://s3.amazonaws.com/codiqa-cdn/jquery-1.7.2.min.js"></script>
<script src="https://s3.amazonaws.com/codiqa-cdn/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', function() {
$("#myform").change(function() { // use #myform instead of form to only serialize one form.
$.post("test2.php",
$("#myform").serialize());
});
});
</script>
</head>
<body>
<div id="my-page" data-role="page">
<!-- include action and method in case javascript handler fails -->
<form name="myform" id="myform" action="test2.php" method="post">
<label for="DogalGaz">Doğal Gaz. Seçiniz: </label>
<select name="DogalGaz" id="DogalGaz" data-theme="" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
</form>
</div>
</body>
</html>
This will post to test2.php every time you switch the toggle.
Related
I am using jquerymobile 1.4.2.This the code which i am using in my page
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script>
</head>
<body>
<script>
function myFunction()
{
document.getElementById("myText").disabled=true;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText">
</body>
</html>
The above program works fine But if i change that to this code
<script>
function myFunction()
{
document.getElementById("myText").disabled=false;
}
</script>
<p>Click the button to disable the text field.</p>
<select onchange="myFunction()"><option>1</option><option>2</option></select>
First Name: <input type="text" id="myText" disabled="disabled">
Then its not working please help me how to make text field enable using onchange() function
jQM enhances the input and creates a Textinput widget which has its own enable/disable methods (http://api.jquerymobile.com/textinput/#method-disable)
In your example, to enable the input:
function myFunction() {
$("#myText").textinput("enable");
}
Also, you should use unobtrusive javascript and the jQM page functions. e.g. remove the onclick from the markup:
<select id="theSelect" >
<option>1</option>
<option>2</option>
</select>First Name:
<input type="text" id="myText" disabled="disabled" />
Add the handler in the pagecreate jQM event:
function myFunction(selVal) {
if (selVal == '2'){
$("#myText").textinput("enable");
} else {
$("#myText").textinput("disable");
}
}
$(document).on("pagecreate", "#page1", function () {
$("#theSelect").on("change", function(){
var v = $(this).val();
myFunction(v);
});
});
Here is a DEMO
I am trying to get jQuery-mobile to clone a div like I get it to do on jsfiddle.
head
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" type="text/css" href="form.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.maskedinput.min.js" type="text/javascript"></script>
<script type="text/javascript" src="json2.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="CreateXMLScript.js"></script>
<script>
$(document).bind('mobileinit', function() {
$.mobile.page.prototype.options.addBackBtn= true;
$.mobile.page.prototype.options.backBtnText="Back";
$.mobile.page.prototype.options.backBtnIcon="arrow-l";
$.mobile.selectmenu.prototype.options.nativeMenu = false;
$.mobile.page.prototype.options.keepNative = ".native";
$.mobile.keepNative=".native";
})
</script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
HTML
<div id="Template" class="template hide">
<div class="_100">
<div class="_25">
<fieldset>
<label class="label_analysis" for="analysis">Analyte:</label>
<select class="select_analyte" name="analysis" id="analysis">
<option value="">Select</option>
<option value="TN">TN</option>
<option value="TP,NO2+3">TP,NO2+3</option>
<option value="TP,NO2+3,NH3+4">TP,NO2+3,NH3+4</option>
<option value="DO">Dissolved Orthophosphate</option>
<option value="TR">TR Metals, Hardness</option>
<option value="FF">Dissolved Aluminum (FF)</option>
<option value="ULL">TR Metals (ULL Hg)</option>
<option value="TSS">TSS</option>
<option value="TSS/TDS">TSS/TDS</option>
<option value="DM">Dissolved Metals (FF)</option>
<option value="TOC">TOC</option>
<option value="ABF">Anions, Bromide, Fluoride</option>
<option value="CH">Cations, Hardness</option>
</select>
</fieldset>
</div>
<div data-role="controlgroup" class="_13">
<label><input type="checkbox" data-mini="true" name="Filtered" id="Filtered" value="True">0.45u Filtered</label>
<label><input type="checkbox" data-mini="true" name="Dup" id="Dup" value="True">Field Dup</label>
</div>
<div class="_25">
<fieldset>
<label class="label_preserve" for="preserve">Preserved</label>
<select class="select_preserve" name="preserve" id="preserve">
<option value="">Select</option>
<option value="HNO3">HNO₃</option>
<option value="H2SO4">H₂SO₄</option>
<option value="H3PO4">H₃PO₄</option>
<option value="HCL">HCL</option>
<option value="None1">None</option>
</select>
</fieldset>
</div>
<div class="_20">
<fieldset>
<label class="label_cool" for="cool">Cooled</label>
<select class="select_cool" name="cool" id="cool">
<option value="">Select</option>
<option value="Ice">Ice</option>
<option value="Frozen">Frozen</option>
<option value="None">None</option>
</select>
</fieldset>
</div>
<div class="_13">
Remove
</div>
</div>
</div>
<div id="addNew">
ADD ANALYTE
</div>
Script
<script>
$(document).ready(function() {
(function ($) {
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
})(jQuery)
});
</script>
I have received tons of help with jQuery but no matter what I do, it just won't work in jQuery-mobile. Either it clones upside down (the 1st item becomes last and all fields are populated) or the new fields on the new div won't let me populate them (the current issue).
I didn't create a Fiddle as everything I have tried works in the fiddle, just not in Mobile.
I checked the source of your pages from the link you provided, im not sure exactly what you are trying to achieve as you have a Complex Form. However, place this amended code i made below just before the </body> tag of your page and remove the other script part you have at the moment. Make sure you do a backup of your JQM APP before just incase you need to Undo these changes i am providing.
I also noticed a few $(document).ready(function() { in your pages, these are not needed so remove them. Just a bare bones click functions are ok. You can consolidate all these under one <script> ///// </script>. Where you place your functions is important, as some need to be in the <head> some in the <body> and some after the </body> or </html> tags
<script>
var Template = $('#Template');
var count = 0;
var nextId = 0;
Template.find('.removeNew').on('click', function (e) {
e.preventDefault();
$(this).closest('.template').remove();
count--;
});
function cloneTemplate(removable) {
var clone = Template.clone(true, true);
clone.attr('id', clone.attr('id') + nextId);
clone.find('label[for]').each(function( index ) {
var elem = $(this);
elem.attr('for', elem.attr('for') + nextId);
});
clone.find('select, input').each(function( index ) {
var elem = $(this);
elem.attr('id', elem.attr('id') + nextId);
elem.attr('name', elem.attr('name') + nextId);
});
if (!removable) {
clone.find('.removeNew').remove();
}
clone.insertBefore("#addNew").removeClass('hide');
count++;
nextId++;
}
// Create First Analyte and delete the remove button.
cloneTemplate(false);
$('a.showNew').on('click', function (e) {
e.preventDefault();
cloneTemplate(true);
return false;
});
</script>
The code below tries to implements a button action in jQueryMobile,but it is not working for me. Please let me know where I am wrong.Everything is written in a HTML file.
I am facing some problem in providing my code here. Here is what I am trying.
In standard HTML format, I am writing the below code between script tags
$('#theButton').click(function() {
alert('The Button has been clicked,');
});
And in the body tag ---
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
But the action is not getting called.
EDIT: Please try the code below:
<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>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>
When I clone and append/prepend html fragments in jquery mobile, fragment is doubling up. You can plug this code and test.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- standard Jquery/jQuery Mobile Libraries -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
</head>
<body>
<div data-role="page" id="mainmenu">
<div data-role="header" data-position="inline"></div>
<div class="ui-body ui-body-c">
<div data-role="content">
click to view HTML
<pre>
<span id="HTMLOut">
my HTML output goes here...
</span>
</pre>
</div>
</div>
<div id='groupA' class='preGroups'>
<div id='placeholder' ></div>
</div>
<fieldset class="ui-grid-a" data-inline="true">
<div class="ui-block-b"><button type="submit" class="addPart" data-theme="a" data-icon="plus">Add Serial/Part</button></div>
</fieldset>
<div id='template'>
<div data-role="fieldcontain">
<input type="range" name="QTY" id="preQuant01" value="1" min="1" max="10"/>
</div>
</div>
</div>
<style>
#template, #HTMLOut, #XMLOut{
display:none;
}
</style>
<script>
counter = 1;
$(document).ready(function() {
/* Add a listeners to Add Part */
$('.addPart').click(function() {
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
counter++;
myClone.appendTo("#placeholder").trigger( "create" );
// myClone.appendTo("#placeholder").page(); does not work in this version?
return false;
});
// Toggle Show/Hide HTML
$('.preShowHTML').click(function() {
$("#HTMLOut").text($("body").html());
$("#HTMLOut").toggle();
return false;
});
});
</script>
I think the counter is in the wrong place. However this does not make the example any more functional.
myClone = $('#template').clone();
myClone.attr("id", "template-" + counter);
//counter++;
myClone.appendTo("#placeholder");
$('#template-'+counter).page();
counter++;
I am not sure that this is correct approach - cloning html after jquery mobile has applied it's listeners and formatting.
AJAX might make it slightly cleaner but here is a start:
$(document).ready(function(){
$("div").live("pageshow", function () {
counter = 0;
$(".addPart").click(function() {
counter++;
$("#placeholder").append('<div id="template-'+counter+'"><div data-role="fieldcontain"><input type="range" name="slider" class="ui-slider-input ui-input-text ui-body-null ui-corner-all ui-shadow-inset ui-body-c" id="slider'+counter+'" value="0" min="0" max="100" /></div></div>');
$("#template-"+counter).trigger("create");
return false;
});
});
});
</script>
I tried add click function on item, but seems that does not work correctly.
$(document).ready(function(){
$("#vibrateBtn").click(function() {
window.alert('test');
});
});
I tried also disable Ajax loading, with>
$(document).bind("mobileinit", function(){
ajaxEnabled:false;
});
But with same result.
Where can be problem please?
Thanks for any advice.
in jquery mobile document.ready() doesn't work and use .live to bind the click event instead of using the short hard .click().
There are other event like pagebeforecreate, pagecreate. check the jquery demo for the list of event.
$(document).live('pageshow',function(){
$("#vibrateBtn").live('click',function() {
window.alert('test');
});
});
Please try this code
<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>
<script language="javascript">
$(function() {
$('#theButton').on('tap click',function(event, ui) {
alert('The Button has been clicked');
});
});
</script>
</head>
<body>
<div data-role="page">
<div data-role="content">
<input type="button" id="theButton" name="theButton" value="The Button">
</div>
</div>
</body>
</html>