为什么$(this).jqmData(" chefid");未定义?

时间:2015-01-13 09:57:28

标签: jquery ajax json cordova

为什么$(this).jqmData(“chefid”);是不确定的?

我正在创建动态列表。它将包含厨师列表及其ID,名称和项目。当我们点击任何列表时,它将根据 chefid 从数据库中获取厨师详细信息( chefPlaceOrder )。 chefid在每个列表中作为参数传递为 ,但我得到 $(this).jqmData(“chefid”);如未定义,为什么?

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>

<script>
    $(document).ready(function(){
        /* $(document).on("pagecreate", "#foodOption", function(){ */       
            $("#listOfFoodOptions").on("click", "li", function(){           
                var Id = $(this).jqmData("chefid");
                $("#todaySpecial").text("Details for chef with ID = " + Id);
                $(":mobile-pagecontainer").pagecontainer("change", "#chefPlaceOrder", {transition : "slide"});
            });
            $("#btnReg").on("click", function(){      
                var output = '';
                $("#listOfFoodOptions").empty();
                var uName = document.getElementById('userName').value;        
                var mailId = document.getElementById('eMail').value;            
                var mobNum = document.getElementById('mobNumber').value;        
                var distance=document.getElementById('distance_id').value;          
                $.ajax({
                    url:"http://192.168.1.11/foodybuddy/webservices/getBuddy.php", 
                    type:"GET", 
                    dataType:"json", 
                    data:{type:"register",Foody_Name:uName, Email:mailId, Mob_Num:mobNum, Distance:distance}, 
                    //type: should be same in server code, otherwise code will not run
                    ContentType:"application/json", 
                    success: function(response){ 
                            console.log(response) 
                                $.each(response, function(index,value){
                                    output+='<li data-chefid="'+value.Chef.id+'"><a href="#" style="text-decoration:none;"> <img alt="chef" src="http://lorempixel.com/20/20/food/1/" width="20px" height="20px" >Chef'+ value.Chef.Name +' is cooking'+ value.Chef.Item +'</a></li>';
                                }); 
                            $("#listOfFoodOptions").append(output).listview('refresh');                                                  
                        }, 
                        error: function(err){ 
                        alert(JSON.stringify(err)); 
                    } 
                })
            }); 
        /* }); */
    });
    </script>

chefPlaceOrde页面

<div data-role="page" id="chefPlaceOrder">
    <div data-role="header">
        <h1>Chef Details</h1> 
    </div>  
    <div data-role="main" class="ui-content">
        <p id="todaySpecial"></p>
        <a href="#foodOption" class="ui-btn">Back to list</a>
    </div>    
</div> 

foodOption page

<div data-role="page" id="foodOption">
    <div style="width: 100%; margin-top:21%; margin-left: 1%; color: black;">
                    <ul data-role="listview" id="listOfFoodOptions" data-inset="true">
                        <!-- Dynamic list will create here. -->
                    </ul>
    </div>
</div>

1 个答案:

答案 0 :(得分:0)

这是因为您没有添加代码中所需的script文件。或者您甚至可能多次添加脚本文件,这可能导致conflicts。我有把你的代码的一小部分变成了一个小提琴。试着检查出来。检查你需要的资源是否正确加载配对.. :)

检查是否已将jquery.mobile-1.2.0.min.js文件与项目一起加载

小提琴here