Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    hmg
    hmg is offline
    New Coder
    Join Date
    Apr 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Passing data between Javascript and PHP

    I'm a bit new to both Javascript and PHP. I am working on an application in which monthly calendars of events are to be generated. When the page is initially loaded, the current month's calendar is generated using Javascript; the user can also move forward to the next month or backward. For each month, I need to be able to retrieve server-side data (using PHP/MySQL) to fill each day-cell ("td"+i, below) of the calendar with events for that day which reside in the server-side database, keyed by date. Here is a snippet of the code that generates the days of a given month:

    var d = 1;
    for (i = 0; i < 42; i++) {
    var elem;
    var elem = eval(document.getElementById("td"+i)); //the day cell
    elem.innerHTML = "";
    if (i >= startingPos && i < lastpos){
    elem.innerHTML = d
    d += 1;
    .
    .
    return;

    In short, I need to get data from the database as the days are created (elem.innerHTML = d, above) or get all the data for the chosen month (probably more efficient), and send it back to the Javascript where it can be parsed and loaded to the appropriate cell(s) in the calendar.

    Can anyone please share some ideas on how to accomplish this?

  • #2
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think there is an easy way to do this...but I have to ask: Wouldn't it make a hell of alot more sense just to write the entire calendar in php?

    The quick explination is: just to avoid the problem. Use JS inside a php page, but write them in an independant fashion.

    For this to work properly you're going to have to let the php script know what month to grab data for. A simple way to do this would be to use the 'get' method when changing/launching the calendar (e.g. calendar.php?Month=May).

    Once you have that you can safely grab all the data for that month and then parse it into an array. Lastly, make an independant counter variable for the php. Aftwards, close off the php and then insert your calendar code. In the space between where the JavaScript writes the <td> and </td> tags you need to write something like
    Code:
    <?php print $monthDataArray[$phpCounterVariable];
       $phpCounterVariable++; ?>
    ------------------------------------

    Your other alternative would be to grab the data with php, and then use php to write a javascript array (that you could use to populate individual days).

    First thing you'd have to do is put all the data into a php array (in this example named $monthDataArray) then you'd change it over to a javascript array by doing something like this:
    Code:
    var jsArray = new Array(
    <?php
    $length = count($monthDataArray);
    for ($i = 0; $i < $length; $i++)
    {
    echo '"' . addslashes($monthDataArray[$i]) . '"' . (($i < $length - 1) ? ',' : '') . "\n";
    }
    ?>
    From there you'd just ignore the php entirely and just use the jsArray

    -----------------------------------

    Hope that helped, if you need anything else or more clearifacation please lemme know.
    Last edited by mildlyincoheren; 05-02-2006 at 12:43 PM.

  • #3
    hmg
    hmg is offline
    New Coder
    Join Date
    Apr 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Thanks for the help, but being a novice, I have a few (I hope!) questions:

    1- When you say "Use JS inside a php page, but write them in an independant fashion" do you mean copy the JS code 'as-is' into the .php file? Is this done with "echo <script> JS functions here </script>" in the .php file? I'd like to try to avoid rewriting the JS functions in PHP code if possible, since all the code for the date functions in JS are working fine.

    2- If the JS code is to be inside PHP, how do I break out of the JS loop (shown in my original posting) that creates the days in the month to then read the database to get the related events for each day?

    3- I'm not clear on how the created array in PHP is accessed by JS on the client side in order to present the calendar.

    Thanks once again for your help.

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    1) You're going to have to make some edits in order to get it to work, but most of the JS code will remain the same. PHP is awsome in that it was designed from the ground up to work easily in web development. You *could* use the echo command (or the print command) for every single piece of the script...but that'd be alot of wasted effort and time. A much easier way would be to just close the tag. In a php document not everything has to be written in php. Only things that are enclosed between the <?php and ?> tags. Anything else is treated just like it would be in a html document. Much much easier (and it makes so much sense!). Please note that you can have as many opening/closing php tag pairs as you want. You're not limited to just one.

    2) I would suggest getting all the data out of the database and storing it in an array before running the JS portion of the script. You could do it one at a time but it'd be alot more inefficent. As far as "breaking out of the loop" you don't really have to worry about that, just put the php code in at the appropreate place (and don't forget the opening and closing tags).

    3) That depends on which of the solutions you follow. In the first one the JS doesn't access the array at all--that is left purely for the php to do (though the JS does trigger that part of the php). In the second solution you basicly take the PHP array that you've made and then use PHP to write an identical array in javascript.

    If you want to post the exact calendar code you're using I'd be happy to show you the specific edits you'd need. Though it might take me a few days to get back as it's currently finals week(s) for me.

    What I wouldn't give for a bed right now

  • #5
    hmg
    hmg is offline
    New Coder
    Join Date
    Apr 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Get some sleep!

    After the finals buzz slows down, take a look at these JS functions which create the calendar for a given month. Please keep in mind that the first function, setToday, is only executed "onload" in order to display the current month; after that the user can click an arrow for the next (or previous) month. Although I've combined PHP and Javascript/HTML code into a single file previously, I'm having trouble getting the full picture in this case, especially how the month and year get from the JS to PHP and how the array of events for the month get from PHP/MySQL to JS/HTML for presentation.

    <HTML>
    <HEAD>

    <SCRIPT LANGUAGE="JavaScript">

    <!-- Begin
    function setToday() {
    var elem;
    var MonthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")
    var now = new Date();
    var day = now.getDate();
    var month = now.getMonth();
    var year = now.getYear();
    if (year < 2000)
    year = year + 1900;
    window.month = month //assign to window to make variable global
    window.MonthArray = MonthArray; //assign to window to make variable global
    window.year = year //assign to window to make variable global
    document.getElementById("month").innerHTML = MonthArray[month]
    document.getElementById("year").innerHTML = " " + year;

    displayCalendar(month, year);
    }

    function setPreviousMonth() {
    var year = window.year;
    var day = 0;
    var month = window.month;
    if (month == 0) {
    month = 11;
    if (year > 1000) {
    year--;
    document.getElementById("year").innerHTML = year;
    }
    } else { month--; }
    document.getElementById("month").innerHTML = MonthArray[month]
    window.month = month
    window.year = year
    displayCalendar(month, year);
    }

    function setNextMonth() {
    var year = window.year;
    var day = 0;
    var month = window.month;
    if (month == 11) {
    month = 0;
    year++;
    document.getElementById("year").innerHTML = year;
    } else { month++; }
    document.getElementById("month").innerHTML = MonthArray[month]
    window.month = month
    window.year = year
    displayCalendar(month, year);
    }

    function getDaysInMonth(month,year) {
    var days;
    if (month==1 || month==3 || month==5 || month==7 || month==8 || month==10 || month==12) days=31;
    else if (month==4 || month==6 || month==9 || month==11) days=30;
    else if (month==2) {
    if (isLeapYear(year)) { days=29; }
    else { days=28; }
    }
    return (days);
    }

    function isLeapYear (Year) {
    if (((Year % 4)==0) && ((Year % 100)!=0) || ((Year % 400)==0)) {
    return (true);
    } else { return (false); }
    }

    function displayCalendar(month, year) {

    var daterow5 = document.getElementById("daterow5")
    var textrow5 = document.getElementById("textrow5")
    var daterow6 = document.getElementById("daterow6")
    var textrow6 = document.getElementById("textrow6");
    daterow5.className = "rowvis"; //make last 2 rows visible
    textrow5.className = "rowvis";
    daterow6.className = "rowvis";
    textrow6.className = "rowvis";

    month = parseInt(month);
    year = parseInt(year);
    var i = 0;
    var days = getDaysInMonth(month+1,year);
    var firstOfMonth = new Date (year, month, 1);
    var startingPos = firstOfMonth.getDay();
    var d = 1;
    var lastpos;
    lastpos = startingPos + days;
    for (i = 0; i < 42; i++) {
    var elem;
    var elem = eval(document.getElementById("td"+i));
    elem.innerHTML = "";
    elem.className = "date";
    if (i >= startingPos && i < lastpos){
    elem.innerHTML = d
    d += 1;
    }
    if (i >= lastpos){
    elem.className = "datebg";
    }
    }
    if (lastpos == 27) { //hide unused rows
    daterow5.className = "rowhide"
    textrow5.className = "rowhide"
    daterow6.className = "rowhide"
    textrow6.className = "rowhide";
    } else if (lastpos <= 35){
    daterow6.className = "rowhide"
    textrow6.className = "rowhide";
    }
    return;
    }


    // End -->
    </SCRIPT>
    </HEAD>
    <BODY onLoad= "setToday()">
    ..
    <table bordercolordark="#000000" cellpadding="2" cellspacing="0" width="95%" border="1" align="center" id="tab1">
    <tr>
    <td align="right" colspan="2" height="35">
    <INPUT TYPE=IMAGE NAME="PreviousMonth" src="images/wmp_icon_02.jpg" width="35" height="35" onClick="setPreviousMonth()">
    <td align="center" colspan="3" height="35" class="monthYear">
    <span id="month">&nbsp;</span>
    <span id="year">&nbsp;</span>
    <td align="left" colspan="2" height="35">
    <INPUT TYPE=IMAGE NAME="NextMonth" src="images/wmp_icon_01.jpg" width="35" height="35" onClick="setNextMonth()">

    </td>

    </tr>
    ..
    </table>


    Again, get some sleep and thanks for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •