Using Ajax with Wordpress

[Nightasy]

Greetings all,

 

Been trying to make a plugin in wordpress and ran into an issue with the way wordpress makes use of ajax in the administration menu. The problem is that I completely don't understand it. I've read all the docs on it and even tried messing with a variety of tutorials on the matter to no avail.

 

What I am trying to do is a simple task outside of wordpress. The form has two select fields, the first field populates the second selection field. While this works fine on a standard html page, trying to do it in wordpress is another story.

 

Form.php:

<div id="wrapper">
<h1>Second dropdown selection based </h1>
<form action="" method="post">
<p><label>Main Menu :</label>
<select name="main_menu_id" id="main_menu_id">
<option value="">Select</option>
<?php
// Connect to database.
	$connect = mysqli_connect('<!--DB connection info-->");
$q = mysqli_query($connect, "SELECT cfid,cfname FROM categoryfiles ORDER BY cfid");
while($row = mysqli_fetch_array($q)) {
	echo '<option value="' . $row['cfname'] . '">' . $row['cfname'] . '</option>';
}
?>
</select>
</p>
<p><label>Sub Menu:   </label>
<select name="sub_menu_id" id="sub_menu_id"></select>
</p>
</form>
</div>

The script.js

$(function() {
	$("#main_menu_id").bind("change", function() {
		$.ajax({
			type: "GET",
			url: "scripts/get_sub_category.php",
			data: "main_menu_id="+$("#main_menu_id").val(),
			success: function(html) {
				$("#sub_menu_id").html(html);
			}
		});
	});
});

The get_sub_category.php

<?php

	// Connect to database.
	$connect = mysqli_connect('<!--My connection info-->);
							  
	$id = $_GET['main_menu_id'];
	$q = mysqli_query($connect, "SELECT sfid, sfname FROM subjectfiles WHERE sfcategory='" . $id . "' ORDER BY sfname");
	while($row = mysqli_fetch_array($q)) {
		
	echo '<option value="' . $row['sfname'] . '">' . $row['sfname'] . '</option>';
	
	}
?>

Like I said, it works just fine outside of wordpress so really I just need help getting it to work in wordpress. I just don't understand it. Thanks to anyone that takes the time to look this over.

 

Best Regards,

Nightasy

[maxxd]

.bind() has been deprecated as of JQuery 1.7, with .on() being the preferred method of binding events to potentially non-existing dom objects at page load. That may have something to do with it - check which version of JQuery is being used in each case. Also, I've run across a couple odd occurrences where using the dom element selector doesn't actually work, and it needed to be something along the lines of

$(document).on('click','#main_menu_id',function(){
    ...
});

Don't quote me on the actual syntax above - I've only run across the situation once or twice, so I can't pull it out of my brain right now. I'll look tomorrow morning and see if I can find a concrete example.

[Nightasy]

@maxxd - Thanks for catching that deprecation. I completely missed it and the .on() is really identical in functionality so all I had to do with change that one command. It didn't solve the issue I was having here though. The issue revolves around how Wordpress makes use of Ajax on the backend. In the wordpress documentation on it they try to make it sound like they way they handled the use of Ajax is the "greatest most easiest thing evar!!!" when in reality they just made it ten times more complex to do. From my readings it had to do with security issues they ran into quite awhile back.

 

Either way though, it doesn't matter anymore. My team has decided to make the menu external from wordpress anyhow for added security measures since it controls our entire entry database. No sense in taking any risks with wordpress (which has been known to have been hacked) when we know that we can lock it up like fort knox using an external platform if you know what I mean. I would like to know how to do ajax with wordpress plugins but I suppose that's just something that will have to wait.

 

Thanks for taking a look either way.