如何在laravel中使用jquery load加载页面？

Question

I am trying to load a page using jquery load function in laravel. My code is,

$(document).ready(function() {
    $('.btn').on('click', function(){
        id = this.id;
        $('#div-details').load('{{URL::to("users/details/'+id+'/view")}}');
    });
});

When I try this code I am getting an error,

syntax error, unexpected ''+id+'' (T_CONSTANT_ENCAPSED_STRING)

When I try the load function without id variable works fine. Like,

 $('#div-details').load('{{URL::to("users/details/55/view")}}');

How can I load the id properly ?

Answer 1

Just pass it as a legal path, check the code below

$(document).ready(function() {
$('.btn').on('click', function(){
    var id = $(this).attr('id');
    $('#div-details').load('users/details/'+id+'/view');
});});

Answer 2

You are mixing worlds.

Take a look, you defined the id variable in JavaScript:

id = this.id;

But then later you use it in PHP

{{URL::to("users/details/'+id+'/view")}}

You cannot use a JavaScript variable in PHP. JavaScript runs in the browser and PHP runs on the server. What you have to do is use PHP to generate the javaScript code that initialises the variable.

$(document).ready(function() {
    $('.btn').on('click', function(){
        id = '{{$i}}';
        $('#div-details').load('{{URL::to("users/details/'+id+'/view")}}');
    });
});

That sample code assumes the $id variable is passed to the view via your controller.

Answer 3

It will work perfectly when I use like this,

$(document).ready(function() {
$('.btn').on('click', function(){
    var id = $(this).attr('id');
    $('#div-details').load('{{URL::to("users/details/")}}/'+id+'/view');  // Load like this
});});

Answer 4

Just do it simply :

$(document).ready(function() {
  $('.btn').on('click', function(){
      var id = this.id;
      var url = "users/details/"+id+"/view";
      $('#div-details').load(url);
  });
});
// Another Way 
$(document).on('click','.btn', function(){
      var id = this.id;
      var url = "users/details/"+id+"/view";
      $('#div-details').load(url);
  });
});

Keep coding, and keep sharing your resource.