Jump to content

Ajax


hgmme@wa
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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 = "";

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

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).
Link to comment
Share on other sites

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;}

Link to comment
Share on other sites

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.
Link to comment
Share on other sites

  • 3 weeks later...
:) 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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...