Question

我想为按钮分配一个模式，该按钮向客户端显示警告。警告是关于：确定删除它。我的问题是关于使用ajax或其他方式将id发送到模态，而我是使用ajax或javascript的新手，所以我的代码不完整

这是我的按钮：

    <button title="delete" data-modal="md-just-me" data-id=<?= $row->id_post; ?> class="delete-post"></button>

这是我的脚本（不完整）：

<script>
$(document).ready(function() {
	$('.delete-post').click(function() {
		var btn = $(this);
		var id = btn.data('id');
		$.ajax({
    type:"GET",
    url:"",
    data : {
		id : id
					},
    success: function(msg){
        alert( 'ok' ) ;
    },
    error:function(){
        alert("failure");
    }
});
		});
	});
});
</script>

我希望按钮和模式出现在同一页面中

这是我的模特：

<div class="md-modal md-just-me" id="md-just-me">
			<?php $id = $_GET['id'];?>
			<div class="md-content">
				<h2>warning</h2>
				
				
			<p>do you want continue? </p>
					<p>
					<button class="btn btn-danger md-close">close</button>
					<a href="<?php base_url(post/delete).$id ?>">yes im suer</button>
					</p>
				</div>
			</div>
		</div>

Answer 1

好的，我整理了一个示例here。基本上，我会获取调用模式的项目的ID，并在模式中设置一个属性，以便可以从确认按钮进行访问：

       <dependency>
        <groupId>vc.inreach.aws</groupId>
        <artifactId>aws-signing-request-interceptor</artifactId>
        <version>0.0.22</version>
       </dependency>

Answer 2

有一个名为SweetAlert的出色库，可以为您简化此过程。首先，您需要添加库。

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

现在，如果要确认消息，只需添加以下代码即可。

$('.delete-post').click(function() {
    swal({
        title: 'Warning!',
        text: "Do you want continue?",
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        cancelButtonText:"No",
        confirmButtonText: 'Yes, I am sure!'
    }).then((result) => {
        // If true, then call your `ajax` here.
    }
}

Answer 3

如果您只想将ID发送给模态，则可以像我使用引导程序一样使用此代码

这是我的每一行中的按钮：

<a href="#" data-target="#dell-one-modal"
data-toggle="modal"
class="btn btn-sm btn-outline-danger p-1 identifyingdell-one"
data-idman="<?php echo htmlentities($rows['terms_id']); ?>">
<i class="icofont-ui-delete" data-toggle="tooltip"
data-placement="right" title="delete"></i></a>

这是我的引导方式：


    <div class="modal fade" id="dell-one-modal" tabindex="-1" role="dialog"
aria-labelledby="dell-one-aria" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title text-danger schms-font-size-14 font-weight-bold" id="dell-one-aria">تایید
نهایی عملیات حذف دانش آموز</h5>
<button type="button" class="close ml-1"
data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<form method="get" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<div class="modal-body text-secondary schms-font-size-12 text-justify">
برای <span class="text-danger">حذف</span> دانش آموز روی تایید کلیک کنید.بعد از <span class="text-danger">حذف</span> هیچ راهی برای <span class="text-success">بازیابی</span> اطلاعات وجود ندارد.
<hr>
<span class="text-muted schms-font-size-10"><span class="text-warning">راهنمایی</span> : باید دانش آموز متناظر با کلید <i class="icofont-ui-delete text-danger"></i> را انتخاب کنید.</span>
<input type="hidden" name="hiddellval" id="hiddenValue" value=""/>
</div>
<div class="modal-footer mx-auto">
<button type="submit" name="dell-one-submit" class="btn btn-sm btn-outline-danger">تایید
</button>
<button type="button" class="btn btn-sm btn-outline-info mx-2" data-dismiss="modal">انصراف
</button>
</div>
</form>
</div>
</div>
</div>

我将表单放在模式中，您可以将表单放在模式中

此JavaScript代码将id发送到modal，将id放入隐藏的输入中


       <script type="text/javascript">
    $(function () {
        $(".identifyingdell-one").click(function () {
            var my_id_value = $(this).data('idman');
            $(".modal-body #hiddenValue").val(my_id_value);
        })
    });
    </script>

使用php或ajax将ID发送到模态

3 个答案: