Question

我有一个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>

如果有人可以帮助我，我真的很感激。

Answer 1

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

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

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

Answer 2

我的猜测是，您需要向index2.html的服务器发出Ajax请求，因为它不再与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 Ajax

移动新html页面的渲染元素

2 个答案: