Is this code javascript, php or both?

Is this code javascript, php or both?

OK, so I have a form that executes some php code in an eternal file. What I am wondering if the form uses a javascript to execute the PHP. The reason I need to know this is because I am trying to get this code to work in a wordpress blog post and I have to do some tweaking if it is using javascript.

<div class="div_name">
					<table height="200px">
						<tr><td>
							<form action="" method="post" name="f1">
								<fieldset>
									<legend>Blog Topic Generator</legend>
									<label for="category">Category : </label>
									<select name="category">
										<option value="1">All</option>
										<option value="3">Opinion</option>
										<option value="4">Health</option>
										<option value="5">Religion</option>
										<option value="6">Science</option>
										<option value="7">Art</option>
										<option value="8">World</option>
										<option value="9">Music</option>
										<option value="10">Business</option>
										<option value="11">Personal</option>
										<option value="12">Technology</option>
										<option value="13">People</option>
										<option value="14">Recreation</option>
									</select>
									<input type="button" name="submit" value="Generate Topic"  onclick="JavaScript:xmlhttpPost('ajax.php');" />
								</fieldset>
							</form>
							<br /><br /> 

							<div id="phrase-result"></div>

Code (markup):

GREATLY appreciate any help, thanks.

 

It is HTML + JavaScript

 

I know that there is html ... but I wasn't sure if there was javascript. I just realized that there was the word 'javascript' in one of the lines of code lol. Guess I have my answer.

Um, question: Is there anyway I can execute the javascript code in this form from an external .js file? I don't think wordpress will allow me to have inline javascript code ...

p.s. here is the original page: http://www.blogtap.net/blogtopicgenerator.php I obviously want to move all the to a wordpress blog post.

 

The JavaScript in the code is a call to function xmlhttpPost(). It would seem the JavaScript containing function xmlhttpPost() is already in an external .js file, unless some things were omitted when you provided the code in the first post.

Will

 

In an external js file named xmlhttpPost ? I can't find it. No nothing was omitted.

 

Yes, I have confirmation now. There are no external .js files.. only external php files.

So what is this script doing? I have no idea!

 

its using JS to call ajax.php. Which means its AJAX. Looking at it briefly, it passes in the Category selection and probably echos the selected option back to the page replacing the form. And maybe presenting another option or some such.

 

Well what the script does is create a random text string from a list of options in a mysql database. This is what is in the ajax.php file:

<?php
include 'config.php';
include 'connectdb.php';

if(is_numeric($_POST['category']))
{
	$sql = ($_POST['category'] != 1) ? "SELECT `phrase` FROM `phrases` WHERE `cat_id` = '{$_POST['category']}' ORDER BY RAND() LIMIT 1" : "SELECT `phrase` FROM `phrases` ORDER BY RAND() LIMIT 1";
	$result = mysql_query($sql) or die(mysql_error());
	if(mysql_num_rows($result))
	{
		$output = mysql_fetch_assoc($result);
	}
	mysql_free_result($result);
	echo $output['phrase'];
}
else echo 'salah mbak';
?>

Code (markup):

The two includes have login information for the mysql database.

So, is there anyway I can run all of the Javascript from an external file? Wordpress documentation tells me that, If I want to run a javascript in a post, I need to "combine both the call to the script file with the call to the Javascript itself." Like this:

<script type="text/javascript" src="/scripts/updatepage.js"></script>
<script type="text/javascript">
<!--
updatepage();
//--></script>

Code (markup):

Now how can I do that with my little snippet of code?

thanks for the help, sorry I don't know a thing about javascript.

 

umm, the snippet you first posted doesn't have the JS file location. The easy way to do what you want would be to put ajax.php at the root of your wordpress install and the same for the JS file.

