Debugging help

Scriptr · 02-07-2012, 04:14 AM

I have always had problems with my AJAX script. I have this ajax script, for these radio buttons:

Code:

<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function loadcheck(){
    document.wv.v[0].checked = true;
}
function ajaxFunction(v){
	var ajaxRequest;  // The variable that makes Ajax possible!
	
	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.getElementById('right').innerHTML = ajaxRequest.responseText;
        }
    
    }
    ajaxRequest.open('GET', "view.php?view=" + v, true);
    ajaxRequest.send(null);
}
//-->
</script>
            <form method="GET" name="wv">
			<input type="radio" name="v" value="0" onclick="ajaxFunction(this.value)" />Home |
			<input type="radio" name="v" value="1" onclick="ajaxFunction(this.value)" />Worship |
			<input type="radio" name="v" value="2" onclick="ajaxFunction(this.value)" />Small Groups |
			<input type="radio" name="v" value="3" onclick="ajaxFunction(this.value)" />Service |
			<input type="radio" name="v" value="4" onclick="ajaxFunction(this.value)" />Calendar |
			<input type="radio" name="v" value="5" onclick="ajaxFunction(this.value)" />Newsletter |
			<input type="radio" name="v" value="6" onclick="ajaxFunction(this.value)" />Contact
            </form>

And view.php contains this:

PHP Code:


			
<?php

$view = $_GET['view'];

switch ($view) {

    case 1:

        $myFile = "main.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "worship.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "groups.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "service.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "calendar.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "newsletter.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;

    case 1:

        $myFile = "contact.txt";

        $fh = fopen($myFile, 'r');

        $theData = fread($fh, 5);

        fclose($fh);

        echo $theData;

        break;



    default:

        break;

}

?>

And I do, indeed have the ID correct for <div id="right"></div> I made sure of that.

