Trying to implement panel event without success
using this code in
$(document).on("panelbeforeopen", "#leftpane", function(event, ui ){ //
alert("panelbeforeopen");
var disableForm = "<?php echo ($_SESSION['user'] == '' ? 'true' : 'false') ?>";
if(disableForm){
alert("form disabled");
}else{
alert("form enabled");
}
});
This will result in just working if i refresh the page totally.
If i put it in my included .js file it works without refreshing the page but PHP function to get user in session will be trick.. I dont want to solve it that way.
my header looks like this:
<head>
<title>Titel</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile- 1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="_js/javascript.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
</head>
html
<body>
<div data-role="page" id="menu">
<!-- Panels begins here -------------------------------------------------------------------------->
<div data-role="panel" id="leftpane" data-position="left" data-swipe-close="true" data-display="overlay" data-theme="a">
<h4 id="loginTitel">Login</h4>
<p id="output"></p>
<div id="formDiv">
<form id="loginForm" >
<label for="usn" class="ui-hidden-accessible">Username : </label>
<input type="text" maxlength="25" placeholder="username" data-mini="true" required autofocus name="username" />
<label for="passwd" class="ui-hidden-accessible">Password : </label>
<input type="password" maxlength="25" placeholder="password" data-mini="true" required autofocus name="password" />
<input name="action" type="hidden" value="login" />
<button data-theme="b" id="submit" data-mini="true" type="submit">Login</button>
</form>
</div>
<p />
</div>
<!-- /leftpanel -->
<div data-role="panel" id="infoPanel" data-display="overlay" data-position="right" data-theme="b">
<h2>Information</h2>
<p>content</p>
</div>
<!-- /rightpanel -->
<!-- Panels end here -------------------------------------------------------------------------->
<div data-role="header" position="inline"><img src="_pic/globe.png" alt="Low resolution logo" class="align-right"/>
<h1>JQM Site</h1>
</header>
</div>
<div data-role="content" id="content">
<h4>Titel</h4>
<p>
content
</p>
</div>
<footer data-role="footer" class="ui-body-c" data-position="fixed"> </footer>
</div>
Main function I´m trying to reach here is to make a check if user session exist and show content in leftpanel depending on result of Session.
maby I´m approaching this all wrong? an example would be much helpful
Related
This question already has answers here:
jQuery AJAX submit form
(20 answers)
Closed 4 years ago.
I created a contact page.
When I click on the submit button, this form sends my form information to the server-side file (PHP), but the submit button does nothing.
I do not get an answer in the AJAX!
<script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function() {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function(response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
return false;
});
});
</script>
<!doctype html>
<html>
<head>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<meta charset="utf-8">
<title>My Contact form</title>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="#contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="submit" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
</body>
</html>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['description'];
$to = 's3dhossein#gmail.com';
$subject = 'the subject';
$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
$headers = 'From: s3dhossein#gmail.com' . "\r\n";
if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
mail($to, $subject, $message, $headers); //This method sends the mail.
echo "Your email was sent!"; // success message
}else{ echo "Invalid Email, please provide an correct email.";
}
?>
Where do you think the problem is?
Can an error come from AJAX?
Found problems:
1) An error is raised: Error: Bootstrap's JavaScript requires jQuery. It means that the bootstrap's js file must be loaded after the jQuery's js file. So invert their positions:
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
2) An error is raised: ReferenceError: $ is not defined for the line $(document).ready(function () {. This means that the jquery is not recognized inside your script. So bring all the js imports in the page head. The times for the js imports at the bottom of the page are long gone.
3) The form tag must be <form id="contactform">, not <form id="#contactform">.
4) If you are submitting through an ajax request, then you must use a button of type "button", not of type "submit". Then you can remove the return false; from the $('#submit').click(function (){...} function too.
Suggestions:
Define an "error" callback for the ajax request.
Define the meta tags as the first ones in the head tags.
Working code:
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes" />
<meta charset="UTF-8" />
<!-- The above 3 meta tags must come first in the head -->
<title>My Contact form</title>
<!-- CSS resources -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="styles/contactform-style.css" rel="stylesheet" id="contact-from-style" >
<!-- JS resources -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function () {
$('#submit').attr('value', 'Please wait...');
$.post("sender.php", $("#contactform").serialize(), function (response) {
$('#success').html(response);
$('#submit').attr('value', 'SEND');
});
});
});
</script>
</head>
<body>
<section id="contact">
<div class="container prop">
<!-- <div class="well well-sm">
<h3><strong>Contact us Pars Coders </strong></h3>
</div>-->
<div class="row" id="p">
<div class="col-md-7">
<img src="img/email-icon.png" class="img-responsive text-center" alt="Pars Codres" />
</div>
<div class="col-md-5">
<h4><strong>Tmas Ba ma </strong></h4>
<form id="contactform">
<div class="form-group">
<input type="text" class="form-control" name="name" value="" placeholder="Name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" value="" placeholder="E-mail">
</div>
<div class="form-group">
<textarea class="form-control" name="description" rows="3" placeholder="Description"></textarea>
</div>
<button class="btn btn-success" type="button" name="button" id="submit">
<i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send ...
</button>
<div id="success" style="color: red;">؟</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
I am experiencing a weird issue... when I load the page the first time this works completely:
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
but if I try POSTing to the same page again, with my "Add" or "Remove" button, the above function doesn't work any longer. In other works, the phone field will be perfect and filtered when the page is first loaded, but when you try and add more club fields, the phone filter no longer works. Why isn't the phone field being masked anymore, am I doing something wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs -->
<meta charset="utf-8">
<title>Test Page</title>
<meta http-equiv="cache-control" content="no-cache"/>
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<!-- css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/framework.css">
<!-- Scripts -->
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$("#phone").mask("(999) 999-9999");
});
</script>
</head>
<body>
<div data-role="page">
<!-- header -->
<div data-role="header" class="page-header">
</div>
<!--/header -->
<form style="" method="POST">
<fieldset style="text-align: center;">
<label for="phone">Cell Phone</label>
<input type="tel" id="phone" style="" value="<?php if(isset($_POST['phone'])) echo $_POST['phone'];?>" name="phone" />
<br />
<?php
if(isset($_POST['add']))
$_POST['club_num']++;
if(isset($_POST['remove']) && $_POST['club_num'] > 1)
$_POST['club_num']--;
if(!isset($_POST['club_num']))
$_POST['club_num'] = 1;
?>
<input type="hidden" value="<?php if(isset($_POST['club_num'])) echo $_POST['club_num'];?>" name="club_num" />
<h3 style="font-size: 1.5em; margin-top: 40px;">Are you in a Club?</h3>
<?php
$count = 0;
do {
$count++;
?>
<label for="clubs<?=$count?>"><?=$count?>. Club</label>
<input type='text' id="clubs<?=$count?>" name="clubs<?=$count?>" value="<?php if(isset($_POST['clubs'.$count])) echo $_POST['clubs'.$count];?>" />
<?php if($count == $_POST['club_num']){ ?>
<div style="text-align: center; display: inline-block;" data-type="horizontal" data-role="controlgroup" data-mini="true">
<input data-theme="e" data-icon="plus" type="submit" name="add" value="Add" />
<input data-theme="e" data-icon="minus" <?=($_POST['club_num']==1)?'disabled="disabled"':''?> data-iconpos="right" type="submit" name="remove" value="Remove"/>
</div>
<?php
}
} while ($count < $_POST['club_num']);
?>
</fieldset>
</form>
<br />
<!-- footer -->
<div data-role="footer" class="footer">
<div class="ui-grid-solo">
<div class="ui-block-a">
<div class="ui-bar ui-bar-e" style="height:120px">
</div>
</div>
</div>
</div>
<!-- /footer -->
</div>
<!-- /page -->
</body>
</html>
When one of the buttons is pressed the page content is reloaded using AJAX. This means the original element '#phone' (that you bound the mask function to) is replaced.
I can't see where you are doing the AJAX request from, but you need to call $("#phone").mask("(999) 999-9999"); again once the page has reloaded.
I figured out how to solve this problem, by using jd182 answer and jeroen comment and link here: http://demos.jquerymobile.com/1.2.0/docs/forms/forms-sample.html
Since it is submitting an ajax form, like jd182 stated, and because it was mobile jquery, all post automatically send as a ajax post.
All I had to do was change
<form style="" method="POST">
to
<form style="" method="POST" data-ajax="false">
and it fixed the problem, because it posted regularly!
Thanks jeroen and jd182!
I have tried to get this work for hours.
Both test pageinit and pageshow on row 1 in login.js with no response at all, but the page is still being loaded and I not getting any javascript error when I run it in FF.
From index.html
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>PSForum Notiser</title>
<link rel="stylesheet" href="js/jquery.mobile/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" src="phonegap.js"></script>
<script src="js/jquery.mobile/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile/jquery.mobile-1.3.2.min.js"></script>
<script src="js/main.js"></script>
<script src="js/login.js"></script>
</head>
From login.html
<div id="loginPage" data-role="page">
<div data-role="content">
<form id="loginForm">
<div data-role="fieldcontain" class="ui-hide-label">
<label for="username">Username:</label>
<input type="text" name="username" id="username" value="" placeholder="Username" />
</div>
<div data-role="fieldcontain" class="ui-hide-label">
<label for="password">Password:</label>
<input type="password" name="password" id="password" value="" placeholder="Password" />
</div>
<input type="submit" value="Login" id="submitButton">
</form>
</div>
</div>
From login.js (the part wish not running)
$("#loginPage").on('pageinit', function(){
alert("Hello world!");
console.log("loginPage is loaded");
checkPreAuth();
var form = $("#loginForm");
$(form).on("submit",handleLogin);
if(window.localStorage["username"] != undefined) {
$("#username", form).val(window.localStorage["username"]);
}
});
I hope the wisdom of stackoverflow can help me find why $("#loginPage").on('pageinit') not firing?
Best regards
I am learning to write web apps at the moment and have built a small calculator. The problem is that the page refreshes after I press one of the form buttons.
I have tried the data-ajax="false" in several of the tags to no avail. I have tried it in the and tags but no luck.
Any ideas? Below is my code:
<html>
<head>
<title>GST Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- FontAwesome - http://fortawesome.github.io/Font-Awesome/ -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- jQueryMobileCSS - original without styling -->
<link rel="stylesheet" href="css/jquerymobile.css" />
<!-- nativeDroid core CSS -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.css" />
<!-- nativeDroid: Light/Dark -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.light.css" id='jQMnDTheme' />
<!-- nativeDroid: Color Schemes -->
<link rel="stylesheet" href="css/jquerymobile.nativedroid.color.blue.css" id='jQMnDColor' />
<!-- jQuery / jQueryMobile Scripts -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script language="javascript" type="text/javascript">
// GST Calculator Script
function addgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var subtotal = new Number(dollarAmount);
var gst = new Number(dollarAmount * 0.1);
var total = new Number(dollarAmount * 1.1);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
function subtractgst(form) {
var dollarAmount = new Number(form.dollarAmount.value);
var gst = new Number(dollarAmount / 11);
var subtotal = new Number(dollarAmount - gst);
var total = new Number(dollarAmount);
form.subtotal.value = subtotal.toFixed(2);
form.gst.value = gst.toFixed(2);
form.total.value = total.toFixed(2);
}
</script>
</head>
<body>
<div data-role="page" data-theme='b'>
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme='b'>
<i class='icon-ellipsis-vertical'></i>
<h1>GST Calculator</h1>
</div>
<div data-role="content">
<form>
<ul data-role="listview" data-inset="true">
<li data-role="fieldcontain">
<label for="dollarAmount2">Amount:</label>
<input type="tel" name="dollarAmount" id="dollarAmount2" value="" data-clear-btn="true" placeholder="">
</li>
<li>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><button type="submit" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</button></div>
<div class="ui-block-b"><button type="submit" data-theme="b" onclick="subtractgst(this.form)" name="subtractGst" value="Subtract GST" >- GST</button></div>
</fieldset>
</li>
<li data-role="fieldcontain">
<label for="subtotal2">Sub Total:</label>
<input type="text" name="subtotal" id="subtotal2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="gst2">GST:</label>
<input type="text" name="gst" id="gst2" value="" data-clear-btn="true" placeholder="">
</li>
<li data-role="fieldcontain">
<label for="total2">Total:</label>
<input type="text" name="total" id="total2" value="" data-clear- btn="true" placeholder="">
</li>
</ul>
</form>
</div>
</div>
</body>
</html>
Try adding return false; to your onClick event:
onclick="addgst(this.form); return false"
The <input type="submit"> buttons will always submit the form to the server to be processed. Because you're not doing any server-side processing you can just use <input type="button"> elements
see here for more info on the different types of input available.
So your example would be
<input type="button" data-theme="b" onclick="addgst(this.form)" name="addGst" value="Add GST">+ GST</input>
As a side note, it's strongly discouraged to add your click handlers inline like this: onclick="addgst(this.form)" It's usually preferred to do this in the script itself to properly separate your display code and your processor code. Here's a link to Event Listeners
I am very new to javascript, and I am trying to build a mobile app with Jquery Mobile. I would like the user to input one value on each page and then on the last page they will click submit and it will display the value on the last page. I have been working on this for like 4 hours and I can get the calculation to work on the same page as the submit button but not on the next page.
<script>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = (result);}}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
<input id="btnAdd" type="submit" value="Submit" onclick="sum();" data-theme="b" />
<span id="showResult"></span>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
Please try below code.It's displaying the result in the final page.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
function sum()
{
var item1num = document.getElementById('item1num').value;
var item2num = document.getElementById('item2num').value;
{result = parseInt(item1num)*parseInt(item2num);
document.getElementById("showResult").innerHTML = "Result is: "+(result);}
}
</script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="page1">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item1">
item1
</label>
<input name="item1num" id="item1num" placeholder="" value="" type="number" />
</fieldset>
</div>
<a data-role="button" data-transition="slidefade" href="#page2" data-theme="b">
Next
</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div data-role="fieldcontain" id="item1">
<fieldset data-role="controlgroup">
<label for="item2">
item2
</label>
<input name="item2num" id="item2num" placeholder="" value="" type="number" />
</fieldset>
</div>
B
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<span id="showResult"></span>
</div>
</div>
</body>
</html>
You need to pass the value to the pages submitting a form
// page1
<form action="page2" method="post">
<input type="text" name="value1"/>
<input type="text" name="value2"/>
<input type="submit" />
</form>
so in the other page you can get both and work with
// page2
<input type="hidden" name="value1" value="value from page 1"/>
<input type="hidden" name="value2" value="other value from page 1"/>
to get this with jQuery you can do
var val1 = jQuery('input[name=value1]');
var val2 = jQuery('input[name=value2]');