データ変数を使用してダイアログに影響を及ぼす

2つの異なるコール・ツー・アクション・ボタン（行とnot_row）に共通のダイアログが必要です。各ボタンは異なるdata（）変数を設定します。どの変数が設定されているかに基づいて、ダイアログは異なる反応を示します。データ変数を使用してダイアログに影響を及ぼす

以下はほとんど動作します。問題は、行が最初にクリックされた後、not_row、$（this）.data（ 'row'）が設定されたままになるため、if文がそれに応じて動作しないことです。 1つの選択肢は、データ（ 'タイプ'、 '行'）とデータ（ 'タイプ'、 'not_row'）などのクリック機能に別のデータ変数を追加することです。

提案がありますか？

http://jsfiddle.net/FYWY7/

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Dialogs</title> 
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#not_row").click(function(){$("#dialog").data('id',$(this)).dialog("open");}); 
    $("#row").click(function(){$("#dialog").data('row',$(this)).dialog("open");}); 

    $("#dialog").dialog({ 
     autoOpen : false, 
     resizable : false, 
     height  : 330, 
     width  : 430, 
     modal  : true, 
     buttons: [ 
     { 
      text : 'CLICK', 
      click : function() { 
       $(this).dialog("close"); 
       if($(this).data('row')) {alert('row');} 
       else {alert('not row');} 
      } 
     } 
     ] 
    }); 

}); 
</script> 
</head> 
<body> 
<input type="button" value="row" id="row" data-bla="whatever" /> 
<input type="button" value="not_row" id="not_row" data-bla="whatever" /> 
<div id="dialog"></div> 
</body> 
</html>

出典

2012-05-10 user1032531

これが私の解決策でした。このスクリプトの目的は、レコードを削除することです。メインページの場合は、IDを渡してレコードを削除し、ページをリロードします。または、リストから行を削除する可能性があるため、属性としてIDを含む行を渡し、レコードを削除してDOMから行を削除します。私の解決策は、渡された変数がオブジェクトか数字（文字列）かどうかをチェックすることでした。

PS。ありがとうRavi

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>Dialogs</title> 
<link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("#not_row").click(function(){$("#dialog").data('id',$(this).attr('data-id')).dialog("open");}); 
    $("#row").click(function(){$("#dialog").data('row',$(this)).dialog("open");}); 

    $("#dialog").dialog({ 
     autoOpen : false, 
     resizable : false, 
     height  : 330, 
     width  : 430, 
     modal  : true, 
     buttons: [ 
     { 
      text : 'CLICK', 
      click : function() { 
       $(this).dialog("close"); 
       if(typeof $(this).data('i') == "object") {alert('Delete record and delete row');} 
       else {alert('Delete record and redirect');} 
      } 
     } 
     ] 
    }); 

}); 
</script> 
</head> 
<body> 
<input type="button" value="Delete Row" id="row" data-id='123' /> 
<input type="button" value="Delete ID" id="not_row" data-id='234' /> 
<div id="dialog"></div> 
</body> 
</html>

出典

2012-05-11 04:09:11 user1032531

あなたはコードの下のようなダイアログボックスのオープン関数にデータを渡す必要があり、あなたが値を渡すdata-属性を使用することができます。 jquery Data()メソッドは値を読み取ります。

$('#row').click(function() 
    { 
    $("#dialog").data('id',$(this).data('row')).dialog('open'); 
    }); 

$('#not_row').click(function() 
    { 
    $("#dialog").data('id',$(this).data('row')).dialog('open'); 
    });

作業のデモ：JsFiddle Demo

出典

2012-05-10 12:16:54

両方のクリックに同じデータを渡しています - $（this）.data（ 'row'）。私は実際のid要素か実際の行要素を渡したいと思います。このスクリプトの目的は、レコードを削除することです。メインページの場合は、IDを渡してレコードを削除し、ページをリロードします。または、リストから行を削除する可能性があるため、属性としてIDを含む行を渡し、レコードを削除してDOMから行を削除します。 – user1032531

私はデータを使用しました - 行、あなたの行IDを設定しました –

@ user1032531更新された回答を確認 –

データ変数を使用してダイアログに影響を及ぼす

答えて

関連する問題