MultiDatesPicker addDisabledDates - php

Error : Uncaught Missing number at position 0
php
$date_disabled = "'03/04/2015','03/10/2015'";
html
<input type="text" id="date" value="<?php echo $date_disabled; ?>" />
javascript
$(document).ready(function(){
$('#booking_date').multiDatesPicker({
addDisabledDates: [$('#date').val()]
});
});
Just wondering if able to pull value from html input text to javascript like this? i'm not sure why is this error appearing...
if i set the value manually into the javascript than the multi date picker is running well without any problem.
$(document).ready(function(){
$('#booking_date').multidatesPicker({
addDisabledDates:['03/04/2015','03/10/2015']
});
});
Thousand appreciate to anyone could help. :D

Use this Demo here
var array = ["14-03-2015","17-03-2015","16-03-2015"]
$('input').datepicker({
beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [ array.indexOf(string) == -1 ]
}
});

Related

how to add datepicker functionality to dynamically editable table column

I have code snipe that works great the problem started when i had to add datepicker on top of it.
working sample:
<td
id="test_<?php echo $id; ?>"
title="Double click to edit"
class="editable"
name="ExpiryDate_<?php echo $id; ?>"
>
<?php echo $Expiry_Date; ?>
</td>
<script>
$(document).ready(function () {
$(".editable").dblclick(function () {
var OriginalContent = $(this).text();
var pieces = $(this).attr("name");
ID= pieces;
var count = 1;
$(this).addClass("cellEditing");
count += 1;
$(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text' value='' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var option = confirm('Are you sure u wanna change');
if(option){
..
//Call the server side file to communicate with database.
//send do some staff mostly send GET xmlhttp.send();
..
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
</script>
to add datepicker i add under:$(this).children().first().focus();
var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
origFocus.focus();
});
and
This datepicker works great I can get dapicker to show dynamically, click on date without editable field closing on me and on datepick widget get close focus return to editable field and i can click Enter key==13 so I can send date to server using GET, problem is when I click anywhere on page widget just reopens I tried a lot of tweaks to make it go away but I really don't know what to do i'm stuck.
What I would like to mention the site use bootstrap v3.1.1 and jquery 1.11.1
Fiddle
Added fiddle, if I remove
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
Then I can't leave editable field but if I leave that part of code I can't make datepick to work. After picking date it should be focus on editable field again so user can click enter to send GET
Maybe you should provide some fiddle, but from what I can see the wrong line of code is:
var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
origFocus.focus();
});
You shouldn't set focus on origFocus variable, because doing that you re-apply focus on the element. Just try these options:
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
document.activeElement.focus();
});
or
$("input[id *='t1_']").on('click',function() {
$(this).datepicker({
dateFormat: "dd-mm-yy"
}).focus();
}).blur(function(){
document.activeElement = null;
});
or just not setting the blur handler at all.
EDIT
Ok, i cleaned it up a little. Hope it helps
jsfiddle

Jquery UI Multi datepicker issue on retrieving dates

i am using this http://multidatespickr.sourceforge.net/#method-addDates to enable multiple date select. everything works fine but i am wondering how to get the selected dates to PHP.
below is the html code.
<input type="text" name="outgoing_call_dates" value="" id="outgoing_call_dates_id" class="hasDatepicker">
as you can see value tag is empty always when i add, its normally appending to the end but not value tag is doing the same. please check this image.
Original source : http://multidatespickr.sourceforge.net/#method-addDates (example : From input)
Please help me find a way
HTML
<input id="datePick" type="text"/>
<input id="get" type="button" value="Get" />
JS
$('#datePick').multiDatesPicker();
$('#get').on("click",function(){
var dates = $('#datePick').val();
if(dates !=''){
dataString = 'dates='+dates;
$.ajax({
type:"POST",
url : "URL_TO_PHP_FILE",
data : dataString,
dataType : 'json',
success : function(data) {
alert(data);
}
)};
}
});
PHP
$dates = ($_POST['dates']);
echo json_encode($dates);
value attribute defines default value. If you change the value of input element, it won't be inside source with value="YOUR_ENTERED_VALUE" .
To access value in client side, you can use JS or jQuery.
For example using jQuery:
var dates = $('#outgoing_call_dates_id').val();
In pure JS:
var dates = document.getElementById('outgoing_call_dates_id').value;
For PHP,
when you'll receive it on your action page.
On that page,
use this:
$dates = $_POST['outgoing_call_dates'];
or
$dates = $_GET['outgoing_call_dates'];
depending on the method you use.
Please have a look # this....!
Hope this will fix your issue :)
<no codes :|>
http://jsfiddle.net/3t4j9/23/

changing text of one textbox when written in other

