Question 281447 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel Blade does not load if ajax is added

When I add the following ajax to my laravel blade file the page stops rendering.
If ajax part is removed the page renders perfectly fine

<input type="text" name="voucher_no" id="voucher_no" class="form-control">
<input type="text" name="year" id="year" value="{{ date('Y') }}">
<button type="button" id="convertFinal" class="btn btn-success me-1">Convert</button>


<script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});
function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax({
       type: 'POST',
       url: "{{ vouchername }}",
       data: {
           '_token': '{{ csrf_token() }}',
           'voucher_no': voucherNo,
           'year': year,
        },
        success: function(data) {
           if (data) {
              $("#form").submit();
           } else {
              validationForm.valid();
              $("#invoiceError").text('Voucher no. Must be unique.');
           }
        }
    });
}
</script>

If I remove the ajax part, then the page renders and alert and log both works fine.
If ajax is added then page does not render, neither does it show any error in console.

Also, I have multiple ajax calls in this project and they work fine on other pages but cause issue only on this page.

Tags:

2

Answers


  1. 0

    Here’s the problem. Your code currently looks like this:

    <script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});
function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax({
       type: 'POST',
       url: "{{ vouchername') }}",
       data: {
       '_token': '{{ csrf_token() }}',
       'voucher_no': voucherNo,
       'year': year,
    },
    success: function(data) {
       if (data) {
          $("#form").submit();
       } else {
          validationForm.valid();
          $("#invoiceError").text('Voucher no. Must be unique.');
       }
    }
});
</script>

    But it needs to look like this:

    <script>
$("#convertFinal").on('click', function() {
    let voucherNo = $("#voucher_no").val();
    let year = $("#year").val();
    checkInvoiceNo(voucherNo, year);
});

function checkInvoiceNo(voucherNo, year) {
    alert("in");
    console.log(voucherNo, year);
    $.ajax(
        {
           type: 'POST',
           url: "{{ vouchername') }}",
           data: {
           '_token': '{{ csrf_token() }}',
           'voucher_no': voucherNo,
           'year': year,
        },
        success: function(data) {
            if (data) {
                $("#form").submit();
            } else {
                validationForm.valid();
                $("#invoiceError").text('Voucher no. Must be unique.');
            }
        }
    ); // <- remove the extra brace here
} // <- you are missing this final closing brace
</script>

    My guess is that when you’re removing the $.ajax stuff, you’re not removing the final }); and this is terminating your function correctly and silently discarding the superfluous ).

    But in the current shape, it will not work because your checkInvoiceNo function isn’t terminated correctly.

    Login or Signup to reply.
  2. 0

    You are having a syntax error in your checkInvoiceNo function.

    $.ajax({
   type: 'POST',
   url: "{{ vouchername') }}",
   data: {
   '_token': '{{ csrf_token() }}',
   'voucher_no': voucherNo,
   'year': year,
},

    In this part of your function, the syntax error is located at your url property in the argument you provided for the ajax function call. Notice that you have ') after vouchername, it’s probably a copy-paste error. Remove that (')) and you should be good to go.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search