Ajax

[hgmme@wa]

Ok my first question is this, Is this right sintax?

xmlHttp.send("email=" + str + "&profile" + str)

I'm using the post method and i have two different sets of radio buttons I'm submitting.Also I need to know how to clear the div that that form is in for it to put the results of the form in... Make sense? if not I'll clarify what you need to know later, thanks.

[jesh]

Ok my first question is this, Is this right sintax?

xmlHttp.send("email=" + str + "&profile" + str)

Yes, that looks right. Don't forget to set the Content-Length request header.

var data = "email=" + str + "&profile" + str;xmlHttp.setRequestHeader("Content-Length", data.length);xmlHttp.send(data);

To clear the contents of a div, you can do something like this:

document.getElementById("MyDiv").innerHTML = "";

[justsomeguy]

You can also use this to remove everything from an element:

  el = document.getElementById("element_id");  for (var i = el.childNodes.length - 1; i >= 0; i--)	el.removeChild(el.childNodes[i]);

[hgmme@wa]

Ok, another question, for the parameter for my onclick function (in this case it's setper()) what do I need to put in there and if you don't mind explaining how that works for cases like this and maybe a few other examples, thanks.

[justsomeguy]

You can't add parameters to event handlers. The only argument that gets sent to an event handler is an event object that describes the event that triggered the event handler. If you want the function to have other information available to it you need to use global variables.

[jesh]

If you use anonymous functions, you can set up an event handler with parameters. I've tested this in IE and Firefox.

<input type="text" id="test" /><script>var input = document.getElementById("test");input.onchange = function(e) { handleEvent(e, this.value); }function handleEvent(e, message){	e = (e) ? e : window.event;	var target = (e.target) ? e.target : e.srcElement;	alert("The element with an id of '" + target.id + "' has this to say: '" + message + "'.");}</script>

[justsomeguy]

Nice, I'll keep that one in mind.

[hgmme@wa]

But what if you have a form that's got two different sets of radio buttons and both of the have a yes or no option? Sorry it's taken so long, when ya'll started replying I was on a road trip, the day after that I got my new macbook pro so i've been getting it set up.Thanks for your help.

[justsomeguy]

But what if you have a form that's got two different sets of radio buttons and both of the have a yes or no option?

You will need to give each button a unique ID and use the checked property to find out which one is checked.

[hgmme@wa]

oh yea, I'm also wanting submit them both at once with hopefully a button that uses "onclick="? (sorry about leaving that out last time)

[justsomeguy]

Yes, you can check the id and find out which button is checked and submit whatever you want.

[hgmme@wa]

What are you referring to as the "checked property"?

[justsomeguy]

http://www.w3schools.com/htmldom/prop_checkbox_checked.asp

[hgmme@wa]

ok, but I'm using radio buttons.

[hgmme@wa]

I guess it would probably be easier if someone would just take this form:

<form name="may_i" method="post"><table class="userinfo">  <tbody>    <tr><th class="ui_th">The selected user:</th><td class="ui_td"> <?php echo $theusers; ?><input type="hidden" disabled="disabled" name="theusers" value="<?php echo $theusers; ?>" /></td>    <tr>    <tr><th class="ui_th">Can the selected user view your profile:</th><td class="ui_td"> <label><input type="radio" id="profile" name="profile" value="y" <?php if ($set_per_f['share_info']=='y'){ echo "checked=\"checked\""; }; ?> />Yes</label><label><input type="radio" id="profile" name="profile" value="n" <?php if ($set_per_f['share_info']=='n'){ echo "checked=\"checked\""; }; ?> />No</label> <br /></td>    </tr>    <tr><th class="ui_th">Can the selected user view your email:</th><td class="ui_td"> <label><input type="radio" id="email" name="email" value="y" <?php if ($set_per_f['share_email']=='y'){ echo "checked=\"checked\""; }; ?> />Yes</label><label><input type="radio" id="email" name="email" value="n" <?php if ($set_per_f['share_email']=='n'){ echo "checked=\"checked\""; }; ?> />No</label></td>    </tr>  </tbody></table><input type="button" onclick="setper()" value="submit" /><div id="ChangeSetting"></div>

and then modify this java script:

var xmlHttpfunction setper(){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="setper.php"var params="theuser=" + str +"profile=" + str + "email=" + strxmlHttp.onreadystatechange=state_changedxmlHttp.open("POST",url,true)xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlHttp.setRequestHeader("Content-Length", params.length);xmlHttp.send(params)}function state_changed() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("ChangeSetting").innerHTML=xmlHttp.responseText  } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

