代码之家 › 专栏 › 技术社区 › Ken Ingram

如何重构php href链接以使用modal或popover进行响应

twitter-bootstrap html javascript

Ken Ingram · 技术社区 · 7 年前

我正在改写一些在表格中注脚很重的文字

<a id="par170_fn1" href="get_footnote.php?id=118">[1]</a>

脚注按表格编排。

我对使用模式对话框或弹出窗口执行这些重构的技术流程有点困惑。看起来Ajax本身就是这个过程的一部分。

我有点坚持匹配动态数据的概念。

这个例子来自 Bootstrap Docs 一般来说是有意义的,但我缺少一个可以在调用中解释我检索到的数据的桥接器。另外,我不想用按钮替换链接。

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

我会感谢一些关于如何从根本上考虑这一点的建议。

2 回复 | 直到 7 年前

fubar 7 年前

如果为每个脚注创建如下超链接:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit <sub><a class="footnote" href="/footnote.php?id=123">[123]</a></sub>.</p>

然后,您可以使用jquery绑定一个click事件,使用ajax获取HTML内容,将其注入引导模式并启动该模式。

$('.footnote').on('click', function (event) {
    event.preventDefault();
    var $modal = $('#footnote-modal');

    $.get(event.target.href, function (response) {
        $modal.find('.modal-body').html(response);
        $modal.modal();
    });
});

下面是一个例子,我用 $.get 用一个 Promise 以说明代码如何工作。

// For example purposes only
var html = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto voluptatem, natus temporibus quasi labore repellat laboriosam culpa.</p>';

$('.footnote').on('click', function (event) {
  event.preventDefault();
  var $modal = $('#footnote-modal');
  
  // For example purposes only
  Promise.resolve(html)
    .then(function (response) {
       $modal.find('.modal-body').html(response);
       $modal.modal();
    });
  
  // Actual code to call your PHP script
  // $.get(event.target.href, function (response) {
  //   $modal.find('.modal-body').html(response);
  //   $modal.modal();
  // });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit <sub><a class="footnote" href="/footnote.php?id=123">[123]</a></sub>.</p>
  <p>Dolorum ducimus quos officia blanditiis expedita <sub><a class="footnote" href="/footnote.php?id=123">[456]</a></sub>.</p>
  
  <!-- Modal -->
  <div class="modal fade" id="footnote-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="exampleModalLongTitle">Footnote</h3>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body"></div>
      </div>
    </div>
  </div>
  
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

任何问题,只要问。

Ken Ingram 7 年前

所以,为了解决这个问题,我不得不回去研究一些基本的逻辑。

我使用echo语句在PHP中创建了HTML。当我学习PHP时,它就是我最初写它的方式。是时候进行重构了。使用HTML,根据需要嵌入少量的PHP和代码标记。
我使用的是较旧版本的引导程序,它允许BS4中不推荐使用的功能。直到之前工作的代码在BS4中失败,我才意识到功能是有效的。
使用最新的BS让我意识到需要jquery-ajax。我想留在VamillaJS,但我意识到我比我想象的更了解JS,然后能够使用jquery文档来获取从php get获取的远程数据的句柄。
我重构了我的PHP脚本以返回JSON,并在服务器端进行数据争用,然后简单地将所需数据传递给我的JS脚本以填充模式。
我设置了模态划分,这实际上比我抱怨的要简单得多。
我重构了数据库中的脚注标记。在我的数据库工具中使用替换功能的简单任务。

下面是我解决问题的方法:

将标记重构为此格式:

<sup><a data-toggle="modal" data-target="#footnote-modal" id="par180_fn10" href="footnote.php?id=127">[10]</a></sup>

设置模式HTML格式:

<!-- Modal -->
<div class="modal fade" id="footnote-modal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog modal-lg" role="document">
		<!-- Modal content -->
		<div class="modal-content">
			<!-- Modal header -->
			<div class="modal-header">
				<h4 class="modal-title" id="footnoteTitle"></h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
			</div>
			<!-- Modal Body -->
			<div class="modal-body" id="footnote_detail"></div>
						<!-- Modal Footer -->
			<div class="modal-footer">
				<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
			</div>
		</div>
	</div>
</div>

启用javascript

$(document).ready(function(){
	$('#footnote-modal').on('show.bs.modal', function(dataString){
		//console.dir(dataString.relatedTarget);
		var location = dataString.relatedTarget.attributes[3].value;
		console.log(location);
		$.ajax({
			method: "GET",
			url: location,
			dataType: "json",
			success: function(res){
				//console.dir(res);
		       	$('#footnoteTitle').html(res.data[0] + res.data[1] + 
		       		res.data[2] + res.data[3] + ", Footnote " + res.footnote_no);
		       	$('#footnote_detail').html(res.footnote_text);
			}
		})
		.fail(function( xhr, status, errorThrown ) {
    		alert( "Sorry, there was a problem!" );
    		console.log( "Error: " + errorThrown );
    		console.log( "Status: " + status );
    		console.dir( xhr );
  		});
	});
});