I'm just discovering jquery-mobile, but I find the documentation not really adapted to "beginners".
So, I have a fieldset with some radiobutton. When the user "check" a button, how to do to save the value in a php session with an ajax call ?
<fieldset data-role="controlgroup">
<legend>Choose a pet:</legend>
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" />
<label for="radio-choice-1">Cat</label>
<input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" />
<label for="radio-choice-2">Dog</label>
<input type="radio" name="radio-choice-1" id="radio-choice-3" value="choice-3" />
<label for="radio-choice-3">Hamster</label>
<input type="radio" name="radio-choice-1" id="radio-choice-4" value="choice-4" />
<label for="radio-choice-4">Lizard</label>
</fieldset>
U need to bind a change handler and fire an ajax call as follows
$('input[name="radio-choice-1"]').live('change', function(){
var selectedValue = $(this).val();
$.post("save.php", {optionSelected: selectedValue});
});
where save.php contents would be
<?php
session_start();
$_SESSION['radio-choice-1-option'] = $_POST['optionSelected'];
?>
Lets start simpler with a jQuery example, how familiar are you with jQuery?
You'll need to bind a handler to the change event on the radio button, then fire an AJAX call to PHP where you set the session variable.
To bind a handler see jQuery docs for the on or live function, something like in a $(document).ready...
$('input[name="radio-choice-1"]').live('change', function(){
var value = $(this).val();
$.ajax({
//see jQuery ajax functions
});
});
But on jQuery Mobile:
You should be using the pageinit event of jQM (jQuery Mobile) to run this code not document.ready, if you're using multiple single-page-templates and ajax transitions even more so - in which case then you should also be using the on function instead of live in order to listen to bubbled events for the current page only.
Then it'll be akin to
$('#yourPage').on('change', 'input[name="radio-choice-1"]', function(){
Related
I got this code in my view that is used for a drag and drop function:
<div class="container">
<form action="~/Home/SaveUploadedFile" method="post"
enctype="multipart/form-data" class="dropzone"
id="dropzoneForm">
</form>
When an image gets dropped in the div the SaveUploadedFile gets triggered. The model im using in the view contains a #Model.Namethat I would love to pass along to the method.
Can I somehow accomplish this in the above code or is it more complicated?
You could put a hidden input.
<form action="~/Home/SaveUploadedFile" method="post"
enctype="multipart/form-data" class="dropzone"
id="dropzoneForm">
<input type="hidden" name="fileName" value="#Model.Name" />
<input id="btn_drop" type="button" value="Drop"/>
...
</form>
Then in jQuery
$('#btn_drop').on('click', function(){
$('#dropzoneForm').submit();
});
I am trying to use the jQuery datepicker for a form on a site that uses jQuery 1.3.2 but it's not working. I have to reference a newer jQuery library for some of my form functionality, and also the jQuery ui for datepicker to work. I have used noConflict for the newer jquery library but it's still not working. I get Uncaught TypeError: Cannot read property 'document' of null in the console. Updating/removing the 1.3.2 reference is not an option.
Here is my fiddle, which works. but i get the error above in Chrome (not FF) and the datepicker will not work on my site. http://jsfiddle.net/pnA33/
Can anyone help? It works locally but not on the server (which is a dev enviornment so I can't share a link). I found this but as I am relatively new to jQuery it is over my head.
jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript">
var jQuery_1_9_1 = jQuery.noConflict(true);
jQuery_1_9_1(document).ready(function() {
jQuery_1_9_1( "#datepicker" ).datepicker({ minDate: -1, maxDate: "+24D" });
jQuery_1_9_1('#pancettaForm').change(function () {
jQuery_1_9_1('.address,#new-ship-date').hide();
if (jQuery_1_9_1('#ship-address').prop('checked')) {
jQuery_1_9_1('.address').show();
}
else if (jQuery_1_9_1('#ship-date').prop('checked')) {
jQuery_1_9_1('#new-ship-date').show();
}
else if (jQuery_1_9_1('#ship-both').prop('checked')) {
jQuery_1_9_1('.address, #new-ship-date').show();
}
});
});
function validateForm()
{
var x=document.forms["pancettaForm"]["order-number"].value;
if (x==null || x=="")
{
alert("Please provide your order number from the confirmation email sent immediately after placing your order.");
return false;
}
}
</script>
HTML:
<form name="pancettaForm" method="post" action="http://lizlantz.com/lcform.php" id="pancettaForm" onsubmit="return validateForm()">
<input type="hidden" value="Pancetta Order Update" name="subject">
<input type="hidden" value="cookware/partners_10151_-1_20002" name="redirect">
<ol>
<li>
<label for="update-ship">I'd like to:</label>
<input id="ship-address" name="update-ship" type="radio" value="update-ship-address"/> Have pancetta shipped to a different address than my skillet<br />
<input id="ship-date" name="update-ship" type="radio" value="update-ship-date" /> Have pancetta shipped sooner than June 14, 2013 <br />
<input id="ship-both" name="update-ship" type="radio" value="update-both" /> Make changes to both the shipping address and shipping date
</li>
<li>
<label for="order-number"><em>*</em>Order Number (available in order confirmation email):</label>
<input type="text" name="order-number">
</li>
<li>
<label for="full-name"><em>*</em>Recipient Full Name:</label>
<input type="text" name="full-name">
</li>
<li class="address" style="display: none;">
<label for="address">
<em>*</em>Address
</label>
<input type="text" name="address">
<label for="address2">
Address Line 2
</label>
<input type="text" name="address2">
</li>
<li class="address" style="display: none;">
<label for="city">
<em>*</em>City
</label>
<input type="text" name="city">
<label for="state">
<em>*</em>State
</label>
<select name="state">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
</select>
<label for="zip">
<em>*</em>Zip Code
</label>
<input type="text" name="zip">
</li>
<li id="new-ship-date" style="display: none;">
<em>*</em><label for="updated-ship-date">New Ship Date:</label>
<input type="text" id="datepicker" name="updated-ship-date" value="Update Your Ship Date" />
</li>
<li>
<label for="phone">
<em>*</em>Phone (for delivery questions)
</label>
<input type="text" name="phone">
</li>
</ol>
<input type="submit" id="button" name="submit" value="Update Pancetta">
</form>
Ah ha! You actually cannot run two versions of jQuery on the same document instance at one time...hence the issue here. This solution comes directly from Splendìd Angst's answer in this thread Can I use multiple versions of jQuery on the same page?
Basically you must declare your noConflict version prior to entering the document "main loop" I suppose you can call it.
Declare your noConflict variable outside the document.ready call...use the standard $(document).ready() syntax, then use (and ONLY use) your noconflict variable within the ready closure. That should do it.
I haven't tested this mind you but it makes sense and it won't take you much tweaking of your code to try it out.
TIL something new about jQuery :)
HTML:
<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>
jQuery:
$(function () {
$('input[type=checkbox]').button();
});
When rendered in the browser it is showing both a traditional checkbox and a button underneath. I can click on either one and they will toggle the checkbox. This is the HTML in the browser:
<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>
When I enter the same into jsfiddle it works perfectly, get just the toggle button. So I'm at a loss what is causing this?
Your jQuery selector is wrong. You need to add " to the type, like this:
$('input[type="checkbox"]').button();
I am new in MVC. I am working on a view where I add two radio buttons.
<label for="lDIV1">
<input id="lDIV1" type="radio" name='rbtab' value='DIV1' onclick="javascript:custom()" />Create
Email:</label>
<label for="lDIV2">
<input id="lDIV2" type="radio" name='rbtab' checked="checked" value='DIV2' onclick="javascript:defaul()" />Default
Email:</label>
<div id='Content' style="display: block">
Now I want to call a function in Action {Http} that is if first radio button is true then call radiobutton1() method or else call radiobutton2() method
Can you guys Help me out how to apply conditions..
im not sure what you want to do because your question is not that clear but here is how you can do something when a checkbox is checked with jquery
http://jsfiddle.net/HQXLm/1/
<input id="checkme" type="checkbox" /> click me to find out if im checked
$('#checkme').click(function(){
if ($(this).is(':checked')){
alert('I am checked, do something here');
}
});
Greetings,
I have the following jquery mobile page:
<div data-role="content">
<center>
<img src="./images/logo320.png" />
</center>
<br><br>
<form method="POST" action="./ajax/login.php">
<label for="login_unameLabel">Username:</label><br>
<input type="text" name="login_uname" id="login_uname" /><br>
<label for="login_pwordLabel">Password:</label><br>
<input type="password" name="login_pword" id="login_pword" /><br>
<button id="login_submit" type="submit" data-theme="a">Submit</button>
</form>
</div>
./ajax/login.php returns either "OK" or "NOK". How can I capture this result in my page?
I keep getting the following error in Firebug:
k.data( [Break On This Error]
false)a.mobile.activePage=k;h(k);y&&D&...dd(k).removeClass("
out in reverse "+
It's as if jquery mobile is performing some operation on the result? I don't want this to happen. Do I have to return a valid jquery mobile HTML page from my PHP?
Any insight greatly appreciated.
Many thanks in advance,
Solution: use <input type="button" id="login_submit" data-theme="a" value="Submit" />
Now I can capture click events via:
<script>
$(document).ready(function() {
$("#login_submit").click(function() {
alert('clicked');
});
});
</script>
using data-ajax="false" in form.
then you can disable jquery mobile auto ajax call