Why route() function does now works using laravel? - php

Question

In my laravel package the route does not working it is showing following incorrect route in debugger
Request URL: http://localhost:8000/%7B%7B%20route('contact')%20%7D%7D
However my route is as following
Route::group(['namespace' => 'ayazdev\Contact\Http\Controllers'], function(){
Route::get('contact', 'ContactController#index')->name('contact');
Route::post('contact', 'ContactController#send')->name('sendForm');
});
And following is where I am calling the route
$(function(){
$("#contact-form").submit(function(e) {
var form = $(this);
$.ajax({
type: "POST",
url: "{{ route('contact') }}",
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
});
if above detail does not enough to understand then you can kindly check it on github.
Can someone kindly guide me why it is now working, I will appreciate. Thanks

Answer 1

The curly braces are part of the Laravel Blade views, but you are using this in a JavaScript file. This code is not parsed by Laravel, so you cannot use php functions here.
If you want to get named routes in your JavaScript code, you will have to render them into a JavaScript variable or use a package like Ziggy to get route functionality in JavaScript.

Answer 2

As noted by Jerodev the curly braces are from Laravel Blade and you are probably using it in a Javascript file. Either you can move it to a blade file as such:
<script>
$(function(){
$("#contact-form").submit(function(e) {
var form = $(this);
$.ajax({
type: "POST",
url: "{{ route('contact') }}",
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
});
</script>
Or if you prefer to keep it in a separate file you can have a tag with just the information about that route and get it via jQuery as you are doing:
// at the blade file add
<div id="routeToContact" data-route="{{ route('contact') }}">
// At the javascript file you can do the following
var route = $("#routeToContact").data('route');
$("#contact-form").submit(function(e) {
var form = $(this);
$.ajax({
type: "POST",
url: route,
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
As a personal taste I would chose the second method to keep everything organized but as my mom always said: "choose what your heart beats for"

Answer 3

You are using a Blade syntax in a simple Javascript file.
Try to do the following:
$(function(){
$("#contact-form").submit(function(e) {
var form = $(this);
$.ajax({
type: "POST",
url: "<?= route('contact'); ?>",
data: form.serialize(),
success: function(data)
{
alert(data);
}
});
e.preventDefault();
});
});
That way, you use PHP itself to get the address of the desired route.
See more about this sintax in: https://secure.php.net/manual/pt_BR/ini.core.php#ini.short-open-tag