ModalPopup or Dialog Using Google Closure

Question

When "add Employee" link is clicked a ppopup must appear with fields to accept user details. I tried many things but ended up opening a new window and not a popup. how to get the following code to work in a popup or a dialog or a ModalPopup

function newUsr() {
    var li = new goog.ui.LabelInput('Employee ID');
    li.render(goog.dom.getElement('d'));
    var li1 = new goog.ui.LabelInput('First Name');
    li1.render(goog.dom.getElement('d1'));
    var li2 = new goog.ui.LabelInput('Last Name');
    li2.render(goog.dom.getElement('d2'));
    var li3 = new goog.ui.LabelInput('Email Id');
    li3.render(goog.dom.getElement('d3'));
    var li4 = new goog.ui.LabelInput('Date Of Birth(yyyy-mm-dd)');
    li4.render(goog.dom.getElement('d4'));
    var li5 = new goog.ui.LabelInput('Date Of Joining(yyyy-mm-dd)');
    li5.render(goog.dom.getElement('d5'));
    var li6 = new goog.ui.LabelInput('Phone');
    li6.render(goog.dom.getElement('d6'));
    var fb1 = new goog.ui.Button('Submit', goog.ui.FlatButtonRenderer
            .getInstance());
    fb1.render(goog.dom.getElement('fb1'));
    goog.events.listen(fb1, goog.ui.Component.EventType.ACTION, function(e) {
        alert(" " + li.getValue() + " " + li1.getValue() + " ");
        var request = new goog.net.XhrIo();
        var data = new goog.Uri.QueryData();
        data.set('emp_id', li.getValue());
        data.set('first_name', li1.getValue());
        data.set('last_name', li2.getValue());
        data.set('email', li3.getValue());
        var d1 = new Date(li4.getValue());
        var d2 = new Date(li5.getValue());
        data.set('dob', li4.getValue());
        data.set('doj', li5.getValue());
        data.set('phone', li6.getValue());
        request.send('newUser', 'POST' , data.toString());
    });
}
Date.prototype.yyyymmdd = function() {         

    var yyyy = this.getFullYear().toString();                                    
    var mm = (this.getMonth()+1).toString(); // getMonth() is zero-based         
    var dd  = this.getDate().toString();             

    return yyyy + '-' + (mm[1]?mm:"0"+mm[0]) + '-' + (dd[1]?dd:"0"+dd[0]);
};

score 0 · Answer 1 · answered Feb 07 '14 at 15:39

Please show us how you create and handle the "add Employee" link, otherwise it's hard to answer the question. If you attached an event listener for the goog.events.EventType.CLICK event to the link, and the default behaviour of the link is to open a new window (i.e. it has a target property), then you can prevent the default behaviour by using preventDefault(). Inside your event handler you could then open a custom dialog, e.g. using goog.ui.Popup or goog.ui.Dialog.

For example:

<a href="someurl" id="add">add employee</a>

and you did

goog.events.listen(document.getElementById('add'), goog.events.EventType.CLICK, function(e) {e.preventDefault(); e.stopPropagation(); var dlg = new goog.ui.Dialog(); ...});

ModalPopup or Dialog Using Google Closure

1 Answers1