Triggering AJAX function via - PHP

Question

I need to display a query via AJAX and to be able to do that, i have to match the ID of the product. Thus i thought of performing a POST method via AJAX to allow the execution of the query.

Now i would like to do a trigger function for the AJAX such that the information will be shown on the page itself instead of being redirect to another page. How do i go about doing it ? I have added tried various place to add the Onclick function, however nothing seems to work.

Any suggestion ?

Thanks

 echo '<a onclick="showUser('.$row['ID'].')" method = "POST" action= "viewComments.php">Show Comments</a>';

<script>
function showUser(str) {
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("Post","viewComments.php?q="+str,true);
  xmlhttp.send();
}
</script>

You have a function which requires a parameter: `showUser(str)`, but when you call it, you're not providing a value for that parameter. — IMSoP, May 17 '14 at 14:15

Viktor Svensson · Accepted Answer · 2014-05-17T14:24:25.963

1

Remove the 'href=""' from your links. This is how they should look:

<a Onclick="showUser()" >Show Comments</a>

Hope this helps! :)

Edit: This is how I would call "showUser()" with an ID:

echo '<a onclick="showUser('.$row['ID'].')" >Show Comments</a>';

edited May 17 '14 at 14:24

answered May 17 '14 at 14:12

Viktor Svensson

755
3
17

Svensson .Thanks it does helps. Also can i check with you, is that the right way for me to post my value(ID) over ? – Yeo Tze Tian May 17 '14 at 14:16
What do you mean? The ID you have in the hidden field? – Viktor Svensson May 17 '14 at 14:19
Yeap. That is the one. What do you reckon ? – Yeo Tze Tian May 17 '14 at 14:24
1

Removing the href attribute may cause some browsers to apply different default styling. It's better to add a `return false` in the function or the `onclick` attribute itself, which cancels the default action of the click. – IMSoP May 17 '14 at 14:32
The styling issue is easily solved through CSS though. Another way, of course, is to use a element instead. – Viktor Svensson May 17 '14 at 14:36

score 0 · Answer 2 · edited May 23 '17 at 11:57

I just do not like those onClick() events in the html. It is also not good practice (see Why is using onClick() in HTML a bad practice?)

It would be just better to bind events to html elements in your javascript not your html. Like this:

Html:

<a href="http://echo.jsontest.com/key/value/one/gotIt" id="myLink" >Show Comments</a>

Javascript:

function addEventListener(el, eventName, handler) {
  if (el.addEventListener) {
    el.addEventListener(eventName, handler);
  } else {
    el.attachEvent('on' + eventName, function(){
      handler.call(el);
    });
  }
}

var el = document.getElementById('myLink');
addEventListener(el, 'click', showUser);

Demo: http://jsfiddle.net/dgrCw/1/

Just my two cents...

score -1 · Answer 3 · answered May 17 '14 at 14:15

-1

Try this one.

<a id="showUser">Show Comments</a>

$('#showUser').click(function(){
  //your ajax code goes here
  return false;
});

answered May 17 '14 at 14:15

pratik nagariya

574
5
21

This requires jQuery. He's using regular javascript. – Viktor Svensson May 17 '14 at 14:17

Triggering AJAX function via - PHP

3 Answers3