dowm41315
2016-10-03 08:16
浏览 128

将数据库值传递给模态弹出窗口

I want to pass the fetched database value to modal popup.I have fetched values from database and listed as table with pagination.

'name' field has link and will show model popup while triggering a link.I want to list the details of name which I check from the link in laravel 5.3.

Now model pop up trigered with 'Modal Header 3' for all link.I want to know how to pass the value modal popup and show the details of particular id. I want to know to know shall I need separate page or controller to do this.Where to write the query for modal popup.How can I display the details of specific Id.

id name age

1 xx 26

2 yy 28

3 zz 30

<table border = 1>
     <tr>
        <td>ID</td>
        <td>Passanger Name</td>
        <td>Destination</td>
        <td>Created Date</td>
     </tr>
     @foreach ($users as $user)
     <tr>
        <td>{{ $user->p_id }}</td>
        <td><a href="#" class="viewPopLink" role="button" data-id="{{ $user->p_id }}" data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a></td>
        <td>{{ $user->destination }}</td>
        <td>{{ $user->created_date }}</td>
    </tr>
     @endforeach

  </table>
{{$users->links()}}

 <div class="modal fade" id="myModal" role="dialog">
 <div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header {{ $user->p_id }}</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>

图片转代码服务由CSDN问答提供 功能建议

我想将获取的数据库值传递给模态弹出窗口。我从数据库中获取值并列为具有分页的表 。

'name'字段有链接,并在触发链接时显示模型弹出窗口。我想列出我从laravel 5.3中的链接检查的名称的详细信息。

现在模型弹出与所有链接的'模态标题3'交叉。我想知道如何传递值模态弹出窗口并显示特定id的详细信息。 我想知道我需要单独的页面或控制器来执行此操作。在哪里编写模式弹出的查询。如何显示特定Id的详细信息。

id name age

1 xx 26

2 yy 28

3 zz 30

 &lt; table border = 1&gt; 
&lt; tr&gt; 
&lt; td&gt; ID&lt; / td&gt; 
&lt; td&gt;  Passanger名称&lt; / td&gt; 
&lt; td&gt;目的地&lt; / td&gt; 
&lt; td&gt;创建日期&lt; / td&gt; 
&lt; / tr&gt; 
 @foreach($ users as $ user)
&lt  ; tr&gt; 
&lt; td&gt; {{$ user-&gt; p_id}}&lt; / td&gt; 
&lt; td&gt;&lt; a href =“#”class =“viewPopLink”role =“button”数据 -  id =“{{$ user-&gt; p_id}}”data-toggle =“modal”data-target =“#myModal”&gt; {{$ user-&gt; p_name}}&lt; a&gt;&lt; / td&gt;  
&lt; td&gt; {{$ user-&gt; destination}}&lt; / td&gt; 
&lt; td&gt; {{$ user-&gt; created_date}}&lt; / td&gt; 
&lt; / tr&gt; \  n @endforeach 
 
&lt; / table&gt; 
 {{$ users-&gt; links()}} 
 
&lt; div class =“modal fade”id =“myModal”role =“dialog”&gt  ; 
&lt; div class =“modal-dialog”&gt; 
 
&lt;! - 模态内容 - &gt; 
&lt; div class =“modal-content”&gt; 
&lt; div c  lass =“modal-header”&gt; 
&lt; button type =“button”class =“close”data-dismiss =“modal”&gt;&amp; times;&lt; / button&gt; 
&lt; h4 class =“  modal-title“&gt;模态标题{{$ user-&gt; p_id}}&lt; / h4&gt; 
&lt; / div&gt; 
&lt; div class =”modal-body“&gt; 
&lt; p&gt; 模态中的一些文本。&lt; / p&gt; 
&lt; / div&gt; 
&lt; div class =“modal-footer”&gt; 
&lt; button type =“button”class =“btn btn-default”  data-dismiss =“modal”&gt;关闭&lt; / button&gt; 
&lt; / div&gt; 
&lt; / div&gt; 
 
&lt; / div&gt; 
   
 
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongyang0005 2016-10-03 08:27
    已采纳

    Use jquery ajax request and get user data to set modal

     $(document).on('click', '.viewPopLink', function() {    
        var user_id = $(this).data('id');
        $.ajax({
          url: 'user/get-details',
          type: 'GET',
          data: 'id='+user_id,
          dataType: 'JSON',
          success: function(data, textStatus, jqXHR){
            var name = data.name;
            $('.modal-title').html('<span>Modal Header ' + name + '</span>');   
            $('#myModal').modal('show');
          },
          error: function(jqXHR, textStatus, errorThrown){
    
          },
        });    
      });
    

    Controller method

      //Get user data
      public function getDetails(Request $request)
      {
        $request_data = $request->all();
        $user_id = $request_data['id'];
        $user_data = User::where('id', $user_id)->first();
        return response()->json($user_data);
      }
    
    已采纳该答案
    打赏 评论
  • dongpao9165 2016-10-03 09:00

    You can do it the way @Komal suggested, but I would not do another AJAX request since you already have all the data you need for the modal in your current view. This saves you also from writing another controller.

    Add the data you need into the <a> element and use it to fill in the data into the modal popup by adding a simple 'on load' method for the modal.

    Here is the code.

    <td>
       <a href="#" class="viewPopLink" role="button" 
          data-id="{{ $user->p_id }}" data-name="{{ $user->p_name }}" data-age="{{ $user->p_age }}" 
          data-toggle="modal" data-target="#myModal">{{ $user->p_name }}<a>
    </td>
    

    Add this into the modal body:

    <p>
      <span>ID</span><span id="modal_p_id"></span>
      <span>Name</span><span id="modal_p_name></span>
      <span>Age</span><span id="modal_p_age"></span>
    </p>
    

    Add this script into your view:

    <script>
        /* populate the modal popup when it's launched, with the data provided by the launching button ....  */
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var id       = button.data('id');    // Extract info from data-* attributes
            var age      = button.data('age');
            var name     = button.data('name');
            // Update the modal's content
            var modal = $(this);
            modal.find('.modal-title').text('Information for Passenger ' + name);
            modal.find('#modal_p_id').text(id);
            modal.find('#modal_p_name').text(filename);
            modal.find('#modal_p_age').text(age);
        });
    </script>
    
    打赏 评论

相关推荐 更多相似问题