Replacing text with an ajax call (I think?)

[imperialized]

Ok guys, I'm working on building the admin control panel of my website. What I am currently stuck on is this:

 

When a user clicks the link to "Approve Users" a hidden div is shown that lists all accounts that need approval (an AJAX call is made and a new page is shown in the div (list_approvalneeded.php). Within that page there are links that call yet another javascript function to approve/deny the user (again, another page is called delete_user.php (for denying) or approve_user.php (for approvals).

 

 

All of my code works to delete the user, but I am having trouble with returning the information back to the page. When a user is approved/denied, I wish to replace the listed information for the user with a basic "Account Approved/Account Denied" message.

 

Ok, so now that you understand what I a trying to do I will give you some of the coding that I have used.

 

When listing all of the accounts that need approval I have:

            while($x = mysql_fetch_array($inactive_query)){
            echo "<span id='". $x[id] ."'>";
            echo "<tr>";
            echo "<td>" . $x['username'] . "</td>"; 
            echo "<td>" . $x['FullName'] . "</td>"; 
            echo "<td>" . $x['Email'] . "</td>";
            echo "<td align='center'>
            <button onclick=\"approve(". $x[id] .")\" id=\"btnApprove\"></button>
            <button onclick=\"deny(". $x[id] .")\" id=\"btnDeny\"></button>
            </td>";
            echo "</tr>";
            echo "</span>";

note: I tried using the SPAN with the same ID as the user to replace the text with my ajax call (this did not work, was just something I tried.

 

The javascript for the delete user is:

function deny(id){
var conBox = confirm("Are you sure?" + id);
if(conBox){ //They are sure they wish to deny/delete

   jQuery.ajax({
   type: "POST",
   url: "include/ajax/delete_account.php",
   data: 'id=' + id,
   cache: false,
   success: function(response){
   var responseCode = response.substring(0,2);
   var responseString = response.substring(2); 
   if(responseCode == "ok"){ //Account was deleted
    $("#"+id).html(responseString);
   } else { 
   alert("Response is: " + responseString) //Error
   }
   
	   }
     });
    }  
}

 

Note: on my delete_account.php I return a couple things. First, I print an "ok" to know everything was successful, then I print the "Account Denied".

That is the reason for my two variables, responseCode and responseString.

 

I am truly stuck, someone please help!!!

 

 

 

 

 

[AyKay47]

okay, well if what you want to be deleted is being deleted, then we know that your ajax call is valid and the "id" variable that is passed through the function is correct.

what I normally like to do when returning values from an ajax call is if everything goes smooth with the backend code I return a 1, or true, else i return 0 or false. then i handle the responses as you have done..will look something like this.

 

 jQuery.ajax({
   type: "POST",
   url: "include/ajax/delete_account.php",
   data: 'id=' + id,
   cache: false,
   success: function(response){
   if(response == 1){ //Account was deleted
    $("#"+id).html("Account Deleted");
   } else { 
   alert("Response is: error") // whatever error is present
   }
   
	   }
     });

 

also, I noticed that you are encasing columns and rows (<td> and <tr>) in a span, and you do not have <table> tags at all, change your span to a table

 

echo "<table id='". $x[id] ."'>";
            echo "<tr>";
            echo "<td>" . $x['username'] . "</td>"; 
            echo "<td>" . $x['FullName'] . "</td>"; 
            echo "<td>" . $x['Email'] . "</td>";
            echo "<td align='center'>
            <button onclick=\"approve(". $x[id] .")\" id=\"btnApprove\"></button>
            <button onclick=\"deny(". $x[id] .")\" id=\"btnDeny\"></button>
            </td>";
            echo "</tr>";
            echo "</table>";

 

you will want to make sure that the id that ajax is looking to inject with your response corresponds to the id of your table.

 

[imperialized]

Sorry, I did not include all of the code in my sample code. The code above with the table is just my loop for creating all of the table rows. In fact, there is a table and end table tag, as well as my table headers.

 

Perhaps I was not clear enough with my previous post I will try to focus more directly as to what my problem is.

 

If you look at the above javascript code you will see I have responseCode and responseString.

 

responseCode picks up the OK and the responseString should hold the rest of the output I am returning (which would be the Account has been approved/denied)

 

What I am looking to do is replace the table row that contains the user's information with the responseString.

 

With my code that I have now:

responseCode = OK

responseString = The account has been approved

 

//If we made it this far everything went OK!
echo "ok";

echo "The account has been approved.";

 

So I know my ajax is working correctly, what I am having a problem with is actually replacing the Table Row itself.

 

If you have any more suggestions please let me know. Thanks in advance

[AyKay47]

Then your selector in your jquery is not matching an I'd in the DOM.

[imperialized]

Strange, I ran the page itself without running it through jQuery and the in the SPAN matches the ID in my javscript.

 

I checked this by using an alert("ID is:"+id);

 

and checked the SPAN by running the page and viewing the source. Could it have something to do with the table being called in my ajax? as it is not hard coded in the actual page itself?

[AyKay47]

In this case the only real stipulation would be that the element would have to exist in the DOM before the injection is executes.

[imperialized]

I think that is the problem, but how do I fix that? The element isnt created until after the first ajax call is made. I am fairly new with ajax so I don't truly understand it.

[imperialized]

Ok, that was not the issue. The problem lies within javascripts ability to manipulate tables. In order to achieve what I wanted I would have had to change my javascript completely and change each cell individually.

 

To overcome this, I just switched to using DIVs to arrange the information and it works just fine