0

I want to make a site for reservation table in restaurant and I want when click on to send me in other window and there to be reservation. I have a problem because with ajax I get data from json file and send it to html table but idk how to use click function in that.

<table id="table1" class="table table-hover container-fluid text-white" style="max-width:64%;">
                  <thead class="thead-light">
                      <tr>
                          <th scope="col">Broj stola</th>
                          <th scope="col">Pozicija</th>
                          <th scope="col">Broj stolica</th>

                      </tr>
                  </thead>
                  <tbody>

                  </tbody>
              </table>
<script>
$(document).ready(function(){
    $.ajax({

        url:"db.json",
        dataType:"json",

        success:function(data){

        $(data.stolovi).each(function(index,value){
            var stol ="<tr><td>"+value.id+"</td><td>"+
                        value.pozicija+"</td><td>"+value.brojMjesta+"</td><tr>";
            $('#table1').append(stol);
        });
        }
    });
});
</script>
Ermin Srna
  • 21
  • 4
  • In your example code, do you want that ajax to be called when a visitor clicks a button/link? – imvain2 Jul 16 '19 at 15:35
  • 1
    Explain in more detail what needs clicking and what should happen when it is clicked. Not clear how the other window needs to work – charlietfl Jul 16 '19 at 15:37
  • I need when visitor click on row to pop out reservation window and in that window to make a reservation that includes name,lastname,password for cancel reservation and time of booking and need to do it in ajax because i got the assignment from the proffessor. For now i take data from json file with ajax and append it in html table but now i need to do rest of work and i dont know how. I hope I explain it better now first time to write someting here haha – Ermin Srna Jul 16 '19 at 15:46

1 Answers1

0

First you need to define the button, then use "click" event. See below 

    var $button = $("<button>").text("Some text !").addClass("btn btn-light")


 $button.on("click", function() {
 func1()
});


function func1() {
    $.ajax({
        url: "http://localhost:3000/[methodname]",
        type: "POST",
        data: [data as json],
        contentType: "application/json",
        dataType: "json",
        success: function(data) {
                    $(data.stolovi).each(function(index,value){
            var stol ="<tr><td>"+value.id+"</td><td>"+
                        value.pozicija+"</td><td>"+value.brojMjesta+"</td><tr>";
            $('#table1').append(stol);
        });

        }
    })
}
J.K
  • 919
  • 6
  • 11
  • i can do it on that way to, but i dont want to have button i want only table and when press on row to send me to reservation window – Ermin Srna Jul 16 '19 at 15:50
  • Check this one : https://stackoverflow.com/questions/1207939/adding-an-onclick-event-to-a-table-row – J.K Jul 16 '19 at 15:52