JQuery Mobile Linked Listview无法正常工作?

时间:2017-11-09 15:05:33

标签: jquery-mobile

所以,我正在使用JQuery Mobile制作一个移动电子商务应用程序,我遇到了以下问题。

登录后,应用程序会将用户带到商店区域,该区域包含填充了JSON数据的链接列表视图。现在,当商店页面首次初始化时,链接不起作用,但是当我刷新页面时,它们工作得很好。有谁知道我为什么会这样做?。

注意:我正在使用多页模板,从#store页面导航到#product页面。

这里是我正在使用的javascript:

$(document).on("pagebeforecreate","#store", function() {
    getProducts('',
      function(data){
          let products = data.products;
          storeProducts(products);
          $(".product-list").html('');
          $.each(products, function(i, item){
            $(".product-list").append(`
              <li>
                <a href="#product" data-index="${item.prod_id}">
                  <img src="${item.picture}" alt="">
                  <h2>${item.prod_name}</h2>
                  <p>${item.prod_desc}</p>
                  <small>Price: <strong>€${item.unit_price}</strong></small>
                </a>
              </li>
              `).listview("refresh");
          });

        },
        function(e){
          console.log(e);
        },
        function(data){
          console.log('always');
      });
});

function getProducts(param, success, error, always){
  $.ajax({
    type:'GET',
    url:`./ajax/products-ajax.php?${param}`,
    dataType: 'json',
    async:true
  }).done(function(data){
    success(data);
  }).fail(function(e){
    error(e);
  }).always(function(data){
    always('always');
  });
}

提前致谢。

更新:

嗨deblocker, 再次感谢您的回答。控制台日志中没有显示错误。我尝试在浏览器中关闭缓存,但仍然遇到同样的问题。让我看看我能否更好地解释我想要做的事情。

我正在尝试使用JQuery Mobile作为前端,使用PHP作为后端。我有一个index.php,带有链接,可以让你登录或注册。假设您选择了登录选项,这将带您进入login.php,其中有一个表单,当您提交表单时,会向服务器发出ajax请求以进行身份​​验证。假设响应成功,那么您将重定向到store.php,这是listview所在的位置。正如我之前所说的那样,当您登录listview中的链接后登陆store.php时无法正常工作,但是如果您按照预期刷新页面工作。

1 个答案:

答案 0 :(得分:0)

以下是造成问题的原因:

在认证后将用户重定向到store.php时,JQuery Mobile的Ajax导航抓住了我在那里的第一个页面(store.php是多页面,包含#store和#product)并将其注入已经存在的内容之上在DOM中。当然,当我点击我的链接时,由于DOM中没有id =“product”的页面容器,所以这些都没有用。当我刷新页面时,JQuery mobile向服务器发出了一个http请求,这次获得了包含#store和#product页面的完整store.php,因此链接可以正常运行。

我的解决方案:将#store和#product都作为外部页面。通过将它们分开并将它们称为外部页面,我可以通过Ajax导航来避免这个问题。