Member Avatar for Niloofar24

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
  • 3K Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by Niloofar24
Member Avatar for stbuchok

Can you show what you have so far?

Member Avatar for Niloofar24

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.

Member Avatar for stbuchok

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

Member Avatar for Niloofar24

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.

Member Avatar for Niloofar24

I placed those 2 files in the same directory as the html page and now when i click the Alert word, i face with it: (why it appears like this?)

Look at here please

Member Avatar for Niloofar24

No answer?! It seems this forum is not activate enough.

Member Avatar for stbuchok

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.

Member Avatar for gentlemedia

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()

Member Avatar for Niloofar24

@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?

Member Avatar for stbuchok

@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

Member Avatar for Niloofar24

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.

Member Avatar for stbuchok

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.

Member Avatar for Niloofar24

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?!

Member Avatar for Niloofar24

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
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.