How do I pass multiple PHP variables to ajax function onclick

Question

I am trying to send data to one of my function within a controller using ajax but the error at the bottom (in the image) wont let the variables pass.

I'm using the codeigniter framework and this ajax function is in my view.

$(document).ready(function(){

function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
}

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

Uncaught ReferenceError: myButton is not defined(…)

Answer 1

Define the function outside of $(document).ready()

Currently, the function isn't being defined until after the dom is loaded, meaning that there is no definition when the button is setup.

This should look like this:

<script>
var myButton = function(id1, id2, id3){
                $.ajax({
                   method: "POST",
                  url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+id2+"/"+id3,
                  data: {
                    id1:id1,
                    id2:id2,
                    id3:id3
                  },
                dataType : 'text',
                  success:function(data){
                    location.reload();
                }
            });
};

    $(document).ready(function(){
//This isn't really needed
});
</script>



<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

Answer 2

You're declaring myButton within the inner document.ready function. You need to declare it in the global scope.

<script>
// Define in global scope
function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url() ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
</script>

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>

Answer 3

The answer may be one charcter ; so use <?php echo base_url(); ?> <?php echo base_url(); ?> this will print invalid Javascript and may be more !!!

$(document).ready(function(){

function myButton(id1, id2, id3){
    $.ajax({
      method: "POST",
      url: "<?php echo base_url(); ?>controller/function/"+id1+"/"+di2+"/"+id3,
      data: {
        id1:id1,
        id2:id2,
        id3:id3
      }
      dataType : 'text',
      success:function(data){
        location.reload();
    });
}
}

<div align="center">
  <a>
    <button onclick="myButton('<?php echo $id1; ?>', '<?php echo $id2; ?>', '<?php echo $id3; ?>')">
      <img  src="<?php echo base_url();?>images/button.png" >
    </button>
  </a>
</div>