Jquery Ajax is not working with Codeigniter

Question

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.. !!

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
– Battle_707, Commented Jan 3, 2016 at 17:03
I want to know that, which content from controller return to the ajax? — Aslam Kakkove
– Aslam Kakkove, Commented Jan 3, 2016 at 17:05
I'm not sure what you are asking in your comment. 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
– 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
– Rameez SOOMRO, Commented Jan 3, 2016 at 17:13
@Infolet.org 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
– acupofjose, Commented Jan 3, 2016 at 17:16

Glen Selle · Accepted Answer · 2016-01-03 21:11:56Z

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.com

<script type="text/javascript">
$(document).ready(function(){   
    var base_url='http://yourbaseurl.com/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>

edited Jan 3, 2016 at 21:11

Glen Selle

3,9564 gold badges39 silver badges59 bronze badges

answered Jan 3, 2016 at 17:11

NASEEM FASAL

2295 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ahmad Baktash Hayeri · Accepted Answer · 2016-01-03 17:21:41Z

1

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",  
     // ...

answered Jan 3, 2016 at 17:21

Ahmad Baktash Hayeri

5,9004 gold badges32 silver badges43 bronze badges

2 Comments

Aslam Kakkove Over a year ago

there was a mistake, now i edited my question, now when i click on button again a text box with button

Ahmad Baktash Hayeri Over a year ago

now when i click on button again a text box with button, sorry but your sentence is incomplete. What happens when you click it again?

halfer · Accepted Answer · 2024-03-16 13:18:22Z

1

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 comment it
     //$this->load->view('ajaxtest');
     $fullname = $this->input->post("textbox"); //not fullname
     echo $fullname;
    }
}

js

<script type="text/javascript">
$(document).ready(function(){   
    var base_url='http://yourbaseurl.com/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>

edited Mar 16, 2024 at 13:18

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Jan 3, 2016 at 17:16

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

3 Comments

Aslam Kakkove Over a year ago

I have changed my code according to your suggestion.. this works with a constant string (echo 'hello'), but not return posted string.. help me

Sudhir Bastakoti Over a year ago

@Infolet.org can you change your js code as mentioned above to see if you get both the alerts..?

Giri Annamalai M Over a year ago

data: {textbox: fullname}, Check how you are getting the post value. here its textbox. So echo $this->input->post('textbox'); or echo json_encode($_POST); exit; you can see what are all coming under post method!

score 0 · Accepted Answer · 2016-01-03 17:17:55Z

0

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');

edited Jan 3, 2016 at 17:17

answered Jan 3, 2016 at 17:01

user5670408

2 Comments

Aslam Kakkove Over a year ago

not working.. I think there is not problem with jquery source. because, tihs code works: $(document).ready(function(){ $("#getinfo").click(function() { alert('ok');}

user5670408 Over a year ago

redownload jquery than

Ken · Accepted Answer · 2016-08-15 01:22:33Z

0

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.

answered Aug 15, 2016 at 1:22

Ken

231 silver badge5 bronze badges

Collectives™ on Stack Overflow

Jquery Ajax is not working with Codeigniter

5 Answers 5

Comments

HTML

JS

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

HTML

JS

2 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related