user3709241 user3709241 - 1 month ago 8
Ajax Question

Ajax success not appending in table

I have a technical issue regarding my university small project. The task the professor gave me is as follows.

We are suppose to have static table which contains for example 3 domain names to give more performance on the domain availability API.


--------------------------------------------------
|example1.com | $9.99 / year | Select Button |
--------------------------------------------------
|example2.net | $12.99 / year | Select Button |
--------------------------------------------------
|example3.org | $6.99 / year | Select Button |
--------------------------------------------------


What is required?

When I click for example the "Select Button" it will send the "example1.com" to the API to check its availability then it success function returns either 1 or 0 (1 is available and 0 is not available).

if it is 1 we need to change the "Select Button" to "Selected"


--------------------------------------------------
|example1.com | $9.99 / year | Selected |
--------------------------------------------------
|example2.net | $12.99 / year | Select Button |
--------------------------------------------------
|example3.org | $6.99 / year | Select Button |
--------------------------------------------------


if it is 0 we need to change the "Select Button" to "Not Available "


--------------------------------------------------
|example1.com | $9.99 / year | Not Available |
--------------------------------------------------
|example2.net | $12.99 / year | Select Button |
--------------------------------------------------
|example3.org | $6.99 / year | Select Button |
--------------------------------------------------


Same goes for the rest , after checking all domains we will end up with the final table like this one for example


--------------------------------------------------
|example1.com | $9.99 / year | Not Available |
--------------------------------------------------
|example2.net | $12.99 / year | Selected |
--------------------------------------------------
|example3.org | $6.99 / year | Selected |
--------------------------------------------------


My files


  1. index.html

  2. domainapi.php



index.html

<table>
<tbody>
<tr>
<td class="domain">example1.com</td>
<td >$9.99 / year</td>
<td class="changebtn"><button type="button" class="btn btn-primary">Select</button></td>
</tr>
<tr>
<td class="domain">example2.net</td>
<td >$12.99 / year</td>
<td class="changebtn"><button type="button" class="btn btn-primary">Select</button></td>
</tr>
<tr>
<td class="domain">example3.org</td>
<td >$6.99 / year</td>
<td class="changebtn"><button type="button" class="btn btn-primary">Select</button></td>
</tr>
</tbody>
</table>
$(document).on('click', '.btn-primary', function(e){
e.preventDefault();
var domain = $(this).closest('tr').children('td.domain').text();
$.ajax({
type: "GET",
async: true,
url: "domainapi.php",`enter code here`
data: {domain:domain},
success: function(data){
if (data == 1) {
/* change "Select Button" to "Selected"*/
}
else {
/* change "Select Button" to "Not Available"*/
}
}
});
});


domainapi.php

$domain = $_GET["domain"];
$checkdomain = "https://api.example.com/xml.response?&Domain=$domain";
$data = file_get_contents($checkdomain);
$xml = simplexml_load_string($data);
if( ! $xml)
{echo "unable to load XML file";}
else
{
foreach ($xml->CommandResponse->DomainCheckResult as $result) {
$checkavailablity = $result["Available"];
$checkprice = $result["PremiumRegistrationPrice"];
if (($checkavailablity == "true") && ($checkprice == "0"))
{echo 1;}
/*Ajax success: function(data) will return 1 and then we decided in the above success function to change the "Select Button" to "Selected"*/
else {echo 0;}
/*Ajax success: function(data) will return 0 and then we decided in the above success function to change the "Select Button" to "Not Available"*/
}
}

Answer

Does your API return correct values?

I'm not sure if it works.

var index = $('.btn-primary').index(this);
if (data == 1) {
    /* change "Select Button" to "Selected"*/
    $('.btn-primary:eq(' + index + ')').html('Selected');
} else {
    /* change "Select Button" to "Not Available"*/
    $('.btn-primary:eq(' + index + ')').html('Not Available');
}