CODEWITHSUNDEEP
javascriptphpajax
Travis
Travis

Reputation: 687

JQuery post to REST service

I have looked at a bunch of different Q/A on stack and I can not seem to solve my issue for why my rest interface is not getting called on the button submit. I would appreciate it if you guys could look and see where the issue could be.

The goal is to have a form input values (for now they are hard coded until I get it to work), and submit to change the database they are in via a REST call.

EDIT: On button click, no errors in console, nothing shows up in DB.

<?php 

    $id = "123456";
    $auth = "XYZ123"; //this will change daily
    $url = "http://update/this/id/$id"; //this will change based on user

?>

<script >
    const URL = <?php echo json_encode($url);?>;
    const auth = <?php echo json_encode($auth);?>;
    const data = {
        "flag":"Y" //in the database flag has a value of N want to change to Y
    }

    $.ajaxSetup({
        headers: {
            'auth-key': '${auth}',
            'api-version': '1.0',
            'Content-Type': 'application/json',
            'Accepts': 'application/json',
            'Verbosity' : '4'
        }
    });
    $('.btn').click(function(){
        $.post(URL, data, function(data, status){
            console.log('${data} and status is ${status}')
        });
    })
</script>

<button type="submit" class="btn">Send it!</button>

Upvotes: 0

Views: 23

Answers (1)

Peter
Peter

Reputation: 31701

The JavaScript executes before the DOM is loaded (<script> tags interrupt the DOM parser). By the time the script executes there is no .btn element yet.

Either

  • move the script to the end of the body (or at least after the submit button),
  • or add the event listener after the DOM has been loaded,

  • or use the global event listener 

    $(document).on('click', '.btn', function() { ... }

Upvotes: 2

Related Questions