so that when the person browsing the page clicks the button to submit the form it'll use ajax/javascript to send the information to my "setper.php" page all the information in the can be processed and my database updated and then I'll have text put into the div with the id "ChangeSettings" communicating the results of the submit. Then if you have the time and the willingness to explain what you did so that I can learn from what you did that would be great, thanks a bunch.

[justsomeguy]

ok, but I'm using radio buttons.

I linked to the wrong page, radio buttons have the same thing, you can check the reference for radio buttons to see more examples. This is how you find out which radio button is checked:

<input type="radio" id="radio1" name="choice"><br><input type="radio" id="radio2" name="choice"><br><input type="radio" id="radio3" name="choice"><br><input type="submit" onclick="check_button()"><script type="text/javascript">function check_button(){  if (document.getElementById("radio1").checked)	alert("radio 1 is checked");  if (document.getElementById("radio2").checked)	alert("radio 2 is checked");  if (document.getElementById("radio3").checked)	alert("radio 3 is checked");}</script>

[hgmme@wa]

Ok, but how does that relate to sending the values of my sets of radio buttons to my "setper.php" page via "http.send()"?

[justsomeguy]

If you know which radio button is checked you can send whatever value you want for the radio group. I'm not sure your sending function is set up correctly though, you are sending variables called "theuser", "profile", and "email" that all have the same value, which doesn't look like it's being set.var params="theuser=" + str +"profile=" + str + "email=" + str

[hgmme@wa]

I've kind of thought that was the case but wasn't possitive. So if I change it to:

var params="theuser=" + theuser +"&profile=" + profile + "&email=" + email

What do I need to do to make it so that what was an "str" and is now "theuser" or what have you cantains the proper information? Also in firefox I have firebug installed and it's saying "setper()" is not defined, when I click the button to submit the information.

[justsomeguy]

What do I need to do to make it so that what was an "str" and is now "theuser" or what have you cantains the proper information?

Get the value from whatever you want. You can use document.getElementById to get a reference to a particular form field with an ID on it.

Also in firefox I have firebug installed and it's saying "setper()" is not defined, when I click the button to submit the information.

Either the script that contains the function isn't being linked to the page or there is a syntax error in the script that is stopping it from being compiled.

[hgmme@wa]

Either the script that contains the function isn't being linked to the page or there is a syntax error in the script that is stopping it from being compiled.

That particular script is being put in the page after someone selects a person from a drop down list that displays the user information with ajax(aka it's being put in with the user information cause that's when the form I'm working comes into the page).

[justsomeguy]

As long as the function is defined before they click the button it will work. If you're getting an error that says it's not defined, then.. well, it's not defined.

[hgmme@wa]

Ok now that I've got php/mysql working again after installing leopard I can start working on this again. :)Ok so I've changed some stuff in my script and then suddenly firebug started saying that my function isn't defined, and I tried moving the script into the <head> section and it's still saying the function isn't there (naturally I've double checked the spelling then checked it again).Here's an update on what I have for script,The Form:

