2

I have the following code:

$(document).ready(function(){
var btn = $('a.btn-primary'); 
var closeDate = $('td.closeDate');
var applyBtn = $('<input type="button" value=" Apply " class="toggleButton" \>');

//Rmove a link
btn.remove();

//Add button
applyBtn.insertAfter(closeDate);

$('.toggleButton').click(function(){
    var obj = $(this).closest('tr');
    var data = {
            vacancyID: obj.find('td.vacancyID').text(),
            closeDate: obj.find('td.closeDate').text(),
            roleLongTitle: obj.find('td.roleLongTitle').text(),
            roleRequirements: obj.find('td.roleRequirements').text(),
            roleResponsibilities: obj.find('td.roleResponsibilities').text(),
            roleQualifications: obj.find('td.roleQualifications').text(),
        }

         //Post the data to the page
         $.ajax({
             type: 'POST',
             url: 'vacancy.php',
             data: data,
             success: function(data){
                 alert(data);
             }
         });
        //$.post("vacancy.php", data, function(){
            //alert(data);
        //});
        console.log(data.vacancyID);
    })
});

In the console the data display correct, but alert shows something completely. The page I am posting all also don't see the post. See image below: enter image description here

I was expecting to only see the data that relates to the button I clicked and not both vacancies. Can anyone please help and tell we where I am going wrong.

Willem
  • 123
  • 9
  • 1
    Your console and alert contains two different values. `console.log(data.vacancyID);` and `alert(data);` Alert will print everything inside `data` while console just prints `vacancyID` – hungrykoala May 17 '18 at 04:06
  • you need to do `alert(data.vacancyID);` – Albert Einstein May 17 '18 at 04:08
  • Sorry, the console log must read `console.log(data)`. The console log shows the data based on which button is clicked. – Willem May 17 '18 at 04:13
  • @Willem what is the console result. – Albert Einstein May 17 '18 at 04:15
  • you need to use a different variable for `data: data,` since `success: function(data){` is the callback for `url: 'vacancy.php',` you might end up confusing things here. so it's best to be safe. – hungrykoala May 17 '18 at 04:17
  • @5740382 the the vacancyID and the rest of the data in that line that relates to it from the button I clicked. I don't know how to add a screen shot (image) into a reply sorry. – Willem May 17 '18 at 04:20

1 Answers1

0

I found 2 points:

  1. We don't have \ in the end of input tag. Please remove it.

    var applyBtn = $('<input type="button" value=" Apply " class="toggleButton" \>');

  2. Apply button should be appended into td tag, not inserting after td, because tr contains tdor th, input is not a kind of table element.

    applyBtn.insertAfter(closeDate);

Somehow, incorrect node will effect to our functionalities.

  1. Your data was alerted is not your data variables. It's response data.

success: function(data){ alert(data); }

is should be:

success: function(res){ alert(data); }

Sakata Gintoki
  • 1,817
  • 16
  • 23