当我将 URL 添加到列表,然后使用 ajax 时,我尝试在某些 iframe 中显示列表的内容,页面会自行重新加载

2024-02-18

我正在构建一个仪表板,它的小工具是一些指向我想要在 iframe 内显示的不同页面的链接。我有一个按钮可以将新小工具添加到仪表板,添加新小工具后,我刷新仪表板。对于前 3 个小工具,应用程序没有任何问题,并且运行完美。但是,当我想添加第四个小工具时,ajax 调用不起作用并且页面开始再次重新加载。重新加载页面后,我可以再次添加一个新的小工具并且它可以工作,但下次它再次停止工作并刷新页面。我不明白问题是什么。顺便说一句,当我删除 iframe 并打印链接本身时,程序运行没有任何问题。这是我的代码:

<h:panelGrid columns="2" >
    <p:outputLabel value="${msg.dashboard_dashboard}" />
    <p:selectOneMenu value="#{dashboardDashletsManager.dashboard}" style="min-width: 200px" converter="#{dashboardConverter}" filter="true" filterMatchMode="contains" >
          <f:selectItems value="#{dashboardDashletsManager.dashboards}" var="item" itemLabel="#{item.description}" itemValue="#{item.value}" />
          <p:ajax update=":form" />
    </p:selectOneMenu>

    <p:outputLabel for="dashlet" value="${msg.dashboard_dashlet}" />
    <p:selectOneMenu id="dashlet"  value="#{dashboardDashletsManager.globalDashletToAdd}" style="min-width: 200px" converter="#{serviceProviderConverter}"  filter="true" filterMatchMode="contains">
          <f:selectItems value="#{dashletsController.globalDashlets}" var="provider" itemLabel="#{provider.description}" itemValue="#{provider}" />
    </p:selectOneMenu>

     <p:commandButton value="${msg.dashboard_add}" icon="ui-icon-plus" ajax="true" update=":form:dashboardPanel" process="dashlet @this"  actionListener="#{dashboardDashletsManager.addToDashboard}" />
</h:panelGrid>

 <p:outputPanel id="dashboardPanel">
        <ui:repeat value="#{dashboardDashletsManager.dashlets}" var="dashlet">
            <object width="400" height="400" type="text/html" data="#{dashlet.restUrl}"></object>
        </ui:repeat>
 </p:outputPanel>

可能是您想要嵌入到第四个小面板中的内容需要花费太多时间来加载的问题。除此之外,在您的示例中,您更新了整个表单(不知道您是否打算这样做),因此 JSF 再次呈现整个表单,并且浏览器还必须恢复前三个小面板加上第四个小面板的内容一。

不管怎样,这个小测试用例对我来说可以很好地使用 Mojarra JSF 2.2.7 和 Primefaces 5:

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:ui="http://java.sun.com/jsf/facelets">

<h:head />
<h:body>

    <h:form>
        <p:commandButton value="Add dashlet"
            action="#{dashboardManager.addDashlet}" update=":dashboardPanel" />
    </h:form>

    <p:outputPanel id="dashboardPanel">
        <ui:repeat value="#{dashboardManager.dashlets}" var="dashlet">
            <object width="400" height="400" type="text/html"
                data="#{dashlet.restUrl}"></object>
        </ui:repeat>
    </p:outputPanel>
</h:body>
</html>
@ManagedBean
@ViewScoped
public class DashboardManager {

    private static final String url = "http://www.w3schools.com";

    public class Dashlet {
        private String restUrl;

        public Dashlet(String url) {
            restUrl = url;
        }

        public String getRestUrl() {
            return restUrl;
        }

    }

    public DashboardManager() {
        dashlets.add(new Dashlet(url));
        dashlets.add(new Dashlet(url));
    }

    public List<Dashlet> dashlets = new ArrayList<Dashlet>();

    public List<Dashlet> getDashlets() {
        return dashlets;
    }

    public void addDashlet() {
        dashlets.add(new Dashlet(url));
    }

}

这里可以看到渲染一组动态是没有问题的object标签到您的板上。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

