每行不同的文本Jquery模式/對話框形式

Question

我如何更改每行jdialog框消息中的文本？ 正如你所看到的，在訂單明細欄中的每一行都有一個顯示按鈕。 我希望每行都有不同的文字。 我試着改變名稱值，並且我還在每個td元素中放入了按鈕的代碼，但它仍然不起作用。

文本的特定代碼：

<div id="dialog-form" title="Order Details"> 
    <p class="validateTips">Spicy Sandwitch</p> 
    <p class="validateTips">More</p> 
    <form> 
    <fieldset> 
     <label for="name">More Comments</label> 
     <p class="validateTips">Sandwitch only lettuce</p> 
     <!-- Allow form submission with keyboard without duplicating the dialog button --> 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 
    </form> 
</div> 
<div id="users-contain" class="ui-widget" 

完整的代碼here

Answer 1

爲了使從記錄對話框的內容改變到另一個

你沒有解釋如何你會加載自定義內容嗎？但我會指導您如何自定義每條記錄的對話內容。

第一：創建）稱爲openDialog（一個JS方法，這種方法可以採取對話的上下文作爲參數，也可能採取只記錄ID，並加載通過AJAX或內容的東西

function openDialog(content="", record_id=0) 
{ 
if(content.length > 0) // if you're passing content as a paramter 
    dialog.html(content); 
if(record_id!=0) // if you're passing the record ID as a paramter 
{ 
    // load content via ajax or something 
    dialog.html("loaded content via AJAX for user number "+record_id); 
} 
dialog.dialog("open"); 
} 

然後調用此方法在每個「顯示」按鈕，您可以

<button id="create-user-1" onclick="openDialog('Hello User #1');">New Show</button> 
<button id="create-user-2" onclick="openDialog('',2);">New Show</button> 

更新其實你全面的代碼有點混亂，但你的要求，我試圖適用於你的小提琴代碼我的解決方案，這是我工作的例子 https://jsfiddle.net/doaa_magdy_55/qtvw75z6/20/#&togetherjs=jSCLnBoUen

Answer 2

ATM中有你的HTML硬編碼出現的文本

<p class="validateTips">Spicy Sandwitch</p> 

，除非你改變它與JavaScript本文「辣sandwitch」將永遠是相同的，無論你多少次創建一個新的。我沒有真正讀懂所有的代碼，因爲它太大了，但你可以做這樣的事情單獨ADRESS條目中的每一個（屬性約他們IDS）

<div id="dialog-form" title="Order Details"> 
    <p id="something1.0" class="validateTips">Spicy Sandwitch</p> 
    <p id="something1.5" class="validateTips">More</p> 
    <form> 
    <fieldset> 
     <label id="something2.0" for="name">More Comments</label> 
     <p id="something3.0" class="validateTips">Sandwitch only lettuce</p> 
     <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
    </fieldset> 

，然後，當你創建行的一個新的入口，你可以去每個ID明確，並決定顯示什麼

$('#something1.0').text('new Spicy sandwitch'); 
$('#something2.0').text('moreeee'); 

Answer 3

進行以下修改代碼：

1. 定義與引用對話框中的元素來保存您的動態內容

   <div id="dialog-form" title="Order Details"> 
       <p class="validateTips field1"></p> 
       <p class="validateTips">More</p> 
        <form> 
         <fieldset> 
          <label for="name">More Comments</label> 
          <p class="validateTips field2"></p> 
          <input type="submit" tabindex="-1" style="position:absolute; top:-1000px"> 
         </fieldset> 
        </form> 
   </div> 
   

2. 定義爲每一行你想要的內容，靜態或通過AJAX

   var order1 = { 
       field1: 'Spicy Sandwich', 
       field2: 'Sandwich Only Lettuce' 
   }; 
   
   var order2 = { 
       field1: 'Epic Pizza', 
       field2: 'Pizza Without Pinneaple' 
   }; 
   
   var orders = [order1, order2]; 
   

3. 編輯的代碼來填充對話框

   $(".showDialog").button().on("click", function() { 
       var row = $(this).closest('tr').index(); 
       $('#dialog-form .field1').html(orders[row].field1); 
       $('#dialog-form .field2').html(orders[row].field2); 
       dialog.dialog("open"); 
   });