Telling Neatline/Omeka to load a script

How do I tell Neatline/Omeka to load scripts? I have a custom theme for my Neatline exhibit and I want to be able to execute a script but it looks like Neatline/Omeka prevents it from loading. I am already using script.js for Lightbox and that's working fine but Neatline doesn't detect any other scripts. How can this be accomplished?

Hi,

You'll need to add all of the scripts that you want loaded into the script.js file. You can just add them all to the file one after another. (Although if there are dependencies between them, you'll need to make sure you add the ones that are used by other files first.)

This seems messy and string, but it is a pretty standard way of handling JavaScript dependencies. Partially, this is because it reduces the number of times that a browser has to contact your web server.

Eric

Eric,

Thank you. I will give it a try later. Does it matter what order I put them in?

As long as one library doesn't call the other (which yours shouldn't), no, it won't matter.

thanks. I will try that

Hi Eric,

I am trying to add bootstrap modal to my exhibit just so I have a popup window shop up on page load. The way David has it in this exhibit (http://neatline.dclure.org/neatline/show/declaration-of-independence). I copied the content of bootstrap.js to script.js but I don't know where to put the code for the bootstrap modal. Would you happen to know? I can't figure it out. Accroding to David it would go to show.php but what would the actual code be in order to make the Neatline exhibit to show on page load and the popup box. I'm really bad with javascript. Any help would be greatly appreciated. I have been struggling with this for several weeks now. Thank you.

Hey,

I think I have a better idea of what you're trying to accomplish from this. Hopefully, we'll get it sorted out soon. Maybe.

I think that the easiest -- if not the prettiest -- way of handling this is to include the modal in the exhibit's Narrative. In the exhibit settings page, click the Source button in the Narrative field.

At the bottom of the text box, add something like this:


<div class="modal" id="exhibit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-label="Close" class="close" data-dismiss="modal" type="button"><span aria-hidden="true">×</span></button>

<div class="modal-body">
<p>Here is a Neatline exhibit.</p>
</div>
</div>
</div>
</div>
<script>
jQuery('#exhibit-modal').modal({
backdrop: false
});
</script>


You'll need to change what's inside of the header (look for h4) and what's inside the of the body (class="modal-body"). But you should be able to use the rest without any changes.

Hi Eric,

So I added the code to the bottom in the Narrative section of my Neatline exhibit and the modal doesn't pop up. All I get is the text "This is an exhibit
Here is a Neatline exhibit." and the close button but I don't get the actual modal. When I look at the error console, I get the following error:
[Error] TypeError: undefined is not a function (evaluating 'jQuery('#exhibit-modal').modal({
backdrop: false
})')

I don't see where you've added the bootstrap JavaScript or CSS to the appropriate files under themes/neatlight-master/neatline/exhibits/themes/antiquities-of-nubia/. You'll need to have those available before that code snippet will work.

Eric,

Which file does the bootstrap Javascript and CSS files need to be added to? That's the part I can't figure out.

The bootstrap JS file (bootstrap.min.js) goes onto the end of themes/neatlight-master/neatline/exhibits/themes/antiquities-of-nubia/script.js.

The bootstrap CSS file (bootstrap.min.css) goes onto the end of themes/neatlight-master/neatline/exhibits/themes/antiquities-of-nubia/style.css.

Hi Eric,

Thank you very much. I do get the modal now. But it breaks my exhibit. The narrative doesn't load. Any idea why?

I have no idea. I copied and pasted the code from your narrative into another neatline installation, and it worked fine.

You could start to figure out what's wrong by taking things away until it starts working again.

First, I'd remove all of the code for both the HTML and JavaScript that creates the modal dialog (basically everything I had you put in earlier).

Second, add back in just the HTML.

Finally, add the JavaScript back in.

I'm not sure off-hand what that might tell you, but it would be a place to start looking. Without being able to look at the backend, though, I'm not sure what else could be going on.

it's the bootstrap CSS code added to style.css that breaks it. I am not sure how to go about fixing it. Eric, did you use the same theme I'm using to test my exhibit?

Eric,

I can give you access to my backend, if you don't mind taking a look. My e-mail is aye-aye at cox dot net. Please send me a message and I will give you access.

No, I don't have your theme, so that wasn't part of my test.

It doesn't look like you're using Bootstrap anywhere else on it, though, so my guess is that some of the styles and classes that are being used clash with those that Bootstrap styles (although that seems odd).

Probably the easiest thing to do is to look around at other modal dialogs. Vex is pretty easy to set up.

After you've cleaned out Bootstrap and downloaded Vex, here's all you'd need to do:

Put the file js/vex.combined.min.js into the end of the script.js file.

Put the file css/vex.css and then css/vex-theme-default.css into the style.css file.

At the bottom of your narrative, instead of what I gave you earlier, include this:


<script>
vex.defaultOptions.className = 'vex-theme-default';
vex.dialog.alert("Insert your text here.");
</script>


OK, I will give it a try later today. I really appreciate your help with this. You have gotten me the closest I have ever been to accomplishing this. I really appreciate it.

NP. Can't wait to see how it turns out.

Why don't we see how Vex works out. I try to minimize the number of servers I have access to :)

Hi Eric,

I tried Vex and it also doesn't work properly. All the text in the popup box shows on the very bottom of the popup, you have to scroll to see it otherwise you just see a blank rectangle. That's in Safari and Chrome. In Firefox the text shows up in the same spot narrative is. Weird. Any idea what could be causing it?

OK. Why don't you put the Bootstrap modal back into place. I'll dig into it more and see if I can figure out why it's not working.

I suspect that some of the other CSS that you're using is conflicting with the CSS being used with the modal.

And I'm hoping that the Bootstrap version will be a little easier to detangle. We'll see.

OK, I will do that. Do you want access to the back end as well?

No, I don't think that will add anything at this point.

OK Eric, I put the Bootstrap modal back in place. Thanks

I think that at least part of your problem is that you have the entire exhibit wrapped in a <div class="container">. The container class is used by Bootstrap. If you change its name, it should fix at least some of the issues, and we can go from there.

I couldn't tell whether you actually refer to the container class, however. If it does, we'll figure that out later.

OK, I see. Where exactly would I change that? I am not sure why it's like that, isn't it supposed to be like that?

I believe it's in your theme. Looking in the github repo you posted in a comment a while ago, I believe it's coming from here , unless you've changed something and not pushed it up.

I didn't change anything. I also didn't build that theme. So where do I find <div class="container"> that needs to be changed?

Hi Eric,

I thought it was working but it only works in Safari on one of my computers, on my laptop it doesn't work in any browser. Not sure why

also in Firefox on my desktop it breaks the timeline but not in Safari.

You may need to spend some time with the console debugger to figure out what's going on. You may want to consider building a theme from scratch so you can understand how Omeka generates these views and then make sure you have a modal system that makes sense. There are a lot of weird/surprising things that can happen with JavaScript if you forget the wrong ';' or have an extra ',' someplace. The dev tools in your browser will help you figure out what's going on.

Wayne

I can't built the theme from scratch as I am using the word lines plugin which needs this particular theme. I don't have enough knowledge to be able to build a theme that would work with all the plugins.
I have used dev tools and the two errors I get are realted to livereload.js and the other one is a warning about about Simile, which I posted on the forum. I know I should be debugging it on my own but I am not good at this and I really appreciate all the help I have received on these boards.