1

我有一个 Javascript 函数，我在用户可以单击列表元素的页面上呈现，它会将他们带到一个新页面，显示有关该列表元素的更多信息。原始页面是#index，第二个页面是#index2，它是使用一个多页HTML 页面编码的。但是我希望我可以将 index2 页面移动到它自己的 html 文件 - index2.html 但我不确定如何在函数中引用新的 index.html 文件，以便元素可以移动到新文件。

我的代码如下：

    <script type="text/javascript">
    $(document).on('pagebeforeshow', '#index', function(){
        $("#list").empty();
        var url="http://localhost/tmp/json4.php";
        $.getJSON(url,function(json){
            //loop through deals
            $.each(json.deals,function(i,dat){
                $("#list").append("<li><a id='"+dat.dealid+"' data-restaurantid=" + dat.restaurantid + " data-image=" + dat.image + "><h1>"+dat.name+"</h1><h6>"+dat.dname+"</h6><h5>"+dat.description+"</h5></a></li>");
                $(document).on('click', '#'+dat.dealid, function(event){  
                    if(event.handled !== true) 
                    {
                        dealObject.dealID = $(this).attr('id'); 
                        dealObject.restaurantid = $(this).attr('data-restaurantid');
                        dealObject.shortName = $(this).find('h1').html(); 
                        dealObject.image = $(this).attr('data-image');
                        dealObject.dealName = $(this).find('h6').html();
                        dealObject.description = $(this).find('h5').html(); 

                        $.mobile.changePage( "#index2", { transition: "slide"} );
                        event.handled = true;
                    }
                });            
            });
            $("#list").listview('refresh');
        });
    });

    $(document).on('pagebeforeshow', '#index2', function(){       
        $('#index2 [data-role="content"]').find('#deal-img').attr('src',dealObject.dealObject);
        $('#index2 [data-role="content"]').find('#title').html(dealObject.name);
                $('#index2 [data-role="content"]').find('input#desc').val(dealObject.description);
                $('#index2 [data-role="content"]').find('input#tname').val(dealObject.dealName);
                $('#index2 [data-role="content"]').find('input#dealid').val(dealObject.dealID);


    });

    var dealObject = {
        dealID : null,
        restaurantid : null,
        shortName : null,
        image : null,
        dealName : null,
        description: null
    }    
</script>

如果有人可以帮助我，我将不胜感激。

4

2 回答 2

1

您需要将页面分成两个 php 文件，一个称为 view.php，第二个称为 offer.php。

创建 2 个附加目录，一个名为 amend，第二个名为 del。它们都将有一个 js 文件，其中包含与修改或删除功能相关的逻辑以及一个 php 文件，该文件将作为所需功能的 php/ajax 代理服务器。

还要注意您的 2 个 ajax 调用必须查看正确的位置，并且 ajax 响应也必须声明女巫操作已经完成。

于 2013-02-20T14:38:29.590 回答
0

我的猜测是您需要向服务器发出 Ajax 请求以获取 index2.html，因为它不再与 index1.html 位于同一页面上。这是一个例子

$.ajax({
   url : '/pages/index2.html',
   type: 'get',
   success: function (html) {
     // here , you can use jquery to manipulate
     // the HTML in index2. Maybe pop up a lightbox, etc..
   }
});

我不确定您要做什么，但 Ajax 是一种在幕后请求新 HTML / 数据的相当标准的方式。使用 JQuery ajax 可以做很多事情。这是文档

jQuery 阿贾克斯

于 2013-02-19T20:59:03.567 回答