how to use laravel url and route helper in $ajax (js file)

user_10546600 0
Viewed 4015

how to translate url like this 

http://localhost/event/add

but i got always like this when i submit form

http://localhost/%7B%7B%20url('event/add')%20%7D%7D

my js code is 

 $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: "{{ url('event/add') }}",
                data: form,
                dataType: "json",
                success: function (data) {
                    console.log("yes :- " + JSON.stringify(data));
                 }
        },'json');

my web.php file

Route::post('/event/add','eventController@create')->name('event.Add');

laravel jquery ajax
3 Answers

You can not call laravel codes inside js file unless js codes are inside laravel blade views file.

so to call laravel codes is either you pass them as html tags attributes inside your view then call them with javascript inside js file

i.e myview.blade.php

<input type="hidden" id="myurl" url="{{url('event/add')}}" />

then in your js file

var myurl = $('#myurl").attr('url');
$.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: myurl,
                data: form,
                dataType: "json",
                success: function (data) {
                    console.log("yes :- " + JSON.stringify(data));
                 }
        },'json');
user_40573770

Try like this example,

$.ajaxSetup({
       headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
       }
  });

$url = '{{url('event/add')}}';

$.ajax({
    type:'POST',
    url: $url,
    success:function(data) {
        $("#msg").html(data.msg);
    }
});
user_18553570

JavaScript file can't render the php/blade code. It doesn't work in a .js file as they are not parsed in .js file. So you can use some tricks to get your rendered/translated url by blade as given below.

In the following examples I am assuming the name of your blade file is view.blade.php and javascript file is script.js

First Solution:

In view.blade.php write the following code

<script>
   var add_event_url = "{{ url('event/add') }}"
</script>

Include your js file below the script tags.

Then you can use add_event_url variable in your javascript file in script.js file

$.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: add_event_url, //http://localhost/event/add
                data: form,
                dataType: "json",
                success: function (data) {
                    console.log("yes :- " + JSON.stringify(data));
                 }
        },'json');

Second Solution: You can use route or url helper in an HTML element attribute and on click you can get the parsed url as given below in your view.blade.php file

<a href="{{ url('event/create') }}" id="create_event">Add Event</a>

and in script.js file

$(document).on('click', '#create_event', function(){
    var add_event_url = $(this).attr('href');
    $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: add_event_url, //http://localhost/event/add
                data: form,
                dataType: "json",
                success: function (data) {
                    console.log("yes :- " + JSON.stringify(data));
                 }
        },'json');

});

I hope it will help.

user_20908720
Related