CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
user1849060
user1849060

Reputation: 651

JavaScript value not being received by PHP

I am having trouble with a program that I have written. The idea is that I click a link and the value of the link is picked up in a JavaScript variable. I then do a GET request to send the value to a PHP variable and print it out.

Here is the code:

The HTML

<html>
    <head>
        <script src= "http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    </head>
    <body>
        <div id='mydiv'>
            <a href='/codeigniter/index.php/hashtest/hi'>Link 1</a>
            <a href='/codeigniter/index.php/hashtest/hi'>Link 2</a>
        </div>
    </body>
</html>

The jQuery (in a <script> tag within the above body)

$(function()
{
    var mydiv = $('#mydiv');
    mydiv.on('click', 'a', function(){
        var text = $(this).text();
        console.log(text);
        //$.get("hashtest.php", {qwerty: text});
        $.ajax
        ({
            url: "/codeigniter/index.php/hashtest/hi",
            data: {
                qwerty : text
            },
            async: "false",
            success: function(data){
                console.log("success!");
            },
            error: function(jqXHR, status, error)
            {

                alert("Status : " + status + " error: " + error); 
            }   
        });
    });
});

The PHP

class Hashtest extends CI_Controller {

    function __construct() {
        parent::__construct();
    }

    public function hi() {
        $x = $this->input->get('qwerty');
        print $x;
        print "";
    }

}

The error:

NS_ERROR_NOT_AVAILABLE: prompt aborted by user

At the moment, the JavaScript correctly gets the right link value as the console.log() line outputs the right thing for both links. But it seems the PHP is not receiving this value because nothing is being printed out. I've tried replacing the variable with a hard-coded string but it makes no difference. I can print static PHP from within the method above so I don't think it's an issue where I can't print any PHP at all.

A few points:

Upvotes: 3

Views: 137

Answers (2)

Jorge Faianca
Jorge Faianca

Reputation: 791

Your code is correct, but your not stopping the event when you click on the link.

Add e.preventDefault();

var mydiv = $('#mydiv');

            mydiv.on('click', 'a', function(e){
                      e.preventDefault();
                      var text = $(this).text();

      </code>

Upvotes: 0

Barmar
Barmar

Reputation: 780843

You need to prevent the default action of following the link:

$(function()
  {
      var mydiv = $('#mydiv');
      mydiv.on('click', 'a', function(e){
          e.preventDefault(); // <-- THIS IS NEEDED
          var text = $(this).text();
          console.log(text);
          //$.get("hashtest.php", {qwerty: text});
          $.ajax
          ({
              url: "/codeigniter/index.php/hashtest/hi",
              data: {qwerty : text},
              async: "false",
              success: function(data){
                  console.log("success!");
              },
              error: function(jqXHR, status, error)
              {

                  alert("Status : " + status + " error: " + error); 
              } 
          });
      });
  });

Upvotes: 3

Related Questions