How to display Bootstrap 3 alert with reference to external JavaScript

Question

I have a webpage with Bootstrap 3 and I tried below code to display alert box.

   <button class="btn btn-warning" onclick="warning('Are you sure ?')">Warning</button>

its working fine with this below Javascript on my web page.

window.error = function(msg) {
    var dom = '<div class="top-alert"><div class="alert alert-danger alert-dismissible fade in " role="alert"><i class="glyphicon glyphicon-exclamation-sign"></i> ' + msg + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div>';
    var jdom = $(dom);
    jdom.hide();
    $("#id_template").append(jdom);
    jdom.fadeIn();
    setTimeout(function() {
        jdom.fadeOut(function() {
            jdom.remove();
        });
    }, 6000);
}

For an external JavaScript file the warning() function is giving ReferenceError: warning is not defined

My external Js given below for example

// JavaScript Document

function fetch(){

    var user = $("#id_owner").val();
    var firstname = $("#id_fname").val();
    if(firstname == ""){
        warning('You must enter First Name.');
        return false;
    }

}

i am not using any warning script and don't know how to do that. — Niharika Parida
– Niharika Parida, Commented Oct 15, 2017 at 21:37
try changing window.error to window.warning - codepen.io/nagasai/pen/GMYQGG — Naga Sai A
– Naga Sai A, Commented Oct 16, 2017 at 3:35

Sashi · Accepted Answer · 2017-10-15 22:48:58Z

1

You must try below code directly from your external javascript.

if(firstname == ""){

    var dom = '<div id="modals" class="alert alert-danger" style="display:none;"><button data-dismiss="alert" class="close" type="button">×</button><span class="entypo-attention"></span>  <strong>Waring</strong>&nbsp;&nbsp;You must enter First Name.</div>';
    var jdom = $(dom);
    jdom.hide();
    $("id_template").append(jdom);
    jdom.fadeIn();
    setTimeout(function() {
        jdom.fadeOut(function() {
            jdom.remove();
        });
    }, 6000);
}

answered Oct 15, 2017 at 22:48

Sashi

6868 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Niharika Parida Over a year ago

Working like a charm. Thank You!

Collectives™ on Stack Overflow

How to display Bootstrap 3 alert with reference to external JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related