当我将 URL 添加到列表,然后使用 ajax 时,我尝试在某些 iframe 中显示列表的内容,页面会自行重新加载 的相关文章

  • 如何按多个项目搜索/过滤列表?

    我正在寻找一个示例 或者可能是一个关于通过在文本框中输入的多个项目来过滤 搜索项目列表的方法的一点提示 假设我有一个列表 ul li Coffee li li Tea li li Milk li li Water li li Juice l
  • 从 php 到 JavaScript 的数组

    我正在尝试使用 json 将数组列表从 php 传输到 javascript 但它不起作用 JS ajax url getProfilePhotos php type post post or get method data if you
  • 如何使用 jQuery Ajax 将 PHP 数组值传递到另一个文件?

    这是我的代码
  • 在一个项目中使用多个 Javascript 框架?

    在一个项目中使用多个框架是好是坏 还是不好 因为它会变得混乱 一团糟 并且加载时间可能会更长 100 K 真的很重要吗 或者你应该坚持使用一个 通常最好选择一件事并坚持下去 原因有很多 更少的依赖 降低复杂性 更容易维护 更快的加载时间 不
  • jQuery Find() 和 XML 在 IE 中不起作用

    我正在尝试使用 jQuery 来解析内存中的 XML 文档 除了 IE 之外 这在所有东西上都很有效 令人震惊 一些谷歌搜索显示 问题很可能是由于 IE 将我的文档视为 HTML 而不是 XML MIME 类型 有没有办法让我的 jQuer
  • Ajax 没有将我重定向到下一页

    我正在尝试将单击的图像的 ID 传递到下一页 当我开发代码时 它没有将我重定向到下一页 当我单击 F12 并检查网络中的 POST 时 它显示变量已正确传递到下一页 如附图所示 但它没有将我重定向到下一页 所以现在我知道变量在下一页中正确传
  • 输入类型=图像 - onclick(),将触发其事件,但在 jquery 中的函数上表现不佳

    我认为这可能是两篇文章 2个问题 所以如果你对此发表评论 我会将它们分开 主要问题实际上是 我怎样才能为按钮设置图像背景 简单且正确 我想现在我可以确定这些事实了 因为我在将图像设置为按钮背景时遇到了 小 问题 我想 好吧 如果很难设置的话
  • 如何保留数组的重复项

    在 Javascript 中 我试图只将重复项保留在数组中 例如我的初始数组是 1 1 2 3 3 3 3 4 5 5 结果应该是 1 3 5 我尝试过使用 indexOf 和 inArray 但无法弄清楚 我知道如何删除重复项 但保留它们
  • 在 HTML5 中创建可拖动和可缩放的网格

    与其他 HTML5 不同如何创建网格问题 我想知道如何制作一个可拖动且可扩展的 绘制网格非常简单 var c document getElementById canvas var ctx c getContext 2d var width
  • 无法将数据加载到 mvc 4 中的 jTable 中

    好的 我第一次尝试 jTable 我可以加载表 但这对我没有什么好处 因为它不会加载我的任何数据 当我调试程序时 我想要的表中的所有行都存储在我的列表中 因此我很困惑为什么当我运行应用程序时会弹出一个对话框 显示 与服务器通信时发生错误 H
  • 动态速度计 javascript 或 jquery 插件

    我希望有动态ajax插件在页面上显示速度计 一个想法是我设置一个背景并旋转针 有人知道相关插件吗 这里有一些供您参考 http bernii github com gauge js http bernii github com gauge
  • Jquery从下拉列表中获取所选值的id

    我有一个下拉列表 可以从数据库获取值 如下所示 get getJobs function jobs seljobs jobs var i 0 jobs forEach function n alert job id n id 32 67 4
  • 检查 touchend 是否在拖动后出现

    我有一些代码可以更改表的类 在手机上 有时表格对于屏幕来说太宽 用户将拖动 滚动来查看内容 但是 当他们触摸并拖动表格时 每次拖动都会触发 touchend 如何测试触摸端是否是触摸拖动的结果 我尝试跟踪dragstart和dragend
  • jquery window.open 在 ajax 成功中被阻止

    尝试在我的 ajax 成功调用中打开一个新的浏览器窗口 但是 它被阻止为弹出窗口 我做了一些搜索 发现用户事件需要绑定到 window open 才能避免这种情况发生 我还找到了这个解决方案 您可以在 ajax 之前打开一个空白窗口 然后在
  • 如果链接包含特定文本,jQuery 将类添加到 href

    我的网站上的列表中有一些动态填充的链接 这些链接链接到文件 是否可以使用 jQuery 查看文件名是否以 pdf 结尾 并在 href 或类似的链接文本以 mp3 结尾时添加一个类 例如 我的列表中有以下链接 文件1 pdf 歌曲1 mp3
  • 如何将送货地址复制到帐单地址

    我想知道是否可以将送货地址复制到帐单地址 当用户单击与送货地址相同的复选框时 送货地址值将被复制到账单输入字段 我完成了大部分部分 但我不确定如何将选择菜单 状态 值复制到帐单地址 我真的很感谢任何帮助 My code document r
  • 淡出和循环一组 div 的最佳方式

    假设我有以下 div div class a You are funny div div class b You are smart div div class c You are cool div 最好的展示方式是什么div a持续 5
  • 如何通过jquery更改元素的类名

    div class bestAnswerControl div class IsBestAnswer div div 我想补充一下 bestanswer some attribute 我想更换class IsBestAnswer div 到
  • Jquery - 通过在字符串中构建 id 的 id 获取元素

    我在使用 jquery 元素时遇到问题 我正在 var 中构造名称 例如 var myId myGotId myId attr title changed myId 返回空 我想通过 id 获取我的元素 但动态构建我的 Id 连接字符串 编
  • 如何在 JSF 中实现登录过滤器?

    即使用户知道某些页面的网址 我也想阻止某些页面的访问 例如 localhost 8080 user home xhtml 需要先登录 如果没有登录则重定向到 index xhtml 在 JSF 中如何做到这一点 我在谷歌上看到需要一个过滤器

随机推荐