javascript - Jquery Ajax is not working with Codeigniter

I am a ajax beginner, Here I am trying to show a text box value in same page using Ajax.

My Controller code:

<?php
class Merchant extends CI_Controller
 {

    public function ajaxtest()
    { 

     $this->load->helper('url');
     $this->load->view('ajaxtest');
     $fullname = $this->input->post("fullname");
     echo $fullname;

    }
}
?>

Here is my view code:

<head>
 <script src="<?php echo base_url();?>assets/js/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){   

    $("#getinfo").click(function()
    {   

     $.ajax({
         type: "POST",
         url: "<?php echo base_url(); ?>merchant/ajaxtest",
         data: {textbox: $("#fullname").val()},
         dataType: "text",  
         cache:false,
         success: 
              function(data){                    
                $('#mytext').html(data);
              }
          });
     return false;
 });
 });

</script>
 </head>
 <body>
 <form method="post">
        <input  type="text" id="fullname"/>
        <input  type="button" value="getinfo" id="getinfo"/>      
      <span id="mytext"></span>
 </form>

 </body>

When I click on the button getinfo, I want to show the text inside the text box as span text. But now it shows nothing..

Updated:

After experts' opinion, I edited some text(see my edit note), Now When i click on the button, it shows again a textbox and a button.. !!

I am a ajax beginner, Here I am trying to show a text box value in same page using Ajax.

My Controller code:

<?php
class Merchant extends CI_Controller
 {

    public function ajaxtest()
    { 

     $this->load->helper('url');
     $this->load->view('ajaxtest');
     $fullname = $this->input->post("fullname");
     echo $fullname;

    }
}
?>

Here is my view code:

<head>
 <script src="<?php echo base_url();?>assets/js/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){   

    $("#getinfo").click(function()
    {   

     $.ajax({
         type: "POST",
         url: "<?php echo base_url(); ?>merchant/ajaxtest",
         data: {textbox: $("#fullname").val()},
         dataType: "text",  
         cache:false,
         success: 
              function(data){                    
                $('#mytext').html(data);
              }
          });
     return false;
 });
 });

</script>
 </head>
 <body>
 <form method="post">
        <input  type="text" id="fullname"/>
        <input  type="button" value="getinfo" id="getinfo"/>      
      <span id="mytext"></span>
 </form>

 </body>

When I click on the button getinfo, I want to show the text inside the text box as span text. But now it shows nothing..

Updated:

After experts' opinion, I edited some text(see my edit note), Now When i click on the button, it shows again a textbox and a button.. !!

Share Improve this question edited Jan 3, 2016 at 17:52 asked Jan 3, 2016 at 16:57 Aslam Kakkove 971 silver badge12 bronze badges

1 Did you forget your file extension in your URL? Right now it just points to "merchant/ajaxtest". If that's correct, do you get the alert, or does the AJAX call go silent? In case of the latter, you should add an error function to your AJAX call so you can catch the jqHXR. – Battle_707 Commented Jan 3, 2016 at 17:03
I want to know that, which content from controller return to the ajax? – Aslam Kakkove Commented Jan 3, 2016 at 17:05
I'm not sure what you are asking in your ment. If you use a browser like Chrome or FireFox, use your developer tools to see what your php request returns. Otherwise, use an alert() or console.log() call to dump the data that php returns to you for debugging purposes. Also, you should probably use ` $('#mytext').append(data);` instead. – Battle_707 Commented Jan 3, 2016 at 17:12
open ajax link in browser to check response from base_url + "merchant/ajaxtest" OR try to check with index.php/merchant/ajaxtest – Rameez SOOMRO Commented Jan 3, 2016 at 17:13
@Infolet what he's saying is there is no base_url javascript variable that has been declared, to see what he means add this to the top of your document ready, alert(base_url + "merchant/ajaxtest"); and you should see the url you're attempting to AJAX to (i.e. the wrong one) – acupofjose Commented Jan 3, 2016 at 17:16

| Show 1 more ment

5 Answers 5

Sorted by: Reset to default 4

Did you set the base_url variable with a link on the Javascript? Because your post url contains this variable and you need set this to make it work. So initialize the variable with the base_url link.

See the corrected example below . Set your domain instead of the yourbaseurl.

<script type="text/javascript">
$(document).ready(function(){   
    var base_url='http://yourbaseurl./index.php/';
    $("#getinfo").click(function()
    {   

     $.ajax({
         type: "POST",
         url: base_url + "merchant/ajaxtest", 
         data: {textbox: $("#fullname").val()},
         dataType: "text",  
         cache:false,
         success: 
              function(data){                    
                $('#mytext').html(data);
              }
          });
     return false;
 });
 });

</script>

Your base_url variable seems to be undefined in your JavaScript.

One simple approach to get the base URL is to echo it out in a hidden input, and then grab the value of that input in your JS code:

HTML

<input type='hidden' id="baseUrl" value="<?php  echo base_url(); ?>" />

JS

var base_url = $('#baseUrl').val(); 


$.ajax({
     type: "POST",
     url: base_url + "/merchant/ajaxtest", 
     data: {textbox: $("#fullname").val()},
     dataType: "text",  
     // ...

You are passing in textbox as parameter from your ajax to controller and trying to get POST data with name fullname. That won't work, since you passed in the name of parameter as textbox. Access that in your post as:

class Merchant extends CI_Controller
 {

    public function ajaxtest()
    { 
     $this->load->helper('url');
     //you dont need to load view so ment it
     //$this->load->view('ajaxtest');
     $fullname = $this->input->post("textbox"); //not fullname
     echo $fullname;
    }
}

<script type="text/javascript">
$(document).ready(function(){   
    var base_url='http://yourbaseurl./index.php/';
    $("#getinfo").click(function() {
    
    var fullname = $("#fullname").val();
    alert("Fullname:" + fullname); //do you get this alert   

     $.ajax({
         type: "POST",
         url: base_url + "merchant/ajaxtest", 
         data: {textbox: fullname},
         cache:false,
         success:function(data){
           alert("Response:" + data); //do you get this alert                 
           $('#mytext').html(data);
         }
     });
     return false;
 });
 });

</script>

Try using this:

<base href="<?=base_url();?>">
<script src="assets/js/jquery-latest.min.js"></script>

And this in ajaxtest:

$this->load->helper('url');

And also Comment out this:

// $this->load->view('ajaxtest');

Might be a little late with this response - but someone might find this while searching for a solution. I was having the same issues with Codeigniter and JQuery ajax/post response. I could not get this to work no matter what I tried. In the end, it turned out to be php_error that was causing the problem. Once I removed it, everything worked fine with my post/response.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Jquery Ajax is not working with Codeigniter - Stack Overflow

5 Answers 5

HTML

JS

与本文相关的文章

评论列表(0)