使用 AJAX 将内容加载到 jQuery UI 对话框

Question

在我的网站上，我有一堆由运行 JSON 数据通过 mustache.js 模板生成的个人资料预览。

这是模板：

<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3">
        <a style="display:block">
            <div class="profile-preview">
                <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
                <h1>{{first_name}} {{last_name}}</h1>
                <h2 class="text-muted">{{major}}</h2>
                <h3 class="text-muted">Cohort {{cohort}}</h3>
            </div>
        </a>
    </div>
</script>

配置文件预览显示来自 JSON 信息的 select 信息，例如 first_name、last_name 等

这是 JSON 数据的格式：

{
"profiles": [
{
  "first_name": "Robert",
  "last_name": "Hosking",
  "img_url": "img/about/hackbert.jpg",
  "major": "Computer Science",
  "cohort": 12,
  "bio": "some info",
  "linkedin": "some url",
  "home_town": "some place",
  "status": "Student"
},
{
  "first_name": "Jimmy",
  "last_name": "Harval",
  "img_url": "img/about/hackbert.jpg",
  "major": "Chemistry",
  "cohort": 13,
  "bio": "some info",
  "linkedin": "some url",
  "home_town": "some place",
  "status": "Student"
}
]
}

但是，当单击其中一个预览时，我想制作一个 jQuery UI 对话框模式弹出窗口，其中包含 JSON 数据中的所有信息（不是只是预览中显示的数据）。

我的问题是如何获得有关单击了哪个配置文件预览的参考，以便我知道在 JSON 文件中的哪个位置查找其余信息。

Answer 1

在您的模板中，为每个 <a> 元素赋予一个 id 属性，该属性等于 JSON 数组中相应配置文件的索引。

然后，你可以给<a>元素一个onclick方法，比如foo(this)，因为this会将元素传递给函数。在您的函数中，您可以使用 $(elem).attr("id") 检索 id，其中 elem 是函数参数。现在您有了配置文件的索引，因此检索配置文件的信息应该很容易。

Answer 2

我对您的 HTML 和模板脚本做了一些细微的改动。

<div class="profile-full"></div>
<div class="preview"></div>
<script id="profile-preview-template" type="text/template"> 
    <div class="col-sm-3">
        <a style="display:block">
            <div class="profile-preview">
                {{#profiles}}
                <img class="img-responsive img-circle center-block" width="200px" src="{{img_url}}" alt="Photo of {{first_name}} {{last_name}}" />
                <h1 id="whichProfile">{{first_name}} {{last_name}}</h1>
                <h2 class="text-muted">{{major}}</h2>
                <h3 class="text-muted">Cohort {{cohort}}</h3>
                {{/profiles}}
            </div>
        </a>
    </div>
</script>

如您所见，2 divs 用于演示目的。

.profile-full 使用 JSON stringify 输出正确对象的内容。得到的输出当然可以改变，这只是为了表明选择了正确的对象。
.preview 生成预览配置文件的位置。

我还添加了开始和结束{{#profiles}} {{/profiles}}

配置文件是从您 json.

开头设置的内容派生的

"profiles": [

我们假设您已正确 linked jQuery 和 mustache.js 库。将 post 中的 json 文件命名为 data.json 您还必须 link 下面的 .js 文件。我把它命名为main.js.

$(function()    {

  $.getJSON('data.json', function(data)  {
    var template = $('#profile-preview-template').html();
      var html = Mustache.to_html(template, data);
    $('.preview').html(html);

    allProfiles = data.profiles;
    lookup = [];
    for(i=0;i<data.profiles.length;i++) {
      lookup.push(data.profiles[i].last_name);
    };

  });//getJSON

  $(document).on('click', '#whichProfile', function() {
    var whichName = $(this).text().substr($(this).text().indexOf(" ") + 1);
    var i = jQuery.inArray(whichName, lookup);
    $('.profile-full').html(JSON.stringify(allProfiles[i]));
  });

});//document ready

那么这里发生了什么？

$(function()    {

  $.getJSON('data.json', function(data)  {
    var template = $('#profile-preview-template').html();
      var html = Mustache.to_html(template, data);
    $('.preview').html(html);

在我们的document.readyshorthand之后，我们获取了data.json的内容，并将其保存在数据中。然后我们将 html 的内容放入带有 class 预览的 div 中，因为我们已经根据模板脚本对其进行了格式化。

    allProfiles = data.profiles;
    lookup = [];
    for(i=0;i<data.profiles.length;i++) {
      lookup.push(data.profiles[i].last_name);
    };

  });//getJSON

接下来我们将创建一个名为 lookup 的数组，它只包含来自 json 的 last_name 数据。这将使获得有关单击了哪个配置文件预览的参考成为可能且快速。如果您只有几个名字，使用姓氏就可以了，但是如果配置文件的数量增加，请使用唯一标识符（这样就不会出现姓氏重叠的情况）。考虑添加一个唯一 ID，或通过电子邮件发送至您的 json.data.

然后关闭你的getJSON.

  $(document).on('click', '#whichProfile', function() {
    var whichName = $(this).text().substr($(this).text().indexOf(" ") + 1);
    var i = jQuery.inArray(whichName, lookup);
    $('.profile-full').html(JSON.stringify(allProfiles[i]));
  });

});//document ready

在此处单击名称将获取我们页面上内容的 .text。我们将把它转换成只有姓氏（去掉 space 之前的所有内容）。然后我们在查找数组中搜索这个姓氏和 return 它的索引。现在我们有了这个索引，我们可以使用它来获取 json 内相对于索引的任何值。在这个例子中，我们只是将相关对象的全部字符串化内容放入我们的配置文件中 div

最后我们关闭 document.ready。

尝试点击一个名字（可以是名字或姓氏）。我们当然可以将相关对象中的任何内容放在其他任何地方。例如：删除行

$('.profile-full').html(JSON.stringify(allProfiles[i]));

并将其替换为

alert(allProfiles[i].first_name + ' ' + allProfiles[i].last_name + 
  ' is studying ' + allProfiles[i].major + ' as their Major');

现在点击一个名字会弹出一个窗口，说明他们的全名和他们正在学习的专业。

使用 AJAX 将内容加载到 jQuery UI 对话框

Use AJAX to load content to a jQuery UI dialog

javascript

ajax

jquery

json

mustache