Home/ Questions/Q 7937187
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T22:27:32+00:00

I would like to have a dialog common to two different call-to-action buttons (row

  • 0

I would like to have a dialog common to two different call-to-action buttons (row and not_row). Each of the buttons would set a different data() variable. Based on which variable is set, the dialog would react differently.

The following almost works. Problem is that if row is first clicked, then not_row, $(this).data(‘row’) remains set so the if statement doesn’t act accordingly. One option is to add another data variable in my click function such as data(‘type’,’row’) and data(‘type’,’not_row’), but it seems like a waste.

Any suggestions?

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This was my solution. The purpose of this script is to delete records. If on a main page, then pass the ID, delete the record, and reload the page. Or you might delete a row off a list, so pass the row which contains the ID as an attribute, delete the record, and remove the row from the DOM. My solution was to check whether the passed variable was an object or a number (string).

    PS. Thanks 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>
    • 0