<form name="may_i" method="post"><table class="userinfo">  <tbody>    <tr><th class="ui_th">The selected user:</th><td class="ui_td"> <?php echo $theusers; ?><input type="hidden" id="theuser" name="theuser" value="<?php echo $user_id; ?>" /></td>    <tr>    <tr><th class="ui_th">Can the selected user view your profile:</th><td class="ui_td"> <label><input type="radio" id="profile" name="profile" value="y" <?php if ($set_per_f['share_info']=='y'){ echo "checked=\"checked\""; }; ?> onclick="profile(this.value)" />Yes</label><label><input type="radio" id="profile" name="profile" value="n" <?php if ($set_per_f['share_info']=='n'){ echo "checked=\"checked\""; }; ?> onclick="profile(this.value)" />No</label> <br /></td><td id="profile_check"></td>    </tr><!--at this point I haven't started into doing anything with the rest of the form--><?php if ($set_per_f['share_info']=='y') { ?>    <tr><th class="ui_th">Can the selected user view your email:</th><td class="ui_td"> <label><input type="radio" id="email" name="email" value="y" <?php if ($set_per_f['share_email']=='y'){ echo "checked=\"checked\""; }; ?> />Yes</label><label><input type="radio" id="email" name="email" value="n" <?php if ($set_per_f['share_email']=='n'){ echo "checked=\"checked\""; }; ?> />No</label></td><td id="email_check"><img src="<?php echo get_option('home'); ?>/blog/wp-content/themes/A-Mess/images/oops.png" style="width: 25px; height: 20px;" /></td>    </tr><?php } else { ?><tr id="email"></tr><?php }; ?>  </tbody></table></form>

and here's the javascript for the first set of radio buttons:

function profile(profile){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var theuser=document.getElementById("theuser");var url="setper.php";var params="profile=" + profile +"$theuser" + theuser.value;xmlHttp.onreadystatechange=state_changed2;xmlHttp.open("POST",url,true);xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");xmlHttp.setRequestHeader("Content-Length", params.length);http.setRequestHeader("Connection", "close");xmlHttp.send(params);}function state_changed2() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("profile_check").innerHTML=xmlHttp.responseText  } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

[hgmme@wa]

Ok so I've changed some stuff in my script and then suddenly firebug started saying that my function isn't defined, and I tried moving the script into the <head> section and it's still saying the function isn't there (naturally I've double checked the spelling then checked it again).

I solved it. The profile name was conflicting with something I think, cause I changed it to "profileJS" and it's working fine. I'll post a code update later.

[hgmme@wa]

Ok so I got it all working and here's the final code for those that might be intested, and those that might read this topic later needing to know what i did.

<?php  $tm_users = mysql_query("SELECT * FROM wp_users WHERE display_name NOT LIKE '$user_identity%' ");//The  "$user_identity" is a wordpress difined variable that contains the currently logged in users user name.?><div id="post"> <form action="userinfo.php" method="get"> Select a User:<select name="theusers" onchange="showUser(this.value)"><option value="" disabled="disabled">Select a User</option><?php //going to display the users display name.  while ($tm_listusers = mysql_fetch_array($tm_users)) {  echo "<option value=\"" . $tm_listusers['display_name'] . "\">" . $tm_listusers['display_name'] . "</option>\n" ; }?></select></form>

The java script that will process the above form and the form that I'll post after the javascript.

var xmlHttpfunction showUser(str){ xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="getuser.php"url=url+"?theusers="+strurl=url+"&sid="+Math.random()xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {  document.getElementById("userinfodiv").innerHTML=xmlHttp.responseText  } }function profileJS(profile){xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }  var theUser=document.getElementById("theuser")  var url="profile_check.php";  var params="profile=" + profile + "&theuser=" + theUser.value;  xmlHttp.onreadystatechange=stateChanged2;  xmlHttp.open("POST",url,true);  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  xmlHttp.setRequestHeader("Content-Length", params.length);  xmlHttp.send(params);}function stateChanged2(){ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("profile_set").innerHTML=xmlHttp.responseText }}function emailJS(email){xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }  var theUser=document.getElementById("theuser")  var url="email_check.php";  var params="email=" + email + "&theuser=" + theUser.value;  xmlHttp.onreadystatechange=stateChanged3;  xmlHttp.open("POST",url,true);  xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  xmlHttp.setRequestHeader("Content-Length", params.length);  xmlHttp.send(params);}function stateChanged3(){ if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { document.getElementById("email_check").innerHTML=xmlHttp.responseText }}function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

