每行不同的文本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"); 
   });