SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sometimes the callback works, sometimes it dosen't... Suggestions.

    Hello my client side friends,
    Server Side programmer looking for some help in the town of Javascript.

    Building an admin section for a church's event calendar (In Wordpress, Custom Plugin). The idea is for the to be able to setup different calendars, so they have to opportunity to show event's for specific church groups, but also have the option of setting up a calendar for all events to show up. That parts all good.

    What I'm running into trouble with is when they add a new calendar, I want the calendar to show up on the list of current calendars (which is right below the "Add Calendar" section) after they have set it up. And I've got it to work... sort of.

    I've tried on Safari, FF, and Chrome. They've all 3 given me pretty much the same result, which is, sometimes the calendar will show up at the end of the table. Sometimes it won't.

    I have it setup so that when the user clicks the submit button, via ajax and xmlHttp, it runs a php script to validate the data, and then if the data's valid put it into the database. After it's sent to the db, I use the responseText function to "reload" the data in the given <div> tag. Right now it just chooses randomly if it want's to refresh that data.

    Any help would be deeply appreciated, and welcome.

    Here's the code I'm using:

    Code JavaScript:
    //Add's the calendar... works fine.
    function addCalendar() {
    	xmlHttp=GetXmlHttpObject()
    	if (xmlHttp==null)
    	 {
    		 alert ("Browser does not support HTTP Request");
    		 return;
    	 }
    	var url="../wp-content/plugins/NewLife-EventCalendar/php/addCalendar.php";
    	xmlHttp.onreadystatechange=displayAdd
    	xmlHttp.open("GET",url,true);
    	xmlHttp.send(null);
    }
     
    //displays a list of the calendars in the <div> with the class "currCalendars" 
    function displayCalendars() {
    	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    	 {
    		 document.getElementById("currCalendars").innerHTML=xmlHttp.responseText 
    	 } 
    }
     
    //tells the xmlHttp object to run the php script and return the results....
    function showCalendars() {
    	xmlHttp=GetXmlHttpObject()
    	if (xmlHttp==null)
    	 {
    		 alert ("Browser does not support HTTP Request");
    		 return;
    	 }
    	var url="../wp-content/plugins/NewLife-EventCalendar/php/showCalendars.php";
    	xmlHttp.onreadystatechange=displayCalendars
    	xmlHttp.open("POST",url,true);
    	xmlHttp.send(null);
    }


    Thanks!

  2. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Could you also post your displayAdd() function (used as callback in your addCalendar() function) ?

  3. #3
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    opps! Sorry bout that..

    Code JavaScript:
    function displayAdd() {
    	if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
    	 {
    		 document.getElementById("calEditor").innerHTML=xmlHttp.responseText 
    	 } 
    }

  4. #4
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Is xmlHttp defined in the global scope?
    i.e., do you have "var xmlHttp;" in your script, outside of any functions?

  5. #5
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! First line of the file.
    Code JavaScript:
    var xmlHttp;

  6. #6
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Could it at all have todo with the data being refreshed BEFORE the actual data's put into the db? Like it processes the displayCalendars() function before the data's put into the database....

  7. #7
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by mattiepoo View Post
    Could it at all have todo with the data being refreshed BEFORE the actual data's put into the db? Like it processes the displayCalendars() function before the data's put into the database....
    Since you're checking for "if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")" this is not likely...

  8. #8
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    Do the target divs (#currCalendars and #calEditor) always exist?

  9. #9
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I was thinking, but just wanted to make sure.

    The #currCalendars and #calEditor div's are always existent yes.

    Here are the PHP files id you wanna take a look:

    addCalendar.php
    PHP Code:
    <?php
        
    require_once('../../../../wp-load.php');
        global 
    $wpdb;
    ?>
    <h2>New Calendar</h2>
        <div id="calResults">
        <?php
            
    if(isset($_POST['addCal'])) {
                echo 
    "<ul>";
                if(empty(
    $_POST['calName'])) {
                    echo 
    "<li class=\"fault\">** Please fill in all required feilds **</li>";
                }
                elseif(
    $_POST['calType'] == "grid" && empty($_POST['numEvents'])) {
                    echo 
    "<li class=\"fault\">** Please enter the number of events **</li>";
                }
                elseif(
    $_POST['calType'] == "grid" && !is_numeric($_POST['numEvents'])) {
                    echo 
    "<li class=\"fault\">** Please enter a numeric number of events **</li>";                
                }
                else {
                    
    $name $_POST['calName'];
                    
    $calType $_POST['calType'];
                    
    $sponsor $_POST['sponsor'];
                    
    $numEvents NULL;
                    if(
    is_numeric($_POST['numEvents'])) {
                        
    $numEvents $_POST['numEvents'];
                }
                    
                
    $sql "INSERT INTO ".$wpdb->prefix."event_calendars VALUES (NULL, '".$name."', '".$calType."', '".$sponsor."', '".$numEvents."', NOW())";
                if(
    $result $wpdb->query($sql)) {
                    unset(
    $_POST['calName']);
                    unset(
    $_POST['calType']);
                    unset(
    $_POST['sponsor']);
                    unset(
    $_POST['numEvents']);
                }
            }
                echo 
    "</ul>";
        }
        
    ?>
        </div>
        <form onsubmit="return ajaxform(this);" method="post" id="addCalendar">
            <table>
                <tr>
                    <td><label>Name: <em>(*Required)</em></label><input type="text" name="calName" value="<?php if(isset($_POST['calName'])){echo stripslashes($_POST['calName']);} ?>"/></td>
                    <td><label>Sponser: </label>
                        <select name="sponsor">
                        <?php
                $sql 
    "SELECT sid, sponsorName FROM ".$wpdb->prefix."event_sponsors";
                            if(
    $results $wpdb->get_results($sql)) {
                                foreach(
    $results as $result) {
                                    echo 
    "<option value='".$result->sid."'";

                                    if(
    $_POST['sponsor'] == $result->sid) {
                        echo 
    "selected=\"selected\"";
                    }
                    echo 
    ">".$result->sponsorName."</option>\n";
                                }
                }
                            
    ?>
                        </select></td>
                    <td><label>Calendar Type: </label>
                                            <select name="calType">
                                                <option value="Full">Full Calendar</option>
                                                <option value="List" <?php if($_POST['calType'] == "grid"){echo "selected=\"selected\"";}?>>List</option>
                                            </select>
                    </td>
                    <td><label>Number of events: <em>("Grid" calendars)</em></label><input type="text" name="numEvents" value="<?php if(isset($_POST['numEvents'])){echo stripslashes($_POST['numEvents']);} ?>"/></td>
                </tr>
                <tr>
                    <td><input type="submit" name="addCal" value="Add Calendar" onclick="showCalendars()" /> <input type="reset" value="Clear Form"/></td>
                </tr>
            </table>
        </form>
        <div class="clear"></div>

    and showCalendars.php
    PHP Code:
    <?php
        
    require_once('../../../../wp-load.php');
        global 
    $wpdb;
        
    $sql "SELECT cid, name, type, sponsorName, eventCount, ".$wpdb->prefix."event_calendars.dateAdded FROM ".$wpdb->prefix."event_calendars, ".$wpdb->prefix."event_sponsors WHERE ".$wpdb->prefix."event_calendars.sponsor = ".$wpdb->prefix."event_sponsors.sid ORDER BY cid";
    ?>
    <h2>Current Calendars</h2>
    <?php

    if($results $wpdb->get_results($sql)) {

            
    $table "<table class=\"calendars\">\n";
            
    $table .= "<thead>\r\t";
                
    $table .= "<th class='eventID'>Id</th>\r\t";
                
    $table .= "<th class='eventName'>Name</th>\r\t";
                
    $table .= "<th class='type'>Type</th>\r\t";
                
    $table .= "<th class='count'>Event Count</th>\r\t";
                
    $table .= "<th class='sponsor'>Sponser</th>\r\t";
            
    $table .= "</thead>\r\r";
            
            
    $offrow 0;
            foreach(
    $results as $result) {
                
    $table .= "<tr";
                if(
    $offrow&#37;2 == 0) {
                    
    $table .= " class='oddRow'";
                }
                
    $table .= ">\n\t";
                    
    $table .= "<td class='eventID'>" $result->cid"</td>\r\t";
                    
    $table .= "<td class='eventName'>" $result->name"</td>\r\t";
                    
    $table .= "<td class='type'>"$result->type."</td>\r\t";
                    
    $table .= "<td class='count'>"$result->eventCount."</td>\r\t";
                    
    $table .= "<td class='sponsor'>" $result->sponsorName"</td>\r\t";
                    
    $table .= "<td class='edit'><a>Edit</a></td>\r\t";
                    
    $table .= "<td class='delete'><a>Delete</a></td>\r";
                
    $table .= "</tr>\r";
                
    $offrow++;
            }
            echo 
    $table;
    }
    else {
        echo 
    "<h3>***    You currently don't have any calendars    ***</h3>";
    }

    ?>
    </table>

  10. #10
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,031
    Mentioned
    152 Post(s)
    Tagged
    2 Thread(s)
    PHP Code:
    if(is_numeric($_POST['numEvents'])) {
                        
    $numEvents $_POST['numEvents']; 
    is missing a closing brace (})

  11. #11
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your addCalendar() function most certainly doesn't "add a calendar". I doesn't send any data? It simply sends a get request.

    And, when you click the "Add calendar" submit button, you call the function showCalendars()? You also call ajaxForm(), which you haven't posted.

    These function names and the way they're being used are confusing.

    I can't tell from the current info given, but my guess so far is that your issue is related to your use of a global variable. I think you're probably sending off another ajax request before the first one finishes, clobbering the xmlhttp object in your global variable.

  12. #12
    SitePoint Zealot
    Join Date
    May 2007
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay.. figured it out.

    @crmalibu... I totally forgot that in my ajaxform() function it was already sending a request to the php script to add the script. So the add a calendar event was pretty much useless. Thanks for the "smack in the face". Here's the ajaxform function

    Code JavaScript:
    function ajaxform(thisform)
    {
        //General Purpose Ajax form submitter.
        //Written by Carl(bag) @ Thybag.co.uk
     
    	//php page to process
    	formhandler = '../wp-content/plugins/NewLife-EventCalendar/php/addCalendar.php';
     
        // Set up data variable
        var formdata = "";
     
        // Set up Ajax request variable
        try {xmlhttp = window.XMLHttpRequest?new XMLHttpRequest(): new ActiveXObject("Microsoft.XMLHTTP");}  catch (e) { alert("Error: Could not load page.");}
     
        // Loop through form fields
        for (i=0; i < thisform.length; i++)
        {
             //Build Send String
             if(thisform.elements[i].type == "text") { //Handle Textbox's
                      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
             }
    		 else if(thisform.elements[i].type == "textarea") { //Handle textareas
                      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
             }
    		 else if(thisform.elements[i].type == "checkbox") { //Handle checkbox's
                     formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].checked + "&";
             }
    		 else if(thisform.elements[i].type == "radio") { //Handle Radio buttons
                      if(thisform.elements[i].checked==true){
                         formdata = formdata + thisform.elements[i].name + "=" + thisform.elements[i].value + "&";
                      }
             }
    		 else {
                      //finally, this should theoretically this is a select box.
                      formdata = formdata + thisform.elements[i].name + "=" + escape(thisform.elements[i].value) + "&";
             }
        }
     
        //Send Ajax Request
        xmlhttp.onreadystatechange = function(){
                   //Check page is completed and there were no problems.
                   if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
                          //What to do once the form is submitted - to inform the user.
    					 document.getElementById("calEditor").innerHTML=xmlhttp.responseText 
                   		 updateCalendarList();
                   }
        }
        //Make connection
        xmlhttp.open("POST", formhandler);
        //Set Headers
        xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //Send data
        xmlhttp.send(formdata);
        //stops form from submitting normally
        return false;
    }


    all I needed todo was add the updateCalendarList() function aka showCalendars() in the ajaxform function after it calls the responsetext, and it works perfectly now.

    Thanks!

    Thanks to you too ScallioXTX for helping too!


Bookmarks

Posting Permissions

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