동적으로 JQM 팝업 생성

Question

내 변수의 내용을 기반으로 JQM PopUp을 표시하려고합니다.

여기에이 변수가 있습니다.

924-1922, 928-3074, 928-8363

은 그 때 나는 .split 그래서 난 세 개의 전화 번호를 얻을 수 있습니다 수행합니다.

secNumber = res.rows.item(i).secondary_num.split(", ");

그래서 내 변수 secNumber 이제 세 개의 숫자의 배열이 있습니다 전화 번호가 많은 항목이 있기 때문에 지금 여기 924-1922,928-3074,928-8363

(나는 이것에 대한 루프를 표시하는 내 코드를 사용하고있다) :

html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> </a>'; 

onclick 마지막 <span>이 작동합니다. 그러나 전화 걸기에 첫 번째 번호 만 넣습니다. 나는 후 온 클릭 JQM 웹 사이트에서이 코드를 사용하여 팝업을 보여 내 onclick에 달성하고자하는 어떤

<a href="#popupMenu" data-rel="popup" data-role="button" data-inline="true" data-transition="slideup" data-icon="gear" data-theme="e">Actions...</a> 
<div data-role="popup" id="popupMenu" data-theme="d"> 
    <ul data-role="listview" data-inset="true" style="min-width:210px;" data-theme="d"> 
     <li data-role="divider" data-theme="e">Choose an action</li> 
     <li><a href="#">View details</a></li> 
     <li><a href="#">Edit</a></li> 
     <li><a href="#">Disable</a></li> 
     <li><a href="#">Delete</a></li> 
    </ul> 
</div> 

내 배열 secNumber의 내용이 될 것이다 팝업의 목록보기 내 <span> 내용을 클릭

,리스트 뷰의 각 요소에있는 onclick에 window.open을 호출하여 전화 걸기에 액세스합니다.

수정 이것은 내 코드입니다.

article.emergency = function() { 


var secNumber; 
var telnum; 

var html = ''; 
appDB.transaction(function(tx) { 
    tx.executeSql("SELECT * FROM emergency", [], function(tx, res) { 
      if (res.rows.length > 0) { 
       for (var i = 0; i < res.rows.length; i++) { 

        function openPopup(index) { 
         //reset its content 
         $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>'); 

         //loop on secondary_num items 
         $.each(res.rows.item(index).secondary_num.split(", "), function(k, v) { 
         $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + v + '\', \'_system\');">' + v + '</a></li>'); 
         }); 

         //refresh listView 
         $('#popupMenu').find('ul').listview("refresh"); 
         //open popup 
         $('#popupMenu').popup("open", {"transition":"slideup"}); 
       } 


        var secondary = (res.rows.item(i).secondary_num != 'null') ? 'Secondary Number: ' + res.rows.item(i).secondary_num : ''; 
        secNumber = res.rows.item(i).secondary_num.split(", "); 
        console.log(secNumber); 
        /*secondary = secondary.replace(/-/g,""); 
        console.log("Secondary number string : "+secondary);*/ 
        console.log(res.rows.item(i).tel_num); 
        telnum = res.rows.item(i).tel_num.split(" to"); 
        console.log(telnum); 
        html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> </a>'; 
        //html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+secNumber+'\', \'_system\');"> ' + secondary +' </span> </a>'; 
       } 

       $('.list-display').html(html); 
      } 
    }); 

}, article.onErr, article.onSuccess); 
} 

누군가가 나를 도울 수 있기를 바랍니다. 감사.

Answer 1

item 배열에 여러 요소가 있고 고유 한 popup 컨테이너를 사용하려는 경우 해당 내용을 동적으로 생성해야합니다 (listView 위젯 새로 고침). http://jsfiddle.net/phtzwxb6/5/

업데이트 고정 :

보조 범위는 여기

function openPopup(index) { 
    //reset its content 
    $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>'); 

    //loop on secondary_num items 
    var secNumber = item[index].secondary_num.split(", "); 
    for (var i = 0; i < secNumber.length; i++) { 
     $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + secNumber[i] + '\', \'_system\');">' + secNumber[i] + '</a></li>'); 
    } 

    //refresh listView 
    $('#popupMenu').find('ul').listview("refresh"); 
    //open popup 
    $('#popupMenu').popup("open", {"transition":"slideup"}); 
} 

당신이 단순화 된 구조와 작업 예를 미세 수

<span onclick="window.openPopup(' + index + ');"> ' + secondary +' </span> 

하고 openPopup 기능과 유사합니다 가능한 해결책을 가진 귀하의 코드 :

// declared outside 
function openPopup(index) { 
    //reset its content 
    $('#popupMenu').find('ul').html('<li data-role="divider" data-theme="e">Choose an action</li>'); 

    //loop on secondary_num items 
    var secNumber = item[index].secondary_num.split(", "); 
    for (var i = 0; i < secNumber.length; i++) { 
     $('#popupMenu').find('ul').append('<li><a href="#" onclick="window.open(\'tel:02' + secNumber[i] + '\', \'_system\');">' + secNumber[i] + '</a></li>'); 
    } 

    //refresh listView 
    $('#popupMenu').find('ul').listview("refresh"); 
    //open popup 
    $('#popupMenu').popup("open", {"transition":"slideup"}); 
} 

//your enclosure... 

article.emergency = function() { 
    var secNumber; 
    var telnum; 

    var html = ''; 
    appDB.transaction(function(tx) { 
      tx.executeSql("SELECT * FROM emergency", [], function(tx, res) { 
        if (res.rows.length > 0) { 
         for (var i = 0; i < res.rows.length; i++) { 

          var secondary = (res.rows.item(i).secondary_num != 'null') ? 'Secondary Number: ' + res.rows.item(i).secondary_num : ''; 
          secNumber = res.rows.item(i).secondary_num.split(", "); 

          telnum = res.rows.item(i).tel_num.split(" to"); 
          html += '<a href="#" class="category-btn" title="All" rel="external" >'+ res.rows.item(i).name +' <br> <span style="font-size: 15px;color: #778084;" onclick="window.open(\'tel:02'+telnum+'\', \'_system\');"> Tel. No.: ' + res.rows.item(i).tel_num + ' </span> <br> <span style="font-size: 15px;color: #778084;" onclick="window.openPopup(' + i + ');"> ' + secondary +' </span> </a>'; 

         } 

         $('.list-display').html(html); 
        } 
      }); 

    }, article.onErr, article.onSuccess); 
}