This is the php that processes the first form after the javascript sends it the appropriate information, But I excluded all the stuff that gets a whole bunch of user information assuming they provided it.

<?php//Get the user display name from the form then use it to find the users id  $theusers = $_GET['theusers'];  $tm_usernick = mysql_real_escape_string($_GET['theusers']);  $tm_userid_q = mysql_query(" SELECT * FROM wp_users WHERE display_name='$tm_usernick' ") or die("Failed: ".mysql_error());  $tm_userid_f = mysql_fetch_array($tm_userid_q);  $viewed_user_id = $tm_userid_f['ID'];//Check to see if the current user can view the selected user  $can_i_q = mysql_query(" SELECT * FROM user_allow WHERE ID='{$viewed_user_id}' AND reviewers_id='{$user_ID}' ");  $can_i_f = mysql_fetch_array($can_i_q);  $set_per_q = mysql_query(" SELECT * FROM user_allow WHERE ID='{$user_ID}' AND reviewers_id='$viewed_user_id'; ") ;  $set_per_f = mysql_fetch_array($set_per_q);  $delete="DELETE FROM user_allow WHERE ID='{$user_ID}' AND reviewers_id='$viewed_user_id'; ";  $insert="INSERT INTO user_allow VALUES ($user_ID, $viewed_user_id, 'n', 'n'); ";  if ($theusers != '') {  if (mysql_num_rows($set_per_q)>='2') {	  mysql_query($delete); };  if (mysql_num_rows($set_per_q)=='0')  {  mysql_query($insert);  $did_insert=mysql_affected_rows(); }; ?><p>This is were you get to set who can view your profile and if they can view your email address.</p><form name="may_i" method="post"><table id="profile_set" class="userinfo">  <tbody>    <tr><th class="ui_th">The selected user:</th><td class="ui_td"> <?php echo $theusers; ?><input type="hidden" id="theuser" name="theuser" value="<?php echo $viewed_user_id; ?>" /></td><td></td>    <tr>    <tr><th class="ui_th">Can the selected user view your profile:</th><td class="ui_td"> <label><input type="radio" name="profile" value="y" <?php if ($set_per_f['share_info']=='y'){ echo "checked=\"checked\""; }; ?> onclick="profileJS(this.value)" />Yes</label><label><input type="radio" name="profile" value="n" <?php if ($set_per_f['share_info']=='n'){ echo "checked=\"checked\""; } elseif ($did_insert=='1'){echo "checked=\"checked\""; }; ?> onclick="profileJS(this.value)" />No</label> <br /></td><td id="profile_check"></td>    </tr><?php if ($set_per_f['share_info']=='y') { ?>    <tr  id="emailTR"><th class="ui_th">Can the selected user view your email:</th><td class="ui_td"> <label><input type="radio" name="email" value="y" <?php if ($set_per_f['share_email']=='y'){ echo "checked=\"checked\""; }; ?> onclick="emailJS(this.value)" />Yes</label><label><input type="radio" name="email" value="n" <?php if ($set_per_f['share_email']=='n'){ echo "checked=\"checked\""; } elseif ($did_insert=='1'){echo "checked=\"checked\""; }; ?> onclick="emailJS(this.value)" />No</label></td><td id="email_check"></td>    </tr><?php } else { ?><tr id="emailTR"></tr><?php }; ?>  </tbody></table></form><div id="change_setting"></div>

And this processes the profile part of the most recent form. If the user browsing the page clicks yes then it will update the database and display a spot for the user to decide the someone else can view their email, and if they select no for the profile then it takes away the option for the email because the profile has to be set to yes for the email to possibly be viewed.

