Trigger API url without leaving page

Question

I have a php page with buttons defined like this:

$id=17;
echo " <a href='#' class='btn btn-xs' onclick=process($id,'99')>ON</a>";

calling a script:

    <iframe height='0' width='0' name='hiddenFrame' id='hiddenFrame'>
</iframe>
<script language=javascript>
  //  Grab the device id and type and append them to the forms querystring ...
  function process(id,value)    
    {   
      document.getElementById("hiddenFrame").src="http://192.168.1.90/JSON?request=controldevicebyvalue&ref=" + id +"&value=" + value;
    }     
</script>

The purpose is to call the URL in the script with the parameters as it will trigger an event on the API. The buttons and the scripts works, but I when I hit a button in the buttom of the page, it scrolls to the top - which is quite unwanted with a mobile device where my page will be long. Furthermore, I think the purpose can be achived with less or more elegant code?

Why not [jQuery + AJAX call](http://api.jquery.com/jQuery.get/)? Using an `` seems super mega hack. — tadman, Oct 14 '14 at 20:12
I agree, its a mega hack - I'm quite sure I make this more difficult than it is, but my knowledge on jQuery and AJAX is too limited - I have tried a few solutions but couldnt make it work — user1546642, Oct 14 '14 at 20:19

score 2 · Accepted Answer · edited May 23 '17 at 12:20

The reason why it is scrolling to the top is because of the # in the href attribute. You can do it in raw JS, but it's also possible with jQuery. In your PHP document, I recommend storing variables you want to pass in HTML5 data- attribute. Since you need to pass both ID and value, we can use data-id and data-value for the purpose, or any other suffixes you desire.

$id=17;
echo " <a href='#' class='btn btn-xs' data-id='$id' data-value='99'>ON</a>";

For the jQuery part, you can use a combination of an AJAX call using $.ajax and construct your query string using the data object. Finally, incorporate e.preventDefault() to prevent firing of the default events that follows clicking on the <a> (in this case, catapults user back to the top of the HTML document).

$('a[data-id][data-value]').click(function(e) {
    // Make AJAX call
    $.ajax({
        url: 'http://192.168.1.90/JSON',
        type: 'GET',
        data: {
            request: 'controldevicebyvalue',
            ref: $(this).data('id'),    // Or $(this).attr('data-id')
            id: $(this).data('value')   // Or $(this).attr('data-value')
        }
    }).done(function(msg) {
        // Callback for success
        console.log('Success: ' + msg);
    }).fail(function(msg) {
        // Callback for failure
        console.log('Failure: ' + msg);
    });

    // Prevent default action (scrolling to top)
    e.preventDefault();
});

The only drawback is that AJAX calls are restricted by the same origin policy to prevent XSS. If you are making AJAX calls to a different domain, consider using JSONP.

It is good practice to inspect your browser for HTTP headers received from the AJAX call, in order to perform troubleshooting.

Trigger API url without leaving page

1 Answers1