CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Sudhanshu Gupta
Sudhanshu Gupta

Reputation: 2315

implement Alerts UI Web

I am trying to make a form in which i have a text box. Now I have a validation that the name should be unique.

So i was going to the parent div and changing the full html inside it.

I am going to the parent div and doing like 

`parentdiv.find('.child').html('<div class="form-group has-error has-feedback validateblockname"> <input type="hidden" id = "edit_tower_id" ><div class="alert alert-danger blocknamealert" role="alert" style="margin: 5px 0px 0px 0px;float: right; padding: 0;"> <code style="font-size: small;">Tower name already exists </code></div></input><label for="ProjectBlocks_block_name" class="control-label">Name</label><span class="glyphicon glyphicon-exclamation-sign form-control-feedback"></span><input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"></div>'')`

After validating html Initial image

this is for initial image

parentdiv.find('.child').html('<div class="form-group"><input type="hidden" id="edit_tower_id"><label for="ProjectBlocks_block_name" class="control-label">Name</label><input type="text" class="form-control" id="ProjectBlocks_block_name" onblur="EditProjectBlocks.validateblockname();" onchange="EditProjectBlocks.validateblockname();"></div>');

Is there a better way to do this

Upvotes: 0

Views: 43

Answers (3)

Farah Nawaz
Farah Nawaz

Reputation: 430

Check the following URL, it shows the demo with source code:

http://jsfiddle.net/cse_tushar/QAePU/2/

Further, you can user J Query validation plug-in. Check the following URL:

http://jqueryvalidation.org/

Upvotes: 1

Bomber
Bomber

Reputation: 10957

You could use jquery dialog and roll your own:

https://jqueryui.com/dialog/

Example confirm dialog:

// pass in props for dialog options
function confirm(text, title, onconfirm, oncancel, okText, cancelText) {

    var el = createRequiredElements(text);

    var response = false;

    // set dialog title
    if (title !== undefined) {
        el.attr('title', title);
    } else {
        el.attr('title', 'Confirmation');
    }

    // setup dialog options
    el.dialog({
        modal: true,
        width: 500,
        dialogClass: "sample-class",
        close: function () {
            el.remove();
        },
        buttons: [{
            text: okText || "OK",
            click: function() {
                $(this).dialog("close");
                if (onconfirm !== undefined && onconfirm !== null) {
                    onconfirm();
                }
                response = true;
            },
        },
        {
            text: cancelText || "Cancel",
            click: function() {
                $(this).dialog("close");
                if (oncancel !== undefined && oncancel !== null) {
                    oncancel();
                }
                response = false;
            }
        }]
    });
    return response;
}; 
  // create dialog content
  function createRequiredElements(text){
    var el = $(document.createElement('div'));
    el.addClass('dialog-class');

    var para = $(document.createElement('p'));
    para.addClass('dialog-message-class');
    para.text(String(text));

    el.append(para);
    return el;
}

And the onClick to fire a basic confirm dialog:

$(".clicker").click(function () {
    var url = $(this).attr('href');
    cgAlerter.confirm("Are you sure you want to do this?", 'Confirm',
        function () {
            window.location = url;
        });

    return false;
});

Upvotes: 0

Nageshwar Reddy Pandem
Nageshwar Reddy Pandem

Reputation: 1047

which form you are uploading to the parent div, put it somewhere in dom with some id on it and hide it...

when you want it, clone it with clone() method and append/replace to parent div...

var copyForm = $("#copyForm").clone();
$(copyForm).appendTo("#targetDiv");

DEMO

Upvotes: 0

Related Questions