Ajax请求与php中的引导模态 [英] Ajax request with bootstrap modal in php

问题描述

我试图基于某些值以引导方式显示一些信息.

I am trying to display some information in a bootstrap modal based on some values.

这是工作流程

1.循环显示带有标题的超链接.

1.Display Hyperlinks in a loop with a title.

2.单击每个超链接时，将获取id值.

2.When click on each hyperlink grabs the id value.

3.使用这些id作为参数进行ajax请求，并在bootstrap模型中显示响应.

3.Make ajax request with these id as parameter and show the response in bootstrap model.

1. 显示超链接

//display the hyperlinks in a loop
    <?php $i=0;foreach($services as $service) {?>
      <a href="#myModal" data-toggle="modal"  data-id="<?php echo $service->services_id;  ?>" class="btn-block"><?php echo $service->services_title; ?></a>
    <?php $i++;}?>

2. 获取id值并进行ajaxrequest

 $('#myModal').on('show.bs.modal',function(){
            var id=$(this).data('id');
            //undefined
            alert(id);
            //shows loading text
            //it dosent work
    $('.data-modal').html('loading');
    $.ajax({
        type: 'POST',
        url: '../Functions/form_process.php?action=getdetailsbyid',
        data:{id: id},
        success: function(data) {
          $('.data-modal').html(data);
        },
        error:function(err){
            alert("error"+JSON.stringify(err));
        }
         });
        });

问题是无法获取ID值，alert(id)返回undefined，也未显示$('.data-modal').html('loading')

The problem is cant get the id value,alert(id) returns undefined also $('.data-modal').html('loading') is not shown

模式

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">THIS IS A SAMPLE POPUP 2</h4>
            </div>
            <div class="modal-body">

            <strong>services.</strong>        
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div> 
</div>

推荐答案

假设您的foreach输出如下所示的链接:

Assuming your foreach outputs links like this:

 <a href="#myModal" data-toggle="modal" data-id="123" class="btn-block">title</a>
 <a href="#myModal" data-toggle="modal" data-id="1234567" class="btn-block">another title</a>

然后可以调用click方法而不是show.bs.modal来使用$(this).

You could then invoke the click method instead of show.bs.modal in order to use $(this).

因此您的代码将更改为:

So your code will change to:

 $('.btn-block').on('click',function(){
    var id = $(this).data('id');
    alert(id);
    $('.modal-body').html('loading');

       $.ajax({
        type: 'POST',
        url: '../Functions/form_process.php?action=getdetailsbyid',
        data:{id: id},
        success: function(data) {
          $('.modal-body').html(data);
        },
        error:function(err){
          alert("error"+JSON.stringify(err));
        }
    });
 });

这里是一个示例

Here is an Example

否则，您将需要在所有输出的链接上使用唯一的ID(可以使用foreach中的计数器来完成此操作)

Otherwise you will need to use a unique id on all your outputted links (which you can do using a counter in your foreach)

这篇关于Ajax请求与php中的引导模态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！