how to put the ajax code in external.js file in php codeigniter

Question

<script type="text/javascript">
    $(document).ready(function() {
        $("#fun").focusout(function() {
            // alert("Value: " + $("#fun").val());
            $.post("<?php echo base_url() ?>index.php/login/email_exists", {
                email: $("#fun").val(),
            }, function(data, status) {
                if (data == 0) {
                    document.getElementById("error").innerHTML = "Email already exists, Please select another email";
                    document.getElementById("ddfun").focus();
                    // alert("email already exists  " + data);
                } else {
                    document.getElementById("error").innerHTML = "";
                }
                //alert("Data: " + data);
            });
        });
    });
</script>

I use more jQuery and Ajax in my application. I always write the Ajax(with php code) in view.php file. If there any option to add the Ajax in the external js file. Any help would be appreciated.

Rory McCrossan · Accepted Answer · 2016-04-28 08:49:38Z

2

The issue you have is that you are inserting the output of some PHP code to the JS, which won't work in a .js file.

To get around this you could place that PHP output as an attribute on the element itself and read it back within the external JS file. Try this:

<!-- in the head -->
<script src="/jquery.js"></script>
<script src="/my-js-code.js"></script>

<!-- example HTML element, the only relevant part is the 'data-base-url' attribute -->
<div id="fun" data-base-url="<?php echo base_url() ?>"></div>

// in my-js-code.js
$(document).ready(function() {
    $("#fun").focusout(function() {
        $.post($(this).data('base-url') + "index.php/login/email_exists", {
            email: $("#fun").val(),
        }, function(data, status) {
            if (data == 0) {
                $("#error").html("Email already exists, Please select another email");
                $("#ddfun").focus();
            } else {
                $("#error").html('');
            }
        });
    });
});

answered Apr 28, 2016 at 8:49

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

Rakesh Over a year ago

Rakesh Over a year ago

any other solution

Rory McCrossan Over a year ago

Not really. Unless you want to start processing JS files for PHP code which is a bad thing to be doing. Do you have a specific issue with the above solution? It's a widely used technique.

Rana Soyab · Accepted Answer · 2016-04-28 08:47:55Z

Define js variable in main layout file before you call your external js

<script type = "text/javascript">
    var base_url = '<?php echo base_url() ?>';
</script>

Now in external js

$(document).ready(function() {
$("#fun").focusout(function() {
  // alert("Value: " + $("#fun").val());
  $.post(base_url + "index.php/login/email_exists", {
      email: $("#fun").val(),
    },
    function(data, status) {
      if (data == 0) {
        document.getElementById("error").innerHTML = "Email already exists, Please select another email";
        document.getElementById("ddfun").focus();
        //  alert("email already exists  " + data);

      } else {
        document.getElementById("error").innerHTML = "";
      }
      //alert("Data: " + data);
    });
});

AkshayP · Accepted Answer · 2016-04-28 08:51:59Z

Yes you can.

Your view.php

<script type = "text/javascript">
    var base_url = '<?php echo base_url() ?>';
</script>
<script src="path/to/external.js"></script>

your external .js

$(document).ready(function() {
  $("#fun").focusout(function() {
    // alert("Value: " + $("#fun").val());
    $.post(BASE_URL+"index.php/login/email_exists", {
        email: $("#fun").val(),
      },
      function(data, status) {
        if (data == 0) {
          document.getElementById("error").innerHTML = "Email already exists, Please select another email";
          document.getElementById("ddfun").focus();
          //  alert("email already exists  " + data);

        } else {
          document.getElementById("error").innerHTML = "";
        }
        //alert("Data: " + data);
      });
  });
});

Collectives™ on Stack Overflow

how to put the ajax code in external.js file in php codeigniter

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related