|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| ||||||||||||||||||||||||||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Codewalkers Forums Sponsor:
|
|
|
|
#16
July 5th, 2009, 04:54 PM
|
|||
|
|||
|
i took a look at it and it seems i can edit a line into this:
var checkBox = $("<input type='checkbox' id='product1' name='product_id[]' value='productnumber' />"); and somewhere make an ifstatement that checks the days that are selected and sets 'productnumber' to the product number it coincides with.. even if this means a huge if statement for every date of the products for months (im thinking well over 400 if statements?) Also, how can you blacklist dates. Like we only sell products starting in august... so we want to restrict people from selecting checkboxes from dates BEFORE that time (and should be able to restrict them from checking the boxes in years like 2011 and ridiculous stuff dates like that, we dont even know if we will be around then!)
|
|
#17
July 5th, 2009, 05:27 PM
|
|||||||
|
|||||||
|
I added a start date and end date to the below code. The script will only show a checkbox for dates that fall within that range. Any other days it will show just the day number.
PHP Code:
For the product ID, I would suggest just leaving it like it is and using php after the form has been submitted to generate your array. The way it is setup, you can't edit that JS checkbox variable without some problems like it will submit only just the one month you are on. Using php would just be easier. It might be possible to change the $("#done").click(function(){... part to do what you want. That is where when you click done it converts that back into the form to be submitted to pass the values.
|
|
#18
July 5th, 2009, 09:50 PM
|
|||
|
|||
|
anyway to contact you via im or something? Please PM me with information and we can sort out some sort of payment.
jamestrowbridge i'll throw you some money aswell soon for your time!
|
|
#19
July 15th, 2009, 09:55 PM
|
|||
|
|||
|
I have a few questions about the php calendar you so kindly coded for me. First of all, when I click done, is prints out an array.
Array ( [action] => renew [dates] => Array ( [0] => Wed Jul 01 2009 ) ) I am not quite sure what to do with this code. In amember, behind the scenes, I create a folder, put protection on that folder so only members can access it. I have one product for each day (as i am supplying a daily product). The customer will use the calendar you coded to choose which product days they wish to download. Each checkbox is a different product. In amember the products are numbered 1, 2, 3, 4, 5 etc. For example, July 01 2009 is product 1, July 02 2009 is product 2 etc. I dont know how to take the information from the array and make it co-respond to the products the checkboxes represent. For example, if you checkmark the box next to July 1 2009, I want when you click done for it to act as though the checkbox was: <input type="checkbox" id="product1" name="product_id[]" value="1"/> (notice the 1 in value="") and if you were to checkmark the box July 1 and July 2 2009, then it should submit asthough two checkboxes were selected: <input type="checkbox" id="product1" name="product_id[]" value="1"/> <input type="checkbox" id="product1" name="product_id[]" value="2"/> How can this be done? Rory
|
|
#20
July 17th, 2009, 03:01 PM
|
|||
|
|||
|
Rory/rfairweather -
Contact me at info@lifeandstylemedia.com if you need anything more with the stuff I sent up, reference this forum URL if you do. Thank you. -Jim
__________________
Sir, a desire of knowledge is the natural feeling of mankind; and every human being, whose mind is not debauched, will be willing to give all that he has to get knowledge.
|
|
#21
July 17th, 2009, 05:55 PM
|
|||||||
|
|||||||
|
PHP Code:
sorry it took so long to get back to this. I have been busy at work so I haven't been able to help but a little here and there. I made the changes you requested and now it submits the product_id as just a list of numbers (days after the startDate variable). If you would have specified that this is what you wanted at first, it would probably have been a little easier to make just becase I could have used an array instead of an object to store the dates (and preserve the date values). And the reason why it just showed the list of dates is because that is how it was setup. There is a form tag on the line right below the body tag. Change the action attribute to point to whatever script you are trying to send the data and after that you can remove the php code at the top that was there for display purposes. Last edited by IAmALlama : July 17th, 2009 at 06:00 PM.
|
|
#22
July 18th, 2009, 03:48 PM
|
|||
|
|||
|
Fantastic! This works so well!
Last few things for you to do and I'll get that payment to you asap. Sorry about the late additions.  {foreach from=$products item=p} <input class="required" type="checkbox" id="product{$p.product_id}" name="product_id[]" value="{$p.product_id|escape}" {if in_array($p.product_id, (array)$smarty.request.product_id)}checked="checked"{/if} /> {/foreach} That code, within the if statements checks the boxes if they are already owned by the user. Is there a way of integrating this into your script? It doesn't have to be the exact same way of doing it, i just wanted to show you how the script we are using looks like (and how it uses smarty to get the product_id when checking to see if the user owns it) ........ Also, for payment options where you have put the "Year" could you put the payment methods at the id="bottom" {foreach from=$paysystems item=p} <input type="radio" id="paysys_id{$p.paysys_id}" name="paysys_id" value="{$p.paysys_id|escape}" {if $p.paysys_id eq $smarty.request.paysys_id }checked{/if} /> {/foreach} I have just copied and pasted this at the "bottom" part, so if thats all i should do you can ignore this. I'm just wondering if theres another way of doing it. .......... Also, (sorry!) Is there a way I can set where to start the product_id number. You stated that it starts at 1 where (days after the startDate variable), but can you make a variable where I can type, for example, 33, and it will start with [0] = 33, [1] = 34 etc. THATS IT. Thank you so very much. I promise there will be a little something extra in it for your hard work. Regards,
|
|
#23
July 18th, 2009, 05:10 PM
|
|||||||
|
|||||||
|
there is a part in the script that says this:
Code:
var data = {};
//to pre-check checkboxes, use this format.
//var data = {'1':true,'2':true};
just change the first line there to match the 3rd line. In that example, boxes with the product id of 1 and 2 will be checked. To work that into a smarty template (I don't know smarty, but based on the code you put...) something like this should work: Code:
{
{foreach from=$products item=p}
{if in_array($p.product_id, (array)$smarty.request.product_id)}{$p.product_id| escape}:true,{/if}
{/foreach}
}
It's just a JSON object. of all the values that need to be checked. Anything that doesn't need to be checked you don't need in the object. For the payment type, just remove the line in the fillCalendar function that says "$("#bottom").text(year); ", that line puts the year at the bottom of the calendar. After that you could just go down to the bottom of the script and in the bottom box put whatever you want and it won't be erased by the year. For doing an offset of the product id, there is a line that says: Code:
var val = Math.ceil((date.getTime()-startDate.getTime())/(1000 * 60 * 60 * 24)); that is what does the calculations to get the days since the start date, it would be easy to just say +33 (or whatever offset you want) at the end and then the numbers would start from there. Just remember that if you want the first to be 33, by default it is 1 so you would have to add 32.
|
|
#24
July 24th, 2009, 08:58 PM
|
|||
|
|||
|
At the current time your most recent code you posted, when you checkmark a box, change the month and then change back, its no longer checked (even though the array does remember that it was checked at one time)
|
|
#25
July 24th, 2009, 09:51 PM
|
|||||||
|
|||||||
|
sorry 'bout that. when making changes from the date to the numbers I missed a spot where is looked up if the checkbox was checked. I fixed it and also added a productOffset variable to make it easier to have that. Then I also removed the year at the bottom and added simple text that just says "bottom text goes here" so you can just replace that.
Code:
<?php
if(isset($_POST) && !empty($_POST)){
echo "<pre>";
print_r($_POST);
die();
}
?>
<html>
<head>
<style type="text/css">
table { width: 400px; }
.top { background-color: #C0C0C0; }
.leader { background-color: #D7D7D7; }
.days { background-color: #EDEDED; }
.today { background-color: #909090; color: #FFFFFF; }
.button { width: 48px; }
.wideButton { width: 98px; }
td { width: 50px; height: 25px; text-align: center; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
var today = new Date();
var date = new Date();
//add a start date and end date.
var startDate = new Date("Aug 1, 2009");
var endDate = new Date("Jul 31, 2010");
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var data = {};
//to pre-check checkboxes, use this format.
//var data = {'1':true,'2':true};
var productOffset = 32;
var checkBox = $("<input type='checkbox'/>");
var checked1 = false;
function fillCalendar(){
month = date.getMonth();
year = date.getFullYear();
var offset=date.getDay();
var clone;
var checked = false;
$("#month").text(months[month]);
$("#calendar .day").each(function(i){
$(this).removeClass("today");
if(offset+date.getDate()-1==i){
$(this).html(date.getDate());
//check if the chrrent date is between the start date and end date.
if(date >= startDate && date <= endDate){
var val = Math.ceil((date.getTime()-startDate.getTime())/(1000 * 60 * 60 * 24)) + productOffset;
checked = (data[val])?true:false;
clone = checkBox.clone().attr({"title":date.toDateString(),"value":val}).prependTo(this);
if(checked)clone.click();
if(date.toDateString() == today.toDateString()) $(this).addClass("today");
}
date.setDate(date.getDate()+1);
} else {
$(this).html("");
}
});
date.setMonth(month);
date.setFullYear(year);
$(".day input:checkbox").unbind("click").click(function(){
var val = $(this).attr("value");
if(this.checked){
data[val] = true;
} else {
delete data[val];
}
return true;
});
}
$(document).ready(function(){
$("#selectAll").click(function(){$("#calendar input:checkbox").each(function(){
if(checked1==this.checked) this.click();
});checked1=!checked1;return false;});
$("#calendar .selectRow").click(function(event){
var checked2 = !$(event.target).parent().parent().find("input:checkbox")[0].checked;
$(event.target).parent().parent().find("input:checkbox").each(function(){ if(this.checked!=checked2)this.click();});
return false;
});
$("#prevMonth").click(function(){date.setMonth(date.getMonth()-1);fillCalendar();});
$("#nextMonth").click(function(){date.setMonth(date.getMonth()+1 );fillCalendar();});
$("#done").click(function(){
var theForm = $("#theForm");
$.each(data, function(key, val){
theForm.append("<input type='hidden' name='product_id[]' value='" + key + "'>");
});
theForm.submit();
});
date.setDate(1);
fillCalendar();
});
</script>
</head>
<body>
<form method="post" action="#" id="theForm">
<table cellpadding="0" cellspacing="2" id="calendar">
<tr class="top">
<td><input type="button" class="button" id="prevMonth" value="<" /></td>
<td colspan=2 id="month"> </td>
<td><input type="button" class="button" id="nextMonth" value=">" /></td>
<td colspan=2><input type="button" value="Select All" class="wideButton" id="selectAll"></td>
<td colspan=2><input type="button" value="Done" class="wideButton" id="done" /></td>
</tr>
<tr class="leader">
<td></td>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr class="days" id="test">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr>
<td class="leader" colspan="8" id="bottom">bottom text goes here</td>
</tr>
</table>
<input type="hidden" name="action" value="renew" />
</form>
</body>
</html>
|
|
#26
August 27th, 2009, 12:01 AM
|
|||
|
|||
|
Sorry its taken so long to get back to you. I had to deal with a very sudden death in my family and everything was put on hold.
First of all, I need your paypal email (or if you want to do it via another method just let me know) for 100USD. Secondly, here is my final list of requests (I apologize how unprofessional this entire process has been, very sorry) What I need is to be able to specify what days get what product_ids rather than what you implemented with the offset. I want to be able to type in, one by one, the product number for each checkbox. As of now I can pick where the counting starts (ie start at 15 so the first check box is 15, second check box is 16 etc) but what if I wanted the first check box to be product id 14 and the second check box to be product id 3. Lets say I wanted to offer products from Aug 1 to Sept 5th. That is 36 days each of them pointing to a different product id. I want a variable where I type in 36 different numbers, maybe a 1d array? Like... var productids = new Array("3”, “15”, “44”...) so that means, the first checkbox would be product_id 3, second checkbox would be product_id 15, third product_id 44 etc. If for whatever reason the number of days between the start/end dates is not the same as the length of the productids array then just make it spit out an error or something similar. Also at the bottom of the calendar (in that grey strip near the bottom) Would it be possible to implement: 1. “Remaining Required Credits:” where it will start at 30 (and each box that is checked will sub1 from that number, but keep in mind if its unchecked again then it will go back up). Until this number has met 0 (zero) the submit/done button will not be clickable (greyed out). This is to force people to have to purchase atleast 30 products at a time (but even though its at 0, you should still be able to check more if you want) 2. “Total cost:” where for each box that is checked it adds $0.75 (essentially each product is 75 cents, so its just adding each time you check a box, but subtracting when you unselect that) Dont forget that paypal email address (pm me?) Best of luck.
|
|
#27
August 27th, 2009, 02:42 PM
|
|||||||
|
|||||||
|
ok, I got all the requests added. The product ids work like you requested, there is just an array of them and the first checkbox is the first value in the array and so on. I also added the bottom text like you requested. I fixed a bug in IE that was causing problems (my mistake) with text in the bottom box by making the width smaller than the text. I confirmed it works in both of the most recent IE and FF browsers also. Added comments for everything I changed, so read the comments first and let me know if you need any help or anything.
Code:
<?php
if(isset($_POST) && !empty($_POST)){
echo "<pre>";
print_r($_POST);
die();
}
?>
<html>
<head>
<style type="text/css">
table { width: 400px; }
.top { background-color: #C0C0C0; }
.leader { background-color: #D7D7D7; }
.days { background-color: #EDEDED; }
.today { background-color: #909090; color: #FFFFFF; }
.button { width: 48px; }
.wideButton { width: 98px; }
td { width: 50px; height: 25px; text-align: center; }
#bottom { width: 100%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//added the php echo so that was it forces the dates to match the server time and you
//don't have problems then with timezones being different. Also there was a small problem
//with the end date that is now fixed by doing this.
var today = new Date("<?php echo date("M j, Y"); ?>");
var date = new Date("<?php echo date("M j, Y"); ?>");
var startDate = new Date("Sep 1, 2009");
var endDate = new Date("Sep 10, 2009");
//get the count of days between the start and end date
var dayCount = Math.round(Math.abs(startDate-endDate)/(1000*60*60*24))+1;
//list of produc ids. just like you said, the first date will be the first value in
//the array and 2nd date will be 2nd value...etc.
//you can also use text if you want. below is an example
var productIDs = new Array(3,4,5,1,2,7,8,9,10,'foo');
if(dayCount != productIDs.length){
alert("The day count doesn't match the product id count. There are "+dayCount+" days and "+productIDs.length+" product ids. Any dates without a product id will not be shown.");
}
var month = date.getMonth();
var year = date.getFullYear();
var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
var data = {};
//to pre-check checkboxes, use this format.
//note: with the new product id array, the number you see corresponds to the product id of that checkbox.
//var data = {'1':true,'2':true};
//added this count function to get a count of checked boxes.
data.count = function(){ var cnt = 0; for(p in this) cnt += (this[p]===true)?1:0; return cnt; }
var checkBox = $("<input type='checkbox'/>");
var checked1 = false;
//our starting credit value for required credits.
var credits = 5;
//cost per checkbox
var cost = .75;
//intitial remaining credits. don't need to change this.
var rCredits = 0;
//initial amount set to 0, don't need to change this.
var amount = 0;
function fillCalendar(){
month = date.getMonth();
year = date.getFullYear();
var offset=date.getDay();
var clone;
var checked = false;
$("#month").text(months[month]);
$("#calendar .day").each(function(i){
$(this).removeClass("today");
if(offset+date.getDate()-1==i){
$(this).html(date.getDate());
//check if the chrrent date is between the start date and end date.
if(date >= startDate && date <= endDate){
var val = Math.ceil((date.getTime()-startDate.getTime())/(1000 * 60 * 60 * 24));
if(productIDs[val]){
checked = (data[productIDs[val]])?true:false;
clone = checkBox.clone().attr({"title":date.toDateString(),"value":productIDs[val]}).prependTo(this);
if(checked)clone.click();
if(date.toDateString() == today.toDateString()) $(this).addClass("today");
}
}
date.setDate(date.getDate()+1);
} else {
$(this).html("");
}
});
date.setMonth(month);
date.setFullYear(year);
$(".day input:checkbox").unbind("click").click(function(){
var val = $(this).attr("value");
if(this.checked){
data[val] = true;
} else {
delete data[val];
}
//next few lines handle the bottom box text. this needs to be in two places so it works on
//checkbox click and on next/prev month click.
amount=data.count()*cost;
rCredits=(credits-data.count()>0)?credits-data.count():0;
$("#bottom").html("Remaining required credits: "+rCredits+"<br />Total Cost: $"+amount.toFixed(2));
if(data.count() < credits){
$("#done").attr("disabled", true);
} else {
$("#done").removeAttr("disabled");
}
return true;
});
//next few lines handle the bottom box text. this needs to be in two places so it works on
//checkbox click and on next/prev month click.
amount=data.count()*cost;
rCredits=(credits-data.count()>0)?credits-data.count():0;
$("#bottom").html("Remaining required credits: "+rCredits+"<br />Total Cost: $"+amount.toFixed(2));
if(data.count() < credits){
$("#done").attr("disabled", true);
} else {
$("#done").removeAttr("disabled");
}
}
$(document).ready(function(){
$("#selectAll").click(function(){$("#calendar input:checkbox").each(function(){
if(checked1==this.checked) this.click();
});checked1=!checked1;return false;});
$("#calendar .selectRow").click(function(event){
var checked2 = !$(event.target).parent().parent().find("input:checkbox")[0].checked;
$(event.target).parent().parent().find("input:checkbox").each(function(){ if(this.checked!=checked2)this.click();});
return false;
});
$("#prevMonth").click(function(){date.setMonth(date.getMonth()-1);fillCalendar();});
$("#nextMonth").click(function(){date.setMonth(date.getMonth()+1 );fillCalendar();});
$("#done").click(function(){
var theForm = $("#theForm");
$.each(data, function(key, val){
//fixed so now it only counts true values and not all values.
if(val===true){
theForm.append("<input type='hidden' name='product_id[]' value='" + key + "'>");
}
});
theForm.append("<input type='hidden' name='productCount' value='" + data.count() + "'>");
theForm.append("<input type='hidden' name='finalCost' value='" + amount + "'>");
theForm.submit();
});
date.setDate(1);
fillCalendar();
});
</script>
</head>
<body>
<form method="post" action="#" id="theForm">
<table cellpadding="0" cellspacing="2" id="calendar">
<tr class="top">
<td><input type="button" class="button" id="prevMonth" value="<" /></td>
<td colspan=2 id="month"> </td>
<td><input type="button" class="button" id="nextMonth" value=">" /></td>
<td colspan=2><input type="button" value="Select All" class="wideButton" id="selectAll"></td>
<td colspan=2><input type="button" value="Done" class="wideButton" id="done" disabled="disabled" /></td>
</tr>
<tr class="leader">
<td></td>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
<tr class="days" id="test">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr class="days">
<td class="leader"><input type="button"value=">>" class="selectRow button" /></td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
<td class="day"> </td>
</tr>
<tr>
<td class="leader" colspan="8" id="bottom" style='text-align: center;'> </td>
</tr>
</table>
<input type="hidden" name="action" value="renew" />
</form>
</body>
</html>
ok, added 2 more hidden fields to the form. I added the count of data and the amount shown to the visitor. DO NOT RELY ON THIS DATA. it is more for verification that the amount they saw matches the amount you calculate on the next page. So after submit, get a count() of product ids and compare that to the submitted count. then take that count and multiply that by .75 then compare that to the submitted cost. this will help verify that the amount you are about to charge the customer matches the amount that they saw so you are not charging them for a different amount then they expect. Last edited by IAmALlama : August 27th, 2009 at 02:53 PM.
|
|
#28
September 1st, 2009, 10:32 PM
|
|||
|
|||
|
Still havent received a pm from you with your paypal email...
Is there a way to add a black list array, where it doesn't display a checkbox for a specific day if the day is present in the array? I have the money waiting for you, please don't forget to pm!
|
|
#30
September 3rd, 2009, 06:00 PM
|
|||
|
|||
|
Quote:
I set: var startDate = new Date("Sep 1, 2009"); var endDate = new Date("Feb 28, 2009"); and it counts 186 days inbetween where there are actually only 181. Whats wrong? 30+31+30+31+31+28=181
|
|
| Viewing: Codewalkers Forums > PHP Related > PHP Coding > Coding a calendar with checkboxes |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
|
|
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
