why I can't get the value when make a jquery/ajax call on link click?

Question

In my website I have a link where user id is store like this :

<p>by <a href="#" onclick="ofUser(<?php echo $uid; ?>, event);"><?php echo $store_name; ?> (<?php echo $no_pro_of_user; ?>)</a></p>

Here you can see variable $uid. This is the user id. So I want to make ajax call when I click on this link. It's should get the value of $uid to result page ofUser.php. But in result page (ofUser.php) it's showing :

Undefined index: id

Can you tell me how can I solve it ?

Here is the JS offUser function

function ofUser(id, event){
  id = $(id);
  event.preventDefault();
  var formData =  id;      
  $.ajax({
    url :  <?php echo "'ofUser.php'"; ?>,
    type : 'POST',
    xhr : function () {
      var myXhr = $.ajaxSettings.xhr();
      return myXhr;
    },
    beforeSend : function () {
      $("#ofUser_message").val("Searching...");
    },
    success : function (data) {
      $("#danger").hide();
      $("#bydault_pagination").hide();
      $("#bydeafult_search").hide();
      $("#ofUser_message").html(data);                            
    },

    data: formData,
    cache: false,
    contentType: false,
    processData: false
  });  
}

offUser.php

echo $uid = (int) $_POST['id'];

you haver id = $(id). If this is the 1st time you're declaring this variable, you should use: var id = $(id) otherwise it will be undefined and could cause the error you're reporting. — LuvnJesus, Feb 16 '16 at 04:24

Rayon · Accepted Answer · 2016-02-16T04:39:17.950

id = $(id); will cast id to jQuery object which is not making any sense here. It will make id as array(id=$(1) => [1])

Also note, your data being sent over server should be an object.

Try this:

function ofUser(id, event) {
  event.preventDefault();
  $.ajax({
    url: 'ofUser.php',
    type: 'POST',
    xhr: function() {
      var myXhr = $.ajaxSettings.xhr();
      return myXhr;
    },
    beforeSend: function() {
      $("#ofUser_message").val("Searching...");
    },
    success: function(data) {
      $("#danger").hide();
      $("#bydault_pagination").hide();
      $("#bydeafult_search").hide();
      $("#ofUser_message").html(data);
    },

    data: {
      id: id
    },
    cache: false
  });
}

Edit: Remove processData : true as it will send data as DOMDocument

It's showing : Undefined index: id in on result page. – shibbir ahmed Feb 16 '16 at 04:34 — shibbir ahmed, Feb 16 '16 at 04:34

score 0 · Answer 2 · answered Feb 16 '16 at 04:22

Just try to pass id = id; instead id = $(id); because $(id) means you are trying to get any DOM element values using jQuery, I hope it will work, also tell me that, what HTML is generated for your this code

<p>by <a href="#" onclick="ofUser(<?php echo $uid; ?>, event);"><?php echo $store_name; ?> (<?php echo $no_pro_of_user; ?>)</a></p>

score 0 · Answer 3 · edited May 23 '17 at 11:59

To solve this problem, SIMPLIFY to make sure you are correctly passing the ID value. In your AJAX success function, ALERT the value you send back so you can immediately see what you received in PHP.

Try setting it up this way instead:

html:

<p>by <a id="uid_<?php echo $uid; ?>" href="#" ><?php echo $store_name; ?> (<?php echo $no_pro_of_user; ?>)</a></p>

javascript:

$('[id^=uid_]').click(function(event){
    event.preventDefault();
    var formData = this.id.split('_')[1];
    $("#ofUser_message").val("Searching...");

    $.ajax({
        type : 'POST',
         url : 'ofUser.php',
        data : id=formData,
        success : function (data) {
            alert(data);
            $("#danger").hide();
            $("#bydault_pagination").hide();
            $("#bydeafult_search").hide();
            $("#ofUser_message").html(data);                            
        }
    });


});

ofUser.php

$uid = $_POST['id']; //REMOVE the (int) for now, to verify what PHP is receiving - then add it back.
echo 'Received $uid';

Notes:

(1) Note that you misspelled ofUser.php and offUser.php (not sure which is correct - I went with ofUser.php)

(2) Try not to use inline javascript. jQuery is easiest to use when you break out the javascript from the HTML, as per above example.

(3) In above example, the jQuery selector starts with is used:

$('[id^=uid_]').click(function(event){

That code is fired by any element whose ID begins with uid_, as we configured the <a> tag's ID to appear. That makes it easy to see in your HTML.

(4) This line:

var formData = this.id.split('_')[1];

uses pure javascript to get the ID, because it's faster - and simpler to type. The code splits off the 2nd part of the ID, at the _ char, resulting in just the ID number. That ID number is then assigned to the variable formData

(5) In the AJAX code block, make sure the url is spelled correctly:

url : 'ofUser.php',

Here are some other SIMPLE AJAX examples that might help. Don't just look at them - reproduce them on your server and play with them. They are simple, but you may learn a lot:

AJAX request callback using jQuery

score 0 · Answer 4 · answered Feb 16 '16 at 04:41

0

When click over any hyperlink then start redirecting to provided URL. so you need to prevent its default action using below code inside your click event handler

event.preventDefault();

answered Feb 16 '16 at 04:41

Satish Kumar sonker

1,250
8
15

why I can't get the value when make a jquery/ajax call on link click?

4 Answers4