<?php include('wp-config.php'); $home=get_option('home');  $o_theuser = $_POST['theuser'];  $o_profile = $_POST['profile'];if ($o_theuser==null&&$o_profile==null) { header("Location: $home"); exit;} else {  $theusers_q = mysql_query(" SELECT ID,display_name FROM wp_users WHERE ID='$o_theuser';");  $theusers_f = mysql_fetch_array($theusers_q);  $theusers = $theusers_f['display_name'];  $cur_user_q = mysql_query(" SELECT * FROM wp_users WHERE display_name='$user_identity' ") ;  $cur_user_f = mysql_fetch_array($cur_user_q) ;  $cur_user_i = $cur_user_f['ID'];  $tm_userid_q = mysql_query(" SELECT * FROM wp_users WHERE display_name='$theusers' ") or die("Failed: ".mysql_error());  $tm_userid_f = mysql_fetch_array($tm_userid_q);  $user_id = $tm_userid_f['ID'];  $set_per_q = mysql_query("SELECT * FROM user_allow WHERE ID='{$cur_user_i}' AND reviewers_id='$user_id'; ") ;  $set_per_f = mysql_fetch_array($set_per_q) ;  if ($o_profile == 'y' || $o_profile == 'n') {  mysql_query("UPDATE user_allow SET share_info='$o_profile' WHERE ID='{$cur_user_i}' AND reviewers_id='$o_theuser' ");  $did_it_work=mysql_affected_rows();  if ($did_it_work=='1')  {   $results = "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/check.png\" />";  } elseif ($did_it_work=='0') {   $results = "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/oops.png\" />";  };} else { $results = "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/oops.png\" />";};?>  <tbody>    <tr><th class="ui_th">The selected user:</th><td class="ui_td"> <?php echo $theusers; ?><input type="hidden" id="theuser" name="theuser" value="<?php echo $o_theuser; ?>" /></td><td></td>    <tr>    <tr><th class="ui_th">Can the selected user view your profile:</th><td class="ui_td"> <label><input type="radio" name="profile" value="y" <?php if ($o_profile=='y'){ echo "checked=\"checked\""; }; ?> onclick="profileJS(this.value)" />Yes</label><label><input type="radio" name="profile" value="n" <?php if ($o_profile=='n'){ echo "checked=\"checked\""; }; ?> onclick="profileJS(this.value)" />No</label> <br /></td><td id="profile_check"><?php  echo $results;?></td>    </tr><?php if ($o_profile=='y'&&$did_it_work=='1') { ?>    <tr  id="emailTR"><th class="ui_th">Can the selected user view your email:</th><td class="ui_td"> <label><input type="radio" name="email" value="y" <?php if ($set_per_f['share_email']=='y'){ echo "checked=\"checked\""; }; ?> onclick="emailJS(this.value)" />Yes</label><label><input type="radio" name="email" value="n" <?php if ($set_per_f['share_email']=='n'){ echo "checked=\"checked\""; }; ?> onclick="emailJS(this.value)" />No</label></td><td id="email_check"></td>    </tr><?php } else { ?><tr id="emailTR"></tr><?php }; ?>  </tbody><?php }; ?>

And last but not least, the next will process the email part of the form.

<?php $home=get_option('home');  $o_email=$_POST['email'];  $o_theuser=$_POST['theuser'];  $theuser_e = mysql_real_escape_string($o_theuser);if ($o_email==null&&$o_theuser==null) { header("Location: $home"); exit;} else {  $theusers_q = mysql_query(" SELECT ID,display_name FROM wp_users WHERE ID='$theuser_e';");  $theusers_f = mysql_fetch_array($theusers_q);  $theusers = $theusers_f['display_name'];  $cur_user_q = mysql_query(" SELECT * FROM wp_users WHERE display_name='$user_identity' ") ;  $cur_user_f = mysql_fetch_array($cur_user_q) ;  $cur_user_i = $cur_user_f['ID'];if ($o_email=='y'||$o_email=='n'){ mysql_query("UPDATE user_allow SET share_email='$o_email' WHERE ID='{$cur_user_i}' AND reviewers_id='$theuser_e' "); $did_it_work=mysql_affected_rows(); if ($did_it_work=='1') {  echo "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/check.png\" />"; } elseif ($did_it_work!='1') {  echo "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/oops.png\" />"; };} else {  echo "<img src=\"" . get_option('home') . "/blog/wp-content/themes/A-Mess/images/oops.png\" />";}; }; ?>

Believe it or not that's all folks. Any can questions pm me.