Jqueryが動的に追加されたすべてのラジオボタンを表示していません

ajaxコールから配列を受け取り、配列の要素を使用して一連のラジオボックスを作成します。 jqmマークアップを適用するようにリフレッシュしようとするまでうまく動作します。私は予想される4つのうち2つ、または3つのうちの1つを期待しています。私は問題を説明するためにフィドルを作成しましたが、フィドルはマークアップをまったく適用していません。ちょうど正しい数のボックスを表示します。フィドルは：https://jsfiddle.net/wlukasz/9hno6pyh/7/です。ここに私のhtmlです：Jqueryが動的に追加されたすべてのラジオボタンを表示していません

<table class="std-table"> 
    <tr> 
    <td><div id="areas"></div></td> 
    </tr> 
</table>

とJavaScript：

$(document).on('pagebeforeshow', '#property-details-page', function(){ 

all_areas = new Array(); 
var Q001Data = "sql=Q001&dbcall=sql_get_results_array&memid="+<?php echo $member_id?>+"&propid="+<?php echo $property_id?>; 
$.ajax({ // ### AJAX to get ALL AREAS on page load ### 
    url:"pl_process_ajax_call_property_features.php", 
    type:"POST", 
    data : Q001Data, 
    success:function(msg){ 
     $("#areas").html('<fieldset id="all-areas-radio" data-role="controlgroup" data-mini="true"></fieldset>'); 
     all_areas = JSON.parse(msg); 
     var textToInsert = ''; 
     var i; 
     for (i = 0; i < all_areas.length; i++) { 
      var area = JSON.stringify(all_areas[i][0]); 
      alert(area+i); 
      textToInsert += '<input type="radio" class="all-areas" name="property-area" id="' + area + '" value="' + area + '"><label for="' + area + '">' + area + '</label>';  
      alert(textToInsert); 
     } 
     $("#all-areas-radio").append(textToInsert);  
     $("[type=radio]").checkboxradio(); 
     $("[data-role=controlgroup]").controlgroup().controlgroup("refresh"); 
    }, 
    error: function (jqXHR, textStatus, errorThrown) { 
     alert("Error Q001!"); 
    }, 
}); // ### AJAX to get ALL AREAS on page load ### 
}); // ### document.on

私も "チェック" のボタンのラベルの色を変更するには、このCSSを使用します。

<style> 
#all-areas-radio div .ui-radio .ui-radio-on { 
    background: orange !important; 
} 
</style>

すべての期待ラジオボックスが画面に表示さjqmマークアップを次のように適用するまで：

$("[type=radio]").checkboxradio(); 
$("[data-role=controlgroup]").controlgroup().controlgroup("refresh");

これは、2つのボックスに正しくマークアップが適用され、4つのエンハンスのみが表示されます。私が3箱を期待するならば、私はただ1つだけ増強されたものと2つの他のものが見えない。 jquery 1.11とjqm 1.45を実行します。助けてください。

出典

2017-01-21 Voytek

アップデートは、ちょうどインチ配列値は、それぞれ、二重引用符で囲まれたAJAX呼び出しから出てきます。私はajaxなしでそれを実行しようとすると、手動で配列を構築し、値は引用符なしで出てきて、すべてがうまく動作します。だから二重引用符が私のコードに影響するのはなぜですか？ – Voytek

あなたの質問は今、二重引用符を削除する方法は？ところで、あなたのフィドルは働いていません。 – deblocker

これは私の最初のフィドルです;-)、それは私に追加されたラジオボックスを表示していた...とにかく、私は今二重引用符を削除し、スクリプトは意図したとおりに動作します。私は今、私の質問に答えてマークします。私はこれらの引用符を必要としませんでした。あなたは引用符をしたい場合は、質問は何をするために残っている？ – Voytek

これはjQuery Mobileの問題ではありません。ここのワークフローは概念的に間違っています。

引用IDと値を持つことはできません。マークアップを別の方法で作成する必要があります。理想的には、例えば、あなたのデータに区切られた名前と値を維持する必要があります：あなたはあなたのバックエンドから何を得るの制御を持っている必要があり

[{"id": "br", "name": "Bathroom"}, {"id": "be", "name": "Bedroom"}, {"id": "ki", "name": "Kitchen"}, {"id": "lo", "name": "Lounge"}]
。いくつかのPHP関数を使用して、必要なデータをエンコードすることができます。あなたのデータに、間違いによる二重引用符などが含まれている場合はどうなりますか？ labelに正しい説明が表示されますが、idとvalueは間違っています。

ここでは、コントロールグループの調整方法の例を示しますが、これは回避策に過ぎません。あなたは、あなたのサーバーからデータを交換する方法を考え直すべきです。

$(document).on("pagebeforeshow", "#property-details-page", function() { 
 
    loadAreas(["\"description \n quoted\" & a new line", "Bathroom", "Bedroom", "Kitchen", "Lounge"]); 
 
}); 
 

 

 
function loadAreas(areas) { 
 
    var container = $("#property-details-content"); 
 
    container.empty(); 
 
    var controlGroup = $('<fieldset id="areas" data-role="controlgroup" data-mini="true"></fieldset>'); 
 
    container.append(controlGroup); 
 
    for (var i = 0, l=areas.length; i < l; i++) { 
 
     var area = areas[i]; 
 
     var clean = area.replace(/[^A-Z0-9]/ig, "_"); 
 
     var control = $('<input type="radio" class="all-areas" name="property-area" id="' + clean + '" value="' + clean + '"><label for="' + clean + '">' + area + '</label>'); 
 
     controlGroup.append(control); 
 
    } 
 
    container.enhanceWithin(); 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script> 
 
    <script src="script.js"></script> 
 
</head> 
 
<body> 
 
    <div id="property-details-page" data-role="page"> 
 
    <div data-role="header" data-position="fixed"> 
 
     <h1>Property details</h1> 
 
    </div> 
 
    <div role="main" class="ui-content" id="property-details-content"> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-01-22 08:34:53 deblocker

ありがとうございます。それはそれを行うもっときれいな方法です。私は友人のための財産管理ツールを構築するアマチュアだけです。私はそれがあなたが非常に多くの方法で同じことをすることができることをjavascriptとdisconcerting見つける。私はデータベースに挿入する前にユーザーの入力を浄化し、文字、数字、スペースのみを許可します。引用符はajax呼び出しで 'json'エンコーディングとデコードで追加されたものと思われます。私はこれを解決して、クライアント側で何もする必要がないようにします。 – Voytek

@Voytek：はい、最初と最後の二重引用符はJSON.stringifyです。私の答えがあなたを助けたら、それを受け入れることを検討してください。 – deblocker

私はで二重引用符を削除した：

area = area.replace(/['"']/g,'');

、スクリプトが正常に動作します。しかし、文字列の一部として引用符が必要な場合はどうすればよいでしょうか？

出典

2017-01-22 01:21:05 Voytek

Jqueryが動的に追加されたすべてのラジオボタンを表示していません

答えて

関連する問題