jQuery dialog add/remove button on the fly

classic Classic list List threaded Threaded
9 messages Options
Reply | Threaded
Open this post in threaded view
|

jQuery dialog add/remove button on the fly

honzaB-3

Hi,

I have created a simple modal form in dialog and I want to update the
buttons according to some events in the form. More specifically I do
an ajax request and I want to remove "Send" button after it's clicked.

Is there a simple way to do this?

Thanks for replies,

Jan Brucek

----- The dialog is specified like this:

$('#contactform').dialog({
    bgiframe: true,
    autoOpen: false,
    width: 490,
    modal: true,
    overlay: {
        backgroundColor: '#FFFFFF',
        opacity: 0.5
    },
    buttons: {
        "Send": function() {
            $('#form_contact_form').ajaxSubmit(contactformoptions);
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});

$('#contact_form_link').click(function(){
    // REMOVE THE "Send" BUTTON HERE.. HOW?
}

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

Scott González

Currently there's no way to modify just one button, but you can reset
the full button hash using the option method:

$('#contactform').dialog('option', 'buttons', {...});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email]
To unsubscribe from this group, send email to [hidden email]
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

cjdell
In reply to this post by honzaB-3
Here is the code to do what you ask:

$.extend($.ui.dialog.prototype, {
        'addbutton': function(buttonName, func) {
                var buttons = this.element.dialog('option', 'buttons');
                buttons[buttonName] = func;
                this.element.dialog('option', 'buttons', buttons);
        }
});

$.extend($.ui.dialog.prototype, {
        'removebutton': function(buttonName) {
                var buttons = this.element.dialog('option', 'buttons');
                delete buttons[buttonName];
                this.element.dialog('option', 'buttons', buttons);
        }
});

Add it into into a helper JS file if you wish. Usage:

$('#MyDialog').dialog('removebutton', 'Old Button');
$('#MyDialog').dialog('addbutton', 'New Button', newButtonClickFunction);

function newButtonClickFunction() {
    alert('You clicked the new button!');
}

honzaB-3 wrote
Hi,

I have created a simple modal form in dialog and I want to update the
buttons according to some events in the form. More specifically I do
an ajax request and I want to remove "Send" button after it's clicked.

Is there a simple way to do this?

Thanks for replies,

Jan Brucek

----- The dialog is specified like this:

$('#contactform').dialog({
    bgiframe: true,
    autoOpen: false,
    width: 490,
    modal: true,
    overlay: {
        backgroundColor: '#FFFFFF',
        opacity: 0.5
    },
    buttons: {
        "Send": function() {
            $('#form_contact_form').ajaxSubmit(contactformoptions);
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});

$('#contact_form_link').click(function(){
    // REMOVE THE "Send" BUTTON HERE.. HOW?
}

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to jquery-ui+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

Keith C
This was great!  It worked well for me.  With one exception.  I need to create an id for either these buttons or pass in a parameter into the newButtonClickFunction so that I can trigger an event based on which button was clicked.  When I add a parameter to the function, it fires when the button is created.

Can you give an example of how to add this functionality?

Thanks,
Keith C

cjdell wrote
$.extend($.ui.dialog.prototype, {
        'addbutton': function(buttonName, func) {
                var buttons = this.element.dialog('option', 'buttons');
                buttons[buttonName] = func;
                this.element.dialog('option', 'buttons', buttons);
        }
});

$('#MyDialog').dialog('addbutton', 'New Button', newButtonClickFunction);

function newButtonClickFunction() {
    alert('You clicked the new button!');
}
Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

cloudsuser
In reply to this post by cjdell
Could you please share your full working code(hiding button or showing dynamic button)



Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

finco
here's an example that may be useful

<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  $(function() {
    $('.btn').click(function() {
      //insert whatever you want the button to do here
      $('#hello').html("I've been changed");
      $('.btn').hide();
    });
  });
</script>
</head>
<body>
  <form id="myForm">
    <p id="hello">Hello World</p>
    <button type="button" class="btn">Click Me!</button>
  </form>
</body>

On Jun 27, 5:15 am, cloudsuser <[hidden email]> wrote:

> Could you please share your full working code(hiding buttong or showing
> dynamic button)
>
>
>
>
>
> cjdell wrote:
>
> > Here is the code to do what you ask:
>
> > $.extend($.ui.dialog.prototype, {
> >    'addbutton': function(buttonName, func) {              
> >            var buttons = this.element.dialog('option', 'buttons');
> >            buttons[buttonName] = func;
> >            this.element.dialog('option', 'buttons', buttons);
> >    }
> > });
>
> > $.extend($.ui.dialog.prototype, {
> >    'removebutton': function(buttonName) {          
> >            var buttons = this.element.dialog('option', 'buttons');
> >            delete buttons[buttonName];
> >            this.element.dialog('option', 'buttons', buttons);
> >    }
> > });
>
> > Add it into into a helper JS file if you wish. Usage:
>
> > $('#MyDialog').dialog('removebutton', 'Old Button');
> > $('#MyDialog').dialog('addbutton', 'New Button', newButtonClickFunction);
>
> > function newButtonClickFunction() {
> >     alert('You clicked the new button!');
> > }
>
> > honzaB-3 wrote:
>
> >> Hi,
>
> >> I have created a simple modal form in dialog and I want to update the
> >> buttons according to some events in the form. More specifically I do
> >> an ajax request and I want to remove "Send" button after it's clicked.
>
> >> Is there a simple way to do this?
>
> >> Thanks for replies,
>
> >> Jan Brucek
>
> >> ----- The dialog is specified like this:
>
> >> $('#contactform').dialog({
> >>     bgiframe: true,
> >>     autoOpen: false,
> >>     width: 490,
> >>     modal: true,
> >>     overlay: {
> >>         backgroundColor: '#FFFFFF',
> >>         opacity: 0.5
> >>     },
> >>     buttons: {
> >>         "Send": function() {
> >>             $('#form_contact_form').ajaxSubmit(contactformoptions);
> >>         },
> >>         "Cancel": function() {
> >>             $(this).dialog("close");
> >>         }
> >>     }
> >> });
>
> >> $('#contact_form_link').click(function(){
> >>     // REMOVE THE "Send" BUTTON HERE.. HOW?
> >> }
>
> >> --~--~---------~--~----~------------~-------~--~----~
> >> You received this message because you are subscribed to the Google Groups
> >> "jQuery UI" group.>> To post to this group, send email [hidden email]
> >> To unsubscribe from this group, send email to>>[hidden email]
> >> For more options, visit this group at
> >>http://groups.google.com/group/jquery-ui?hl=en
> >> -~----------~----~----~----~------~----~------~--~---
>
> --
> View this message in context:http://old.nabble.com/jQuery-dialog-add-remove-button-on-the-fly-tp22...
> Sent from the jQuery UI Discussion mailing list archive at Nabble.com.

--
You received this message because you are subscribed to the Google Groups "jQuery UI" group.
To post to this group, send email to [hidden email].
To unsubscribe from this group, send email to [hidden email].
For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en.

Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

cloudsuser
Thanks man.
I am looking for Same functionality inside the dialog box.
(The button should be inside the dialog box). sorry for this help, i am new to jquery.
Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

cloudsuser
In reply to this post by finco
I have four buttons, Start,Stop,Terminate,Reboot

Example:
When i click start button i will get dialog box which contains Start button and Cancel button.
As soon as when i clicked Start button
i will hide Start button and Cancel button and i will show only Close button with staic message as "In progress .. .."


Issues:
First time it works perfectly... some time its not working properly...
If i click start button it shows Terminate button...etc...mismatch...what may be the issues...

Note:
1) In other page i have the <div id="window-instance-status-popup" style="display:none"></div>
2) I have noticed that for first time of selecting the button works as expected...
and when we try to click second time with same button popup is not working, thrid time again its working.... So each button works like frist click success, second click fails, thrid click success...


Find the script below...

<script type="text/javascript">

var currentInstanceId;
$(function(){

        $("#btn_asn_users").live('click', function(e){
                AssignUsers(e);
        });

        $("#btn_assign").live('click', function(e){
                insertRole(e);
        });
        $("#icon_str, #link_str").live('click', function(e){
                startServerWindow(e, "StartInstance", currentInstanceId);
        });

        $("#icon_stp, #link_stp").live('click', function(e){
                stopServerWindow(e, "StopInstance", currentInstanceId);
        });

        $("#icon_trmt, #link_trmt").live('click', function(e){
                terminateServerWindow(e, "TerminateInstance", currentInstanceId);
        });
               
        $("#icon_rbt, #link_rbt").live('click', function(e){
                rebootServerWindow(e, "RebootInstance", currentInstanceId);
        });

});


function reloadProgressWindow() {
       
$("#window-instance-status-popup").html("In progress .. ..");
       
}

function startServerWindow(e, usersAction, currentInstanceId) {
alert('startServer selected...');
var url="<%=request.getContextPath()%>/cloudcomputing/showInstanceStatus.do?usersAction="+usersAction+"&instanceId="+currentInstanceId+"&init=firstRequest";
       
$("#window-instance-status-popup").load(url, function(){
                $(":button:contains('Close')").hide();
                sameHeight('#asn_rightPane','#asn_leftPane');
       
        }).dialog({
            modal: true,
            width: 425,
            position: ['50%', '50%'],
            draggable: true,
            autoOpen: false,
            title: usersAction,
            closeText: 'hide',
            buttons: {
                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Start": function () {
                $(":button:contains('Start')").hide();
                $(":button:contains('Cancel')").hide();
                $(":button:contains('Close')").show();                  
                reloadProgressWindow();
                var successUrl="/myaction.do?startServerConfirmed=Yes&usersAction="+usersAction;
                $.post(successUrl, function(data) {  
                    alert('startserver data: '+data);            
                    reloadPageWindow(data);                    
              });
                },              
                "Close": function () {
                    showInstanceDetails(currentInstanceId);          
                    $(this).dialog('close');
                }
            },
            close: function (event, ui) {
                $(this).dialog('destroy');
            }
        });
        $("#window-instance-status-popup").dialog('open');
        e.preventDefault();
}



function reloadPageWindow(data) {
       
        $("#window-instance-status-popup").html(data);
       
}

function rebootServerWindow(e, usersAction, currentInstanceId) {
alert('rebootServer selected...');
var url="myaction.do?usersAction="+usersAction+"&instanceId="+currentInstanceId;
       
$("#window-instance-status-popup").load(url, function(){
                $(":button:contains('Close')").hide();
                sameHeight('#asn_rightPane','#asn_leftPane');
       
        }).dialog({
            modal: true,
            width: 425,
            position: ['50%', '50%'],
            draggable: true,
            autoOpen: false,
            title: usersAction,
            closeText: 'hide',
            buttons: {

                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Reboot": function () {
                        $(":button:contains('Reboot')").hide();
                $(":button:contains('Cancel')").hide();
                $(":button:contains('Close')").show();
                reloadProgressWindow();
                var url="<%=request.getContextPath()%>/cloudcomputing/showInstanceStatus.do?rebootServerConfirmed=Yes&usersAction="+usersAction;
                $.post(url, function(data) {
                    reloadPageWindow(data);                    
              });
                },                              
                "Close": function () {
                    showInstanceDetails(currentInstanceId);          
                    $(this).dialog('close');
                }              
               
            },
            close: function (event, ui) {
                $(this).dialog('destroy');
            }
        });
        $("#window-instance-status-popup").dialog('open');
        e.preventDefault();
}


function stopServerWindow(e, usersAction, currentInstanceId) {
alert('stopServer selected...');
var url="myaction.do?usersAction="+usersAction+"&instanceId="+currentInstanceId;
       
$("#window-instance-status-popup").load(url, function(){
                $(":button:contains('Close')").hide();
                sameHeight('#asn_rightPane','#asn_leftPane');
       
        }).dialog({
            modal: true,
            width: 425,
            position: ['50%', '50%'],
            draggable: true,
            autoOpen: false,
            title: usersAction,
            closeText: 'hide',
            buttons: {

                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Stop": function () {                    
                    $(":button:contains('Stop')").hide();
                $(":button:contains('Cancel')").hide();
                $(":button:contains('Close')").show();                    
                reloadProgressWindow();
                var url="myaction.do?stopServerConfirmed=Yes&usersAction="+usersAction;
                $.post(url, function(data) {    
                    reloadPageWindow(data);                    
              });                
                },                              
                "Close": function () {
                    showInstanceDetails(currentInstanceId);          
                    $(this).dialog('close');
                }            
               
            },
            close: function (event, ui) {
                $(this).dialog('destroy');
            }
        });
        $("#window-instance-status-popup").dialog('open');
        e.preventDefault();
}

function terminateServerWindow(e, usersAction, currentInstanceId) {
alert('terminateServer selected...');
var url="myaction.do?usersAction="+usersAction+"&instanceId="+currentInstanceId;
       
$("#window-instance-status-popup").load(url, function(){
                $(":button:contains('Close')").hide();
                sameHeight('#asn_rightPane','#asn_leftPane');
       
        }).dialog({
            modal: true,
            width: 425,
            position: ['50%', '50%'],
            draggable: true,
            autoOpen: false,
            title: usersAction,
            closeText: 'hide',
            buttons: {

                "Cancel": function () {
                    $(this).dialog('close');
                },
                "Terminate": function () {
                $(":button:contains('Terminate')").hide();
                $(":button:contains('Cancel')").hide();
                $(":button:contains('Close')").show();                    
                reloadProgressWindow();
                var url="myaction.do?terminateServerConfirmed=Yes&usersAction="+usersAction;
                $.post(url, function(data) {  
                alert('terminateServer data: '+data);              
                    reloadPageWindow(data);                    
              });                  
                },                              
                "Close": function () {
                    showInstanceDetails(currentInstanceId);          
                    $(this).dialog('close');
                }              
               
            },
            close: function (event, ui) {
                $(this).dialog('destroy');
            }
        });
        $("#window-instance-status-popup").dialog('open');
        e.preventDefault();
}
Reply | Threaded
Open this post in threaded view
|

Re: jQuery dialog add/remove button on the fly

motormouthmike
In reply to this post by honzaB-3
I just saw this great article with demo showing how you can add and remove buttons on the fly:

http://www.rahulsingla.com/blog/2011/03/jqueryui-adding-removing-buttons-dynamically-from-a-jqueryui-dialog