如何参考外部JavaScript显示Bootstrap 3警报

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;
    }

}

Answer 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);
}