0

Hello.
I'm working on my own CMS. I want to use Bootbox.js which is a small JavaScript library which allows us to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.
And this is the website

I have downloaded installed it with via npm, by this command: npm install bootbox
But i don't know what to do after that... why when i copy and paste example codes from the website, it doesn't work? I searched the net but couldn't find the answer.

Has anyone use this library?

Would you mind guide me a little please?
Thank you

3
Contributors
14
Replies
50
Views
2 Years
Discussion Span
Last Post by Niloofar24
0

Well, first of all i copied this code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>

<!-- CSS dependencies -->
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>

<p>Content here. <a class="alert" href=#>Alert!</a></p>

<!-- JS dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>

<!-- bootbox code -->
<script src="bootbox.min.js"></script>
<script>
$(document).on("click", ".alert", function(e) {
bootbox.alert("Hello world!", function() {
console.log("Alert Callback");
});
});
</script>
</body>
</html> 

from here (in the Usage Instructions part in that page) and just pasted in a blanck file. But it didn't wok. The result was a white page with the text Content here Alert! and the "Alert!" word was underlined as a link and when i clicked, nothing changed.

0

Where is bootstrap.min.js and bootbox.min.js located? Are there any errors in the developer tools for the browser you are using?

0

Both bootstrap.min.js and bootbox.min.js files are in home directory. Should i place them in a cartain place?!
No there is no errors.

0

Well, you haven't really given us much to go on. If you want more help you will need to supply us with more information. If you can create a publicly viewable page that has the issue, we can more easily debug it. Or if you create a jsfiddle, then we can help more.

0

It is pretty active, but how on earth can people debug from an image. Can't you place your page and assets online somewhere?

I do notice that your href=# misses double quotes href="#" and you'll need to block the default behavior of the link with e.preventDefault()

0

@stbuchok, ok. what do you mean by creating a publicly viewable page that has the issue or creating a jsfiddle? Where can i put the code for dibugging?

0

@gentlemedia, no need to prevent default as it is an inline link and not navigating away.

@Nillofar24, put what you have so far up somewhere that is able to be navigated to from anywhere. If we can see it in the browser, we can help debug

0

Well, does it help? Here I'm not sure if it's correct, i've never been using this.
Here i can't upload those bootstrap.min.js and bootbox.min.js files there so the output is not simillar to the image i gave you you it's link.

0

ok, that doesn't really help since you didn't get any bootstrap or bootbox up there. I have verified that the following will trigger the event:

$(document).on('click', '.alert', function(e){
    alert('test');
});

Without adding the needed files, we can't help you. We need a live example that has all the files needed in order to test and help you out.

0

I replaced alert('test'); with those 2 lines and a message box with the text "test" appears. So without those 2 files you can't help me with that, well i don't know what to do.

I just downloaded and installed everything but this command on the terminal:
npm install bootbox
And after that place bootstrap.min.js and bootbox.min.js files on the same directory as the html file and next just copied and pasted codes for the dialog box examples.

On the Bootbox.js website there was no more explanation for what to do, just said install bootbox.js with that command or download the zip file by clicking on the link.

Anyway, is there any way to find the problem and solution?!

0

Yessssssss:D I found the problem myself finally!
So let's explain it for other member's may have this same problem too.

Look at my code, line 8:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">

We use href="bootstrap.min.css" when we want to host bootstrap ourself, so we download the file and create a link like that.

But when i downloaded bootstrap.min.js and bootbox.min.js from the "Bootbox.js" website, there were no bootstrap.min.css to download. So the problem was because of the lack of the bootstap.min.css file. So it didn't work well.

Then i replaced that with:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

So href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" will create link to CND and the script works well with no problem.

That'a all!

Edited by Niloofar24

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.