you would just put the script above the snippet (and this should be done in the HTML editor for the WP post if that's how you doing it)

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

<div class="div_name">
					<table height="200px">
						<tr><td>
							<form action="" method="post" name="f1">
								<fieldset>
									<legend>Blog Topic Generator</legend>
									<label for="category">Category : </label>
									<select name="category">
										<option value="1">All</option>
										<option value="3">Opinion</option>
										<option value="4">Health</option>
										<option value="5">Religion</option>
										<option value="6">Science</option>
										<option value="7">Art</option>
										<option value="8">World</option>
										<option value="9">Music</option>
										<option value="10">Business</option>
										<option value="11">Personal</option>
										<option value="12">Technology</option>
										<option value="13">People</option>
										<option value="14">Recreation</option>
									</select>
									<input type="button" name="submit" value="Generate Topic"  onclick="JavaScript:xmlhttpPost('/ajax.php');" />
								</fieldset>
							</form>
							<br /><br /> 

							<div id="phrase-result"></div>

Code (markup):

Note the the javascript file would have to be in /scripts and I added a / to ajax.php which means it needs to be at the top of the file system.

 

OK, makes sense .. only one problem! There is no external .js file! I have looked and looked! And yes, the script is working without it. Are you absolutely sure it is an external js? I would think that the location would have to be specified in the HTML for it to work ...

 

um no its a function call apparently. so skip that part. just put ajax.php at the top of the file system and you should be ok. though I would check in several browsers to be sure

 

Hmm, I already have that. I am getting the form and button to appear but something is still wrong. Either the code is not executing properly or something is screwed up in the CSS. Here is the page: http://www.blogtap.net/index0.php/blogtopicgenerator/

I have been scanning the CSS for a while now and can find nothing in there that would make it work any differently from the original page ...

 

ok, so you have to write the external JS file . put this JS into its own file : ajaxfile.js is what I used in the below section.

    function xmlhttpPost(strURL) {
        var xmlHttpReq = false;
        // Mozilla/Safari
        if (window.XMLHttpRequest) {
            xmlHttpReq = new XMLHttpRequest();
            if (xmlHttpReq.overrideMimeType) {
                xmlHttpReq.overrideMimeType('text/xml');
                // See note below about this line
            }
        // IE
        } else if (window.ActiveXObject) { // IE
            try {
                xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
            }
        }
        if (!xmlHttpReq) {
            alert('ERROR AJAX:( Cannot create an XMLHTTP instance');
            return false;
        }   
        xmlHttpReq.open('GET', strURL, true);
        xmlHttpReq.setRequestHeader('Content-Type', 
            'application/x-www-form-urlencoded');        
        xmlHttpReq.onreadystatechange = function() { 
            callBackFunction(xmlHttpReq); 
        };
        xmlHttpReq.send("");
    }
            
    function callBackFunction(http_request) {
        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                var responceString = http_request.responseText;
                //TODO implement your function e.g.
                
				document.getElementById('responsetext').innerHTML = responceString;
			
            } else {
                alert('ERROR: AJAX request status = ' + http_request.status);
            }
        }
    }

Code (markup):

then change the snippet to this :

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

<div class="div_name">
					<table height="200px">
						<tr><td>
							<form action="" method="post" name="f1">
								<fieldset>
									<legend>Blog Topic Generator</legend>
									<label for="category">Category : </label>
									<select name="category">
										<option value="1">All</option>
										<option value="3">Opinion</option>
										<option value="4">Health</option>
										<option value="5">Religion</option>
										<option value="6">Science</option>
										<option value="7">Art</option>
										<option value="8">World</option>
										<option value="9">Music</option>
										<option value="10">Business</option>
										<option value="11">Personal</option>
										<option value="12">Technology</option>
										<option value="13">People</option>
										<option value="14">Recreation</option>
									</select>
									<input type="button" name="submit" value="Generate Topic"  onclick="JavaScript:xmlhttpPost('/ajax.php');" />
								</fieldset>
							</form>
<div id="responsetext"> </div>
							<br /><br /> 

Code (markup):

that should work provided all the files are in the correct location .

 

Hmmm, ok I did what you said (thanks so much for helping me out by the way) and the oddest thing happened. The random topic generator outputs one value: the words 'salah mbak'. Test for yourself here: http://www.blogtap.net/index0.php/blogtopicgenerator/

What could possibly be different on this than the old page that would cause it to do that?

 

Perhaps the AJAX is not working?

OK, here is another thing I don't understand. In your code, you changed <div id="phrase-result"> </div> to <div id="responsetext"> </div>

They are both empty divs, correct? Then why, when I click the generate topic button with the phrase-result ID, nothing happens; but when I use responsetext, I get 'salah mbak'?

 

its this :

else echo 'salah mbak';


from ajax.php, means the database query is failing and falling back to the default.

are config.php and connectdb.php in the same directory as ajax.php?

 

That's correct. They haven't moved and are actually the same files being used by the old page topic generator.

 

the ajax is working else it wouldn't return anything at all. the problem is in the Database call issued by ajax.php.

if its not from the database connection files being in the wrong location, that leaves its in what's being passed to ajax.php.

I didn't see the <div id="phrase-result">, and I used a simpler script to test the AJAX part so I had to create my own. If you wanted to change it, in the ajaxfile.js change this:

document.getElementById('responsetext').innerHTML = responceString;

to:

document.getElementById('phrase-result').innerHTML = responceString;

and remove the extra div of course.

 

ok, just hold everything .
here's the code you should have used in ajaxfile.js :

	function xmlhttpPost(strURL) 
		{
			var xmlHttpReq = false;
			var self = this;
			// Mozilla/Safari
			if (window.XMLHttpRequest) 
			{
				self.xmlHttpReq = new XMLHttpRequest();
			}
			// IE
			else if (window.ActiveXObject) 
			{
				self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
			}
			self.xmlHttpReq.open('POST', strURL, true);
			self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
			self.xmlHttpReq.onreadystatechange = function() 
			{
				if (self.xmlHttpReq.readyState == 4) 
				{
					updatepage(self.xmlHttpReq.responseText);
				}
				else 
				{
					updatepage('Loading ...');
				}
			}
			self.xmlHttpReq.send(getquerystring());
		}
	
	function getquerystring() 
		{
			var form     = document.forms['f1'];
			var category = form.category.value;
			qstr = 'category=' + escape(category);  // NOTE: no '?' before querystring
			return qstr;
		}
	
	function updatepage(str){
		document.getElementById("phrase-result").innerHTML = str;
	}

Code (markup):

add the external file code and the original HTML snippet you posted.

 

OK I did that (renaming the line in the .js file to phrase-result but I am still getting that 'salah mbak' echo.