所以,我正在使用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时无法正常工作,但是如果您按照预期刷新页面工作。
答案 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导航来避免这个问题。