I can't make the ng-include directive work. I've watched and tried several solutions from stackoverflow but none of them seems to be working. Am I missing something ? Angular works everywhere in the document, except for this. The div is not emebeded in anything.
I am using the foundation framework. Is it possible that it causes the problem ?
Here is the code in my index.html:
<div ng-include="'partials/menu.html'"></div>
I checked and rechecked, I DO have a "partials" folder containing a "menu.html" file...
I have also tried:
<div ng-include src="'partials/menu.html'"></div>
and
<div ng-include="'/partials/menu.html'"></div>
Thanks in advance for any help you could give me !
You have the correct code here:
<div ng-include=" 'partials/menu.html' "></div>
so it's most likely a path issue. If your partials folder is not inside the same folder as the html file you're calling the partial into, you might need something like '../partials/menu.html'. You might try creating a simple 'hello world' like partials/test.html with no angular functionality and use that to find the correct path and get your ng-include working.
Thanks for your answer. I actually figured out what the problem was. It seems you cannot do http requests in chrome on a local file. The console showed an error about that. I tried opening the file in firefox and it worked. I assume this error will not occure once the file is uploaded on a server.
The issue is the use of single and double quotation, you only need one of them, like this:
<div ng-include="partials/menu.html"></div>
This works as well
<div ng-include='partials/menu.html'></div>
Related
So I am new to using JS and I have looked over the list.js site and can't seem to figure this out. I can't even get the demo to run on my server. I can get my code to work on web based places like Encode and what not, but not my server.
http://brewingbard.biz/smm/test/main-list2.html
Can someone please tell me why this is failing? I copy stuff that works in one place and put it up here and then it stops.
Your code is running before the <div id="users"> exists.
Therefore, it has nothing to operate on.
Move the invoking script block below the element.
<script src="list.js" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
Each <script> tag can only have one src.
You need to load each script in its own element.
ng-view html showing as plain string. how can I fix it?
Error screenshot.
https://www.evernote.com/shard/s179/sh/b7cf9275-7d18-4b5d-8599-a4b7ec5c3bbc/c9ec67b08744057a3a78ab4f20dd97aa
Sorry, i can not upload images.
Looks like you're trying to use ng-view to load jade/haml? You'll need to have that compile to html before angular will be able to use it as a view.
To begin, I have spent the last few hours browsing stackoverflow on related topics. Many of them seemed very similar to the issue I'm having, there was even a couple that resembled mine almost perfectly. However, the fixes that worked for them do not seem to be working for me. I think it would be best for me to post my code and have others look them over; I will try to be as detailed as possible.
What I'm trying to do:
I have a page setup with links inside li's, and when it is clicked, it is supposed to pull some html content from another page I made. More specifically, it is supposed to pull out the html content from a specific div id in that page. I am having trouble pulling anything out from it, and having it posted to my main pages div.
My HTML part with the navigation menu:
<ul id="nav_main">
<li class="navLink">link here</li>
</ul>
The div that is supposed to change dynamically (on click) is labeled as this:
<div id="main_content">
<p></p>
</div>
The other .html file that I pull data from has a div that looks like this:
<div id="one">blahbalhblahblahlbhalbhlah</div>
The part I am having difficulty with is the javascript code. I have tried using load and get, and neither seem to be working. Here is my skeleton code:
$(document).ready(function(){
$("#nav_main li").on("click", function() {
// here was my first attempt:
$("#main_content p").load("contentholder.html #one");
// my second attempt, using get():
$.get("contentholder.html", function(data) {
$("#main_content p").html(data)
});
});
My problem with this is that the #main_content doesn't seem to be changing. I think the problem is that the load and get attempts aren't working, they don't seem to be pulling the data out as it's supposed to.
All these files are on my local drive. Any help would be greatly appreciated
$(document).ready(function(){
// your code here
});
You are missing the function(){
In addition to your syntax errors pointed out by Brad M, keep in mind that most browsers prevent AJAX calls if they aren't made from a server, so if you aren't running a localhost, you will most likely get an Access-Control-Allow-Origin error when making the AJAX call.
See more info here: Get HTML code of a local HTML file in Javascript
Right, i've looked around and can't seem to find an answer to this problem.
I'm running Expression Engine Core (the latest version), and I am building a template. I have built the template using Bootstrap and some other bits of code. I'm having a problem with using prettyPhoto within my template. I have a button which is calling a prettyPhoto modal window. My static HTML site works fine with this but there seems to be some sort of conflict somewhere. All my js files and css files link fine, but for some reason or another the js doesn't work for my prettyPhoto. The code i'm using is:
Need Help? <i class="icon-help-circle"></i><div id="maphelp" class="hide">text goes in here</div>
But I can't for the life of me work out why this isn't working. I've tried making the class= into a rel= but that still doesn't do anything. I've used the code from the http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ with the section on inline content.
I have also done the fix within the help pages to make sure that its is active. Still nothing happens...
Can anyone help me?
Have you tried moving your prettyPhoto.js to the bottom of your code perhaps inside the footer or better yet, below the footer.
I usually create an embeds template where I place all of my js, xml, css files and call out the embeds like so
<script src="{path="embeds/jsfile"}"></script>
this way it allows me to move the files all over the place in my visual template.
another is to use the no conflict
<script type="text/javascript">
$.noConflict();
// Code that uses other library's $ can follow here.
</script>
I hope this helps.
I have searched this web looking for an answer, but it seems that this time I'm not so lucky, so I am forced to ask. I apologize if it's already answered (could not find it). And yes, English is not my first language, so I also apologize for my spelling mistakes, I try my best.
This is my problem, using Tomcat 5.5, Struts 1.3, JRE 1.5 and I'm using firefox 3.5.6.
In my jsp page I cannot seem to put any src="path/path" in my <script> I have tried deleting the src and all works well, but my project is going to need a lot of use from jquery and I do not want to copy/paste all the js file in every jsp.
This is my code:
<script type="text/javascript" src="js/jquery-1.3.2.js">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
and the submit button:
<input type="submit" onclick="showMySelf()">
When I click the button, nothing happens (well it actually repaints the page) and when I delete the "src" tag from the script and add all the jquery code to the page it all works well.
I have tried putting another slash in the path as "/js/jquery-1.3.2.js" and returns an error.
I have tried using ResolveURL and it doesn't seem to give me better results.
I have also tried changing the js file to another file ("generics.js" and "js.js"), I also tried with "js/*.js".
Any of theese solutions have archived anything.
I have also tried using the struts tags (like html:submit) but it also did not work.
The path is actually right, since looking the code in my web browser gives me a link to the js file. So I suposse the browser knows were to look for my js file, it does not give me an error or a broken link to the file.
Any ideas of why this is happening?
Thank you all.
Random.
You can not use a script element to load an external file and put code in it at the same time. You need to use two script elements:
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript">
function showMySelf(){
alert("Hello World!");
}
(... plus other stuff code that actually uses jquery functions)
</script>
I think Gumbo solved it.
As a sidenote, a very good way to find out whether a browser can load a JS file is the "Net tab" in Firebug in Firefox. It shows all loaded (and failed) requests of the current page.
The two most likely options are:
a) You are including HTML in your JS file (i.e. <script> tags)
Take it out.
b) You have the wrong URI and when you attempt to resolve your relative URI manually you do so incorrectly
Look at your server access logs to see what is actually being requested (or use a tool such as Firebug)
The first thing to do in such case. Install Firebug and look at the "Console" panel (for possible syntax errors) and the "Net" panel to see whether your jQuery sources are being fetched correctly. The 2nd column there shows the request status code.
alt text http://img46.imageshack.us/img46/6224/jqueryfirebugtmp.jpg
(full size image)