How to get jQuery UI Datepicker selected date to a PHP Session variable when a date selected by user?
Make an AJAX call when the onSelect is trigged.. Just dummy code you can play with:
$('.selector').datepicker({
onSelect: function(dateText, inst) {
$.ajax({
url: "myPHPscript.php?selecteddate=" + dateText,
success: function(){
$(this).addClass("done");
}
});
}
});
Description
You can do this using Ajax. After the Datepicker is closed you can set the Session Variable using a Ajax call.
You can use the DatePicker event onClose if you want to set the variable after the dialog is closed or onSelect after a date is selected. I would prefer the onClose event.
Sample
jQuery
$('.selector').datepicker({
onClose: function(dateText, inst) {
$.post("/backend.php", {"VariableName": dateText});
}
});
PHP (backend.php)
<?php
// set the variable
$_SESSION['VariableName'] = $_POST['VariableName'];
?>
More Information
jQuery.ajax
Related
Below is the Ajax call in index.php
$(document).ready(function() {
$(document).on("click", ".result p", function(e) {
$(this).parent(".result").empty();
var $txt = $(this).text();
document.getElementById("pd").style.display = "block";
document.getElementById("listpd").style.display = "none";
e.preventDefault();
$.ajax({
type: "POST",
url: "piutang.php",
data: {"nama": $txt},
success: function(msg) {
$("#pd").html(msg)
$("#formNama").val('');
},
error: function() {
alert("failure");
}
});
});
});
The piutang.php (inside the Ajax call) has the text box for the date-picker and also the script for the date picker.
<input type="text" id="datepicker" name="tgl" style="width: 85px;" readonly />
<script>
$(function() {
$("#datepicker").datepicker();
});
$('#datepicker').datepicker({
dateFormat: "dd M yy"
}).datepicker("setDate", new Date());
</script>
After the call, inside the div with id:#pd,
I can see the text box of the date picker with the current date.
But it show the default format mm/dd/yyyy not dd M yy.
What I've tried so far is cut the script code in piutang.php,
then paste/insert the code inside Ajax success, right after $("#pd").html(msg),
but the result is the same thing, inside the div with id:#pd,
the text box show the current date with its default format mm/dd/yyyy.
How do I solve this ?
Thank you.
You need to initialize date picker one time with all settings:
$('#datepicker').datepicker({
dateFormat: "dd M yy"
}).datepicker("setDate", new Date());
This one is enough. Remove other one.
This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 6 years ago.
I created a table with radio button using ajax request. I want to get value from radio button by click event. But jquery event doesn't work on radio button.
my created table by ajax below
I have called this ajax result by bellow code
<code>
<script type="text/javascript">
$(document).ready(function(){
$(".todayTask").click(function(){
var employee = '<?php echo trim($userID);?>';
$.ajax({
url: "ajax_call.php",
type:"POST",
data:{userID:employee},
success: function(result){
$('#taskList').html(result);
}});
});
});
</script>
</code>
Now I want to get value from radio button which stay in ajax result...
by below code but does not work...
<code>
<script type="text/javascript">
$(document).ready(function(){
$("#s").click(function(){
var status_val = $(this).val();
alert(status_val);
});
});
</script>
</code>
Since your radio buttons are loaded via jquery, you need to use on event:
$(document).ready(function(){
$('#taskList').on("click","#s", function(){
var status_val = $(this).val();
alert(status_val);
});
});
You need to also use a class ".s" instead of an ID "#s", because an ID needs to be unique, here is an example:
$('#taskList').on("click",".s", function(){
Bind your click event using on:
$("table").on("click","#s" ,function(){
var status_val = $(this).val();
alert(status_val);
});
Note: ID must me unique. So, either use classes or make sure you have unique id
I have this code below that gets the data from the POST and return the data as a table. When the code runs I put Console Log to see what is happening once the SUBMIT button is pressed. When the console log shows as "done" I want to show the table instead, but can't see why it's not happening.
<script type="text/javascript">
$(function(){
$('#searchform').on('submit', function(e){
e.preventDefault();
//alert($('#searchpostcode').val())
$.post('includes/jobdetailssearch.php',
$('#searchform').serialize(),
function(data, status){
$('.table-responsive #displayadd').html(data.Display);
//$("#table-responsive td").last().append(data);
console.log("done");
}).fail(function () {
console.log("fail");
});
});
});
</script>
Why would this be?
Make sure your php script returns a serialized json structure, which can be parsed by javascript.
Try to console.log(data) in your callback function to see what is returned from PHP.
Try This:
<script type="text/javascript">
$(function(){
// Submit Button Pressed
$(document).on('submit','#searchform', function(e){
// Prevent Default Click
e.preventDefault();
//The first parameter of $.post() is the URL we wish to request
$.post("includes/jobdetailssearch.php",
{
//Then we pass in some data to send along with the request
searchval:$('#searchform').val()
},
//The third parameter is a callback function. The first callback parameter holds the content of the page requested, and the second callback parameter holds the status of the request.
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
});
</script>
Note:
$('#searchform').on('submit' work same as $('#searchform').submit( but when you use $(document).on('submit','#searchform' then it will also work for the DOM added later.
So i've a situation where I have a selectbox that makes a jquery .post call to another script on a .change event.
I was wondering if there is anyway i can revert the selectedoption back to the original default should something occurs or that my .post event fail?
Hi ppl, I'm sorry.
Here's the javascript code. I've made some amendments to it. I'm trying to get the second line to work as this code is not working now due to some errors(due to don't know what on the second line). My selectbox is part of a list so i'm not able to make it a unique id to it and to remember the box the user selects, i need to use $(this).
$('.order_stateselect').click(function(){
var val=$(this).find(":selected").val();
$(this).change(function(){
if(confirm('Confirm Order Status Change?')){
var conduct_status_chge=$.post('/seller/helpers/order_status_change.php',{order_item_id:$(this).parent('td').siblings('.order_item_id').text(),order_item_status:$(this).find(':selected').val()},function(data){
alert(data);
})
.error(function() { alert("error"); })
}
});
});
Difficult to tell without code, but I'll try
$("#selectbox").data('origValue', $("#selectbox").val());
$("#selectbox").on('change', function () {
$.post(...).done(function () {
// other stuff
$("#selectbox").data('origValue', $("#selectbox").val());
}).fail(function () {
$("#selectbox").val($("#selectbox").data('origValue'));
});
});
Use something like this
var value=$("#selectbox").val();
$.ajax({
type:post,
url:"something.com",
success:function(){
},error:function(){
$("#selectbox").val(value);
}
})
$('select').val('defaultvalhere');
You could use this to select first option not regarding default value:
$('#selectId option:eq(0)').attr('selected',true);
you can simply use a global variable to save the option selected previously. Once save you can just use that on your error Its something like this
<script type="text/javascript">
this.previousVal = 0;
function changeHandler(selectBox)
{
$.ajax({
type:post,
url:"URL",
success:function(){
//ur code
this.previousVal=selectBox.selectedIndex;
},error:function(){
//use previousVal and set the value back to the previous value
}
})
}
</script>
<select id="changeLang" name="changeLang" onchange="changeHandler(this)"></select>
I have asked this before, but my meaning was not understtod...
My Situation is that I need the Start and End JQuery datepicker on the webpage, and it must... #1 - The End Date must always be greater then Start Date... #2 - The date range must POST data from MySQL to create a table of the data on the webpage.
How can I change the script below (that has #1 working of the tasks needed above), to also POST the information from MySQL via PHP back to the HTML DIV.
See the example of what I am building on my webpage here
1.<script type="text/javascript">
$(function () {
var start1 = $('#start1');
var end1 = $('#end1');
start1.datepicker({ onClose: clearEndDate });
end1.datepicker({ beforeShow: setMinDateForEndDate });
function setMinDateForEndDate() {
var d = start1.datepicker('getDate');
if (d) return { minDate: d }
}
function clearEndDate(dateText, inst) {
end1.val('');
}
})
There was another jQuery function on your site that you didn't include:
$('#button').click(function() {
$.post('report.php', {
start: $('#start1').val(),
end: $('#end1').val()
},
function(data) {
$('#genreport').html(data).show();
});
});
You probably already know this, but you will also need to reformat and filter/verify the date inputs in your report.php page. I hope this helps. I didn't realize this question was so old until I just posted it. HAH! Just ignore this, as you probably have it working already.