title: Is there way to pass the result of response to another page, using AJAX
body: <p>I have problem passing the result to the another page of blade.php using ajax and laravel,</p>
  
  <p><strong>I have two page,</strong></p>
  
  <ol>
  <li><p>The first page <a href="http://localhost:8000/peoplegallery" rel="nofollow noreferrer">http://localhost:8000/peoplegallery</a></p></li>
  <li><p><a href="http://localhost:8000/peoplegallery_album/" rel="nofollow noreferrer">http://localhost:8000/peoplegallery_album/</a> and the id</p></li>
  </ol>
  
  <p><strong>Scenario:</strong></p>
  
  <p>In the first page, you can see on that page are the list of album</p>
  
  <p>Example.</p>
  
  <ol>
  <li>Album1/  1</li>
  <li>Album2/  2</li>
  <li>Album3/  3</li>
  </ol>
  
  <p><strong>Example Output</strong>. if I click the calgarey album with id of 1 all the images inside of that must send to the peoplegallery_album</p>
  
  <p><a href="https://i.stack.imgur.com/SCafF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SCafF.png" alt="Output first page"></a></p>
  
  <p>So now my page transferred to <a href="http://localhost:8000/peoplegallery_album/1" rel="nofollow noreferrer">http://localhost:8000/peoplegallery_album/1</a></p>
  
  <p>Now the problem after I transferred <a href="http://localhost:8000/peoplegallery_album/1" rel="nofollow noreferrer">http://localhost:8000/peoplegallery_album/1</a>, why on response has no result.</p>
  
  <p>I have here my codes on my first page where I list all the albums,</p>
  
  <pre><code>    $(document).ready(function(){
      $.ajax({
          url:'http://localhost:8000/api/peoplegallery',
          dataType: "json",
          contentType: "application/json",
          success:function(response) {
  
  
  
              var peoplegallery = response[0].gallery_table;
              $.each(peoplegallery, function (index, el) {
  
                  var stringify_list_gallery = jQuery.parseJSON(JSON.stringify(el));
                  var gallery_file = stringify_list_gallery['file'];
                  var people_gallery_image = '&lt;img src=/storage/' + gallery_file + ' class="d-block w-100"&gt;';
                  var gallery_id = stringify_list_gallery['content_id'];
                  var gallery_content_title = stringify_list_gallery['content_title'];
                  var gallery_event_dated = stringify_list_gallery['event_dated'];
  
                  var peoplegallery_data;
  
                  peoplegallery_data = 
                  '&lt;div class="col-md-4"&gt;\
                      &lt;div class="card" style="margin-left:20px;"&gt;\
                          &lt;img class="card-img-top" src="/storage/'+gallery_file+'" alt="Card image cap" style="height:200px;"&gt;\
                          &lt;div class="card-body"&gt;\
                               &lt;h5 class="card-tilte"&gt;\
                                  &lt;a href="/peoplegallery_album/'+gallery_id+'" class="clicked_albums" data-id='+gallery_id+' style="color:black; font-weight: 500;"&gt;'+gallery_content_title+'&lt;/a&gt;\
                               &lt;/h5&gt;\
                          &lt;/div&gt;\
                          &lt;div class="card-footer"&gt;\
                              &lt;small class="text-muted"&gt;&lt;i class="icon ion-md-calendar" style="font-size:15px; color:#800000;"&gt;&lt;/i&gt;&lt;i class="far fa-calendar-check"&gt;&lt;/i&gt; '+gallery_event_dated+'&lt;/small&gt;\
                          &lt;/div&gt;\
                      &lt;/div&gt;\
                      &lt;br&gt;&lt;br&gt;\
                  &lt;/div&gt;\
                  ';
  
                  $('#list_peoplegallery').append(peoplegallery_data);
  
              });
  
  
          },
          error:function(response) {
              console.log(response);
          }
      });
  }); 
  </code></pre>
  
  <p>So now I need to create a function, to get the attribute id of album once i clicked that I will pass the ID to my api url. once success the result will send to the peoplegallery_album/1</p>
  
  <p>So this is my codes for that</p>
  
  <pre><code>    $(document).ready(function(){   
      $(document).on('click','.clicked_albums',function(e) {
          var album_id= $(this).data('id');
          $.ajax({
              url:'http://localhost:8000/api/peoplegallery_album/'+ album_id,
              type:'get',
              dataType: "json",
              contentType: "application/json",
              success:function(response) {
                  console.log(response);
              },
              error:function(response) {
                  console.log(response);
              }
          });
  
      }); 
  }); 
  </code></pre>
  
  <p>My Controller Look likes this,</p>
  
  <pre><code>    public function peoplegallery_album($id)
  {
  
  
      $get_title = DB::select('SELECT content_title,event_place,DATE_FORMAT(event_date, "%M %d, %Y") as event_dated FROM content_structure WHERE content_id = ? AND status = ? ',[$id,'Active']);
  
      $get_image = DB::select('SELECT cid,image,created_at FROM album_category WHERE cid = ?',[$id]);
  
  
  
      return response()-&gt;json(array(['logic_title' =&gt; $get_title,'get_image' =&gt;$get_image]));
  }
  </code></pre>
  
  <p>And my api route look this,</p>
  
  <pre><code>    Route::get('peoplegallery','api\UserController@peoplegallery');
  Route::get('peoplegallery_album/{id}','api\UserController@peoplegallery_album');
  </code></pre>