how to pass named route parameter with ajax

Question

I need to pass route parameter with ajax but I am using named route method in ajax code.

route I want to go Route

Route::post('/edit/{id}', 'ArticleController@updateArticle')->name('updateArticle');

Ajax

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle',"id") }}",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

I want to use variable id in ajax URL.

Answer 1

I had the same problem, just change your ajax url with this one.

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle') }}" + '/' + id,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 2

Try to use replace function:

var id = $("input[name=editId]").val();
var url = "{{ route('updateArticle', ":id") }}";
url = url.replace(':id', id);

$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url: url,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 3

Put + around id variable and make sure you are passing X-CSRF-Token via formdata variable or try sending manualy :

replace this line :

url:"{{ route('updateArticle',"id") }}",

with this :

url:"{{ route('updateArticle',"+id+") }}",

var id= $("input[name=editId]").val();
$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"{{ route('updateArticle',"+id+") }}",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 4

You can do it like this.

In your blade file

<script>
window.your_route = "{{ route('updateArticle',['id'=>$id]) }}";
</script>

In you JavaScript you can use created variable.

  $.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:window.your_route,
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 5

You can do it like this below, just hardcode the url and id

var id= $("input[name=editId]").val();

$.ajax({
   type:'POST',
   enctype: 'multipart/form-data',
   url:"edit/1",
   data: formdata,
   contentType: false,
   processData: false,
   success:function(data){
        $('.alert-success').html(data.success).fadeIn('slow');
        $('.alert-success').delay(3000).fadeOut('slow');
   }
});

Answer 6

in form

 <form id="form-create-role" action="{{route('role-create')}}" >

in file role-create.js

 $(function(){
  
  $('#form-create-role').submit(function (event) { 
    event.preventDefault();
    $.ajax({
      type: "post",
      url: $(this).attr('action'),
      data: $(this).serialize(),
      dataType: "json",
      success: function (response) {
        
      }
    });
    
  });

});

Answer 7

I do this by two ways

1. By using full url

$(document).on('click', '.view', function(){
    let contactId = $(this).attr('data-id');
    $.ajax({
        type: "GET",
        url: window.location.origin + "/view-contact-details/" + contactId,
        success: function (response) {
            console.log(response);
        }
    });
});

2. By using named route parameter

$(document).on('click', '.view', function(){
    let contactId = $(this).attr('data-id');
    let url = "{{ route('view.contact', ['id' => ":contactId"]) }}";
    url = url.replace(":contactId", contactId);
    $.ajax({
        type: "GET",
        url: url,
        success: function (response) {
            console.log(response);
        }
    });
});

You can use any of these :)