is it possible that when nepali date is inserted on one textbox will be changed into eng date and be seen on other text box without refreshing any page?
i have a function on PHP that changes nep date to eng and vice-versa i just want that to be run on the particular textbox when anyone inserts nepali date on other textbox
i call my function for changing date is
PHP Functions
NepToEng()
EngToNep()
HTML Elements
<input type="text" name="dobnep" size="26" maxlength="300" />
<input type="text" name="empdobeng" size="26" maxlength="300" />
Scenario :
when anyone writes nepali date of birth on dobnep will be converted into english and be shown on empdobeng
var input1 = $('[name="dobnep"]'),
input2 = $('[name="empdobeng"]');
input1.on('keyup', function() {
NepToEng(this.value).done(function(data) {
input2.val( data );
});
});
input2.on('keyup', function() {
EngToNep(this.value).done(function(data) {
input2.val( data );
});
});
function NepToEng(val) {
return $.ajax({
url : 'link/to/script_that_converts_to_eng.php'
data: {date: val}
});
}
function EngToNep(val) {
return $.ajax({
url : 'link/to/script_that_converts_to_nep.php'
data: {date: val}
});
}
I would highly suggest reimplementing those functions in Javascript, otherwise you could be making a lot of HTTP requests to your server and degrading the performance of your application for what I imagine is a simple calculation that a browser could handle very quickly.
PHP functions cannot be executed based on user actions. One solution is to use Ajax function that sends the value of dobnep and retrieves its empdobeng in english.
there you go...if you have the entire functionality ready,You just need a little bit of ajax magic in your code.
fetch the value of your engDATE(lets say FETCHED_VALUE) and in responsetext of ajax put this code,
document.getElementById(id).value="FETCHED_VALUE"
note:allot an id for the text box with name=empdobeng and use function keyup
this was my code and it helped me... which i mixed
Javascript
function add() {
num1=$("#dobnep").val();
$.ajax({
type: "POST",
url: "change.php",
data: "dobnep="+num1,
success: function(html){
document.getElementById('empdobeng').value=html;
}
})
}
HTML
<input type="text" name="dobnep" id="dobnep" onblur="add()" size="26" maxlength="300" />
<input type="text" name="empdobeng" id="empdobeng" size="26" maxlength="300" />
PHP
$date=UTF8toEng($_POST['dobnep']);
echo EngtoUTF8(NepToEng($date));

Change text input values dynamically

My question might be quite easy for you guys, but it's hard for me...
I have a text field and I want to change its value between once <label id="some_id"> is clicked. Until what I've described now, I can do it myself with jQuery, but here comes the complex part (for me, obviously):
I have two values I want for that text field, and once that <label> is clicked, it switches to the value that isn't shown, but once we click it again, it goes back to the original text the text field contained.
I have to keep my jQuery/JS internal because I get the desired values from the database and I don't want to make my .js files .php.
This is what I got:
<label for="html" onclick="$('#html').val('<?php echo $image->convert('html_b', $image_data['image_link']); ?>')">HTML:</label>
<input type="text" id="html" value="<?php echo $image->convert('html_a', $image_data['image_link']); ?>" readonly />
It does the first part I need, changing the value of the field to the new value, but once that button gets clicked again, I want the original text.
Thank you.
You can compare its current value to the available possibilities.
<label id="toggle" for="stuff">I'm a label</label>
<input type="text" val="" name="stuff" id="stuff">​
var possibilities = ["foo", "bar"];
$('#toggle').click(function(){
var old_val = $("#stuff").val(), new_val;
if (old_val == possibilities[0])
new_val = possibilities[1];
else
new_val = possibilities[0];
$("#stuff").val(new_val);
});​
demo
First, don't use inline JavaScript.
You can use a combination of .toggle() and data-* attributes for this. For example, using a data-toggle attribute for the value you want to toggle with.
<label for="html" data-toggle="This is a placeholder">HTML:</label>
<input type="text" id="html" value="This is my real value" readonly>​
$("label[for][data-toggle]").each(function() {
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue;
$this.toggle(function() {
originalValue = $for.val();
$for.val($this.data("toggle"));
}, function() {
$for.val(originalValue);
});
});​
See it here.
UPDATE #1
I added usage of for attribute of <label>.
UPDATE #2
If you don't want to use .toggle() due to the deprecation notice.
$("label[for][data-toggle]").each(function() {
/* cache */
var $this = $(this);
var $for = $("#" + $this.attr("for"));
var originalValue = $for.val();
/* state variable */
var which = 0;
$this.click(function() {
$for.val(which ? originalValue : $this.data("toggle"));
which = 1 - which;
});
});​
See the non-.toggle() alternative here.
For doing this, on the first button click you need to store the current value of input in some variable and then on 2nd click you can assign that variable to input value. If you donot want to have js file, you can simply use <script></script> tags to write the jquery.
`<label id="label" onclick="replaceText('newvalue')">Click Mee</label>
<input id="html" type="text" value="some value">
<script>
var currentValue="";
function replaceText(newval){
currentValue= $("#html").val();
if(currentValue!=newval)
$("#html").val(newval);
$("#label").attr("onclick","replaceText('"+currentValue+"')");// Here we assigned the other value to label onclick function so that it will keep on toggling the content.
}
</script>`
DEMO HERE
You can store the values into JavaScript variables and use jQuery click method instead of onclick attribute.
var def = "<?php echo $image->convert('html_a', $image_data['image_link']); ?>",
up = "<?php echo $image->convert('html_b', $image_data['image_link']); ?>";
$('label[for=html]').click(function() {
$('#html').val(function(i, currentValue) {
return currentValue === def ? up : def;
});
});

Collect checkbox values in jQuery and POST them on submit

I've referred to this post:
Post array of multiple checkbox values
And this jQuery forum post:
http://forum.jquery.com/topic/checkbox-names-aggregate-as-array-in-a-hidden-input-value
I am trying to collect an array (or concatenated string with commas, whatever) of checkbox values in a hidden input field using jQuery. Here's the script code I'm using:
<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
var form = this;
$(form).find("input[name=specialty]").val(function() {
return $("input:checkbox",form).map(function() {
return $(this).attr("name");
}).get().join();
});
});
</script>
A snippet of the relevant HTML:
<form id="advancedSearchForm" name="advancedSearchForm" method="post" action="<?php echo site_url('/magcm/advancedSearch#results'); ?>">
<input type="checkbox" name="FCM" id="FCM" class="chk" value="FCM" <?php echo set_checkbox('FCM', 'FCM'); ?>/>
<input type="hidden" name="specialty" id="specialty" value="" />
<input class="button" name="submit3" id="submit3" type="submit" value="Search" />
I've tried changing "submit" to "submit3" in the jQuery, which breaks (obviously). When I print_r($_POST), the checkboxes POST correctly but the condensed hidden variable does not. (It posts, but a blank value.) The checkboxes persist correctly using CI's hacked set_value() function (Derek needs to implement this in the main trunk... but that's another story)
I'm sure I'm doing something that is wrong and easy to point out. I've just been banging my head against the wall for the past 2 hours on it, trying various functions and changing a ton of things and analyzing it in Chrome dev tools (which don't show any errors).
Help is appreciated. :)
Let's say you applied an class, maybe "tehAwesomeCheckboxen" to every checkbox. Then
<script>
$("#advancedSearchForm").submit(function() {
var chkbxValues = $(".tehAwesomeCheckboxen").val();
$("#specialty").val( chkbxValues.join(",") );
});
</script>
EDIT:
I don't think the $_POST array is getting populated, since the submit is being handled locally by the JavaScript engine. SO... let's try this:
<script>
var chkbxValues = new Array();
$(".tehAwesomeCheckboxen").live("change", function(e){
var val = $(this).val();
if( $(this).is(":checked") ) {
if( chkbxValues.length == 0 || chkbxValues.indexOf(val) == -1){
// Add the value
chkbxValues.push(val);
}
}
else {
// remove the value
chkbxValues.splice( chkbxValues.indexOf(val), 1 );
}
$("#specialty").val( chkbxValues.join(",") );
});
</script>
This adds an event handler the checkboxes themselves, such that checking/unchecking the box alters the hidden element. Then your form handles its submission as normal.
Is this more in line with what you're trying to do?
P.S. Those who upvoted this, please note I have modified my answer. Please verify whether you still find it useful and adjust your vote accordingly.
I ended up solving it using PHP arrays rather than jQuery:
<input type="checkbox" name="chk[]" id="RET" class="chk" value="RET" <?php echo set_checkbox('chk', 'RET'); ?>/>
I changed the name to an array and POSTed it to my script, where I looped through the array and handled it there. Still not sure what the problem was with the jQuery-based solutions, but I figured I'd post this for everyone to refer to in the future.
You've got lots of nested functions() in your JavaScript, makes it hard to follow what you're doing.
However, it seems that you're just passing a function to .val() rather than an actual value. Try this instead:
<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
var form = this;
$(form).find("input[name=specialty]").val((function() {
return $("input:checkbox",form).map(function() {
return $(this).attr("name");
}).get().join();
})());
});
</script>
Or even better, calculate the value first:
<script type="text/javascript">
$("#advancedSearchForm").submit(function() {
var form = this;
var value = $("input:checkbox",form).map(function() {
return $(this).attr("name");
}).get().join();
$(form).find("input[name=specialty]").val(value);
});
</script>

Categories