Again, I get this every time I write ajax. I did copy/paste the browser support from tizag (it is tedious, won't work if it doesn't achieve a uniform function, and they said they didn't mind), but I expect that is the only right part.

When I run the script, nothing changes on the page. Any ideas?

Please and thank you.

sunfighter · 02-07-2012, 02:49 PM

Your problems are all in the view.php file.
All of your CASE statements are case 1: You need to change that. And your first

Code:

$view = $_GET['view'];

will be a zero, so your first case must be

Code:

case 0:

Your

Code:

$theData = fread($fh, 5);

contained in all cases only reads 5 bytes. Use this to get the entire file.

Code:

$theData = fread($fh, filesize($myFile));

Make those changes and it should work.

I am assuming that in you real code you have a div to display the returning files

Code:

.....
</form>
<div id="right">Info here</div>
</body>
</html>

PS. You now have code to get ajax files. You need to make a php file with

Code:

<?php
echo 'made it';
?>

So you can tell which file if you have a problem with.

Scriptr · 02-07-2012, 09:53 PM

Quote:

Originally Posted by sunfighter

Your problems are all in the view.php file.
All of your CASE statements are case 1: You need to change that. And your first

Code:

$view = $_GET['view'];

will be a zero, so your first case must be

Code:

case 0:

Your

Code:

$theData = fread($fh, 5);

contained in all cases only reads 5 bytes. Use this to get the entire file.

Code:

$theData = fread($fh, filesize($myFile));

Make those changes and it should work.

I am assuming that in you real code you have a div to display the returning files

Code:

.....
</form>
<div id="right">Info here</div>
</body>
</html>

PS. You now have code to get ajax files. You need to make a php file with

Code:

<?php
echo 'made it';
?>

So you can tell which file if you have a problem with.

Thanks. I usually get that 5 bytes thing, and it turns out to just be a problem with which case is which for the other, but I was working quickly, so I copied/pasted a lot of it, intending to clean it up later. That doesn't explain my problems with my other AJAX scripts. I'll put them in the next response. Those, I have been working on for literally a year.

Scriptr · 02-07-2012, 10:14 PM

This is the form:

Code:

<td width="15%" bgcolor="#6464FF"><script type="text/javascript" src="ajx.js"></script>
					<form name="whichview">
						<center><form name="whichview">
							<input type="radio" id="wv" value="0" name="wv" onclick="ajaxFunction()" />Home<br />
							<input type="radio" id="wv" value="1" name="wv" onclick="ajaxFunction()" />News<br />
							<input type="radio" id="wv" value="2" name="wv" onclick="ajaxFunction()" />Messages<br />
							<input type="radio" id="wv" value="3" name="wv" onclick="ajaxFunction()" />ChatRoom<br />
							<input type="radio" id="wv" value="4" name="wv" onclick="ajaxFunction()" />Comming soon!<br/>
						</form></center></td>

This is the JavaScript:

Code:

//<!-- 
//Browser Support Code
function ajaxFunction()
	{
	var ajaxRequest;  // The variable that makes Ajax possible!

	try
		{// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
		}
	catch (e)
		{// Internet Explorer Browsers
		try
			{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} 
		catch (e) 
			{
			try
				{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
				} 
		catch (e)
				{
				// Something went wrong
				alert("Your browser broke!");
				return false;
				}
			}
		}
	
	ajaxRequest.onreadystatechange = function()
		{
		if(ajaxRequest.readyState == 4 && xmlhttp.status == 200)
			{
			document.getElementByID('centerField').innerHTML = ajaxRequest.responseText;
			}
		}	
		var view = Document.GetElementById("wv");
		var query = "?view=" + view;
		ajaxRequest.open("GET", "wv.php" + query, true);
		ajaxRequest.send(null);
		
		
	}
//-->

And this is the PHP:

PHP Code:


			
<?PHP

    $wv = $_GET['view'] ;

    

    $mysql_host = "************";

    $mysql_database = "********";

    $mysql_user = "*******";

    $mysql_password = "******l";

    



    

    switch($wv)

        {

        case '0':

            ?>

            

            <html>

                <head>

                    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

                    <link rel="stylesheet" href="style.css" />

                    <script type="text/javascript" src="tinyeditor.js"></script>

                    <script type="text/javascript" src="ax1.js"></script>

                    </head>

                    <body>

                        <center><h1>Home: What Are you doing now?</h1><center><br />

                        <center><textarea id="input" style="width:400px; height:200px"></textarea></center>

                        <script type="text/javascript">

                            new TINY.editor.edit('editor',{

                                id:'input',

                                width:584,

                                height:175,

                                cssclass:'te',

                                controlclass:'tecontrol',

                                rowclass:'teheader',

                                dividerclass:'tedivider',

                                controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',

                                        'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',

                                        'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',

                                        'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],

                                footer:true,

                                fonts:['Verdana','Arial','Georgia','Trebuchet MS'],

                                xhtml:true,

                                cssfile:'style.css',

                                bodyid:'editor',

                                footerclass:'tefooter',

                                toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},

                                resize:{cssclass:'resize'}

                            });

                        </script>

                        <center><button onclick="statupdate()">Send!</button></center>

            

            <?PHP

            break;

        case '1':

            //Connect to MySQL Server

            mysql_connect($mysql_host, $mysql_user, $mysql_password);

                //Select Database

            mysql_select_db($mysql_database) or die(mysql_error());

            

            echo '<script type="text/javascript" src="ax0.js"></script>';

            

            echo '<html><body><center>

                    <h1>News</h1><form name="status"><select onchange="friendNews()" id="wf">';

                        

                $query = "SELECT * FROM Personal";



                    $qry_result = mysql_query($query) or die(mysql_error());

                        

                        $display_string = '<option>Whose View?</option>';



                        while($row = mysql_fetch_array($qry_result))

                            {

                            $display_string .= '<option>'.$row['FullName'].'</option>';

                            }

                            $display_string .= '</select></form></center>';

                            echo $display_string;

                            echo '<center><div id="Results"></div></center>';

            break;

        

        case '2':

            break;

        

        case '3':

            echo '    <html>

                        <head><title>Social Experiment ChatRoom</title></head>

                        <body>

                            <script type="text/javascript" src="ax5.js"></script>

                            <script type="text/javascript" src="ax6.js"></script>

                            <textarea readonly="true" scrolling="yes" width="100%" height="50%" id="postedText"></textarea>

                            <textarea scrolling="yes" width="50%" height="50%" id="messageText"></textarea>

                        </body>

                    </html>';

        }            

?>

I made a post for this a while ago, but it was never answered. Do you know what the problem could be here? I'll shorten the PHP if you want.

sunfighter · 02-08-2012, 03:05 PM

In the first section of code your inputs all have the same ID. This is a huge No No.

In your JS the line

Code:

var view = Document.GetElementById("wv");

is both written wrong(js is case sensitive). it's missing the .value It S/B

Code:

var view = document.getElementById('wv').value;

and even that wont work because of the multiple IDs.

Scriptr · 02-08-2012, 11:25 PM

Quote:

Originally Posted by sunfighter

In the first section of code your inputs all have the same ID. This is a huge No No.

In your JS the line

Code:

var view = Document.GetElementById("wv");

is both written wrong(js is case sensitive). it's missing the .value It S/B

Code:

var view = document.getElementById('wv').value;

and even that wont work because of the multiple IDs.

So I need to use document.whichview.wv.value;? Or am I WAY off?

sunfighter · 02-09-2012, 02:12 AM

Scriptr you have a workable solution already, why do you need to work on the latest script to achieve what you have?

Scriptr · 02-09-2012, 02:32 AM

Quote:

Originally Posted by sunfighter

Scriptr you have a workable solution already, why do you need to work on the latest script to achieve what you have?

This is for a social network I have been writing for the past 2 years. all but the first 2 months were spent on the AJAX. The workable solution is for the other one. That is a website I was asked to do for a local church. Then I told my boss that JS couldn't do form submission without using server side script, and the JS isn't really necessary. I haven't heard from him in 3 days. He wanted to use <form action="mailto:address@site.com">...</form>

Scriptr · 02-09-2012, 03:17 AM

Oh.... You meant reformat what I have to work in place of the other script that doesn't.

will do.