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.

Don't Write Ajax code in blade its bad practice.Write it in JavaScript file and load it in your view. — Milind Patel, Apr 16 '19 at 06:44

score 11 · Answer 1 · answered Apr 16 '19 at 06:42

11

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');
   }
});

answered Apr 16 '19 at 06:42

Sergey Bogdanov

631
1
4
11

It's really awesome – A.A Noman Nov 09 '21 at 02:12
Man you're a life saver – aliencity Dec 09 '21 at 18:49
WOW ! Too good !!! – Leutecia Feb 13 '23 at 15:44

score 7 · Accepted Answer · answered Jun 02 '20 at 21:34

7

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');
   }
});

answered Jun 02 '20 at 21:34

Sudaba Solaimankhil

202
2
6

This shows error that says "Missing required parameter". – Leutecia Feb 13 '23 at 15:45

Kamalesh M. Talaviya · Answer 3 · 2019-04-16T06:48:01.040

0

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');
   }
});

edited Apr 16 '19 at 06:48

answered Apr 16 '19 at 06:37

Kamalesh M. Talaviya

1,422
1
12
26

your code works..i forgot X-CSRF. thanks for your help – Arshad Ameen Apr 16 '19 at 06:59
Glad to help you :) – Kamalesh M. Talaviya Apr 16 '19 at 07:02
My url get +id+ not the id – Ray Coder Feb 02 '21 at 10:44

score 0 · Answer 4 · answered Apr 10 '22 at 11:19

Try this:
$(document).on("click", ".delete", function() { 
    var $ele = $(this).parent().parent();
    var id= $(this).val();
    var url = '{{ route("student.destroy_academic_qualifications", ":id") }}';
    url = url.replace(':id', id);
    $.ajax({
        url: url,
        type: "GET",
        cache: false,
        data:{
            _token:'{{ csrf_token() }}'
        },
        success: function(dataResult){
            var dataResult = JSON.parse(dataResult);
            if(dataResult.statusCode==200){
                $ele.fadeOut().remove();
            }
        }
    });
});

score -1 · Answer 5 · answered Apr 16 '19 at 06:33

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');
   }
});

score -1 · Answer 6 · answered Apr 16 '19 at 06:38

-1

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');
   }
});

answered Apr 16 '19 at 06:38

Jesus Erwin Suarez

1,571
16
17

but the id is dynamic – Arshad Ameen Apr 16 '19 at 06:41

score -1 · Answer 7 · answered Oct 08 '20 at 14:14

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) {
        
      }
    });
    
  });

});

score -1 · Answer 8 · answered Nov 30 '21 at 06:05

I do this by two ways

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);
        }
    });
});

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 :)

score -1 · Answer 9 · answered Apr 06 '23 at 05:38

-1

"{{ route('teacher.guideline', '') }}"+"/"+data.teacher_id

This will definitely work.

answered Apr 06 '23 at 05:38

Zafeer Ahmad

240
5
17

how to pass named route parameter with ajax

9 Answers9