I am using the knockout js external template engine. It seems to be pretty straightforward. But only a few of my templates are getting loaded, others are not getting included and there are no errors in my firebug console.
If i include the HTML inline then it works. After i move them into the template it does not get loaded.
The other templates that are getting loaded do not have the "data-bind="with:..." option. They are plain html.
Here is my code. Thanks in advance for your help
Main HTML
<body>
<div
class="tab-pane fade"
id="personal"
data-bind="template: { name: 'personal'}"
></div>
</body>
My Template HTML
<div class="panel panel-default" data-bind= "with : dashboard.user">
....
</div>
I figured out what the issue was.
My main html div which has the template has the same id as the template name, so it was failing silently. I just found out the hard way. I renamed my template files to have the Tmpl suffix and it started to work.
<body>
<div
class="tab-pane fade"
id="personal"
data-bind="template: { name: 'personalTmpl'}"
></div>
</body>
Related
I need to create templates in handlebars for an html page and the whole html should go inside of templates. For e.g. I have:
<div class= "something-pull-left-something">
<div class="someclass">
<li a href= ''>Some more info and some more divs and spans and html code</li>
</div>
</div>
and I should create a big template for the first div ''something-pull-left-something'' and smaller templates inside of it for the other items and I cant quite understand how this should happen.
Divide it up into parts as it makes sense. Try to avoid having one huge template. Instead, make one template that includes a number of other templates. You may run into performance issues but worry about that later -- it is likely not an issue.
Make main template which contains header, body and footer.
Add partials to the main template.
If you wants to use Bootstrap then you can go through this http://getbootstrap.com/components
or you can use bootstrap class
<div class="container">
<div class="col-md-12">
//code
</div>
<div class="col-md-12">
<div class="col-md-6">
//code
</div>
<div class="col-md-6">
//code
</div>
</div>
</div>
I have an issue with the ooyala video embed code:
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
When I add this script in the main body it works fine. But when I add this script in a modal it does not populate the video. Here is code i have tried.
<body>
<div>
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
<div class="modal" id="category_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content about_us">
<div class="modal-body">
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
</div>
</div>
</div>
</body>
In the above code the 1st script load the video, but the 2nd script does not load the video. Is there any one who can suggest me what to do?
Does Ooyala have a javascript api? Sorry -- I am unfamiliar with this, but I think it does. I found this code snippet that someone has used within fancybox:
'beforeShow': function() {
var videoPlayer = OO.Player.create('playerwrapper', 'R0ZjB2NTqDw3YRWba9RIpRnF6D9lRYKP', {});
console.log(videoPlayer);
videoPlayer.play();
},
Note that 'beforeShow' is a fancybox callback function and your modal solution may have something different to use. Anyways typically loading in html for videos does not work in modal or lightbox type windows. And often javascript implementations need to be used after the modal is displayed to show the content.
I would try exploring this path.
Question Background:
I have a simple ASP.NET MVC site using Bootstrap to render a view with nine panels. On each panel is a button that when clicked should produce a modal popup.
The issue:
If I include a script link to the included bootstrap.min.js filethen I can produce a simple modal pop-up. My issue is I will need to start passing parameters to the pop-up eventually so am attempting to develop my JQuery solution. Currently when I click on a panel button in my view I can see from the Chrome console I'm getting the error:
Uncaught ReferenceError: $ is not defined
Code:
Note: This view is based on a master view that has <script src="/Scripts/jquery-1.9.1.js"></script> included as part of the defined bundles
#{
ViewBag.Title = "CIBuilds";
Layout = "~/Views/Shared/_Layout.cshtml";
<link rel="stylesheet" href="~/Content/bootstrap.min.css">
<link rel="stylesheet" href="~/Content/bootstrap.css">
}
#Styles.Render("~/Content/css")
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">This Page is Disabled</div>
<div class="panel-body">
This page is temporarily disabled by the site administrator for some reason.<br>
Click here to enable the page.
Click to open Modal
</div>
</div>
</div>
//Other 8 panels
</div>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
ERROR:***** Uncaught ReferenceError: $ is not defined
$(document).ready(function () {
$(".btn").click(function () {
$("#basicModal").modal("show");
});
});
</script>
If anyone could help me sorting this that would be great.
UPDATE
I commented out the master views RenderSection reference to the defined JQuery bundle along with the bundle itself. I then added a link to JQuery1.9.1.js and also tried 1.9.1.min.js to no avail.
I also tried JQuery-1.11.2.js and 1.11.2.min.js again the issue still persists.
I am getting a different error message now which is:
Uncaught TypeError: undefined is not a function
This is because .modal() is not showing as a valid method in the JQuery - which would explain the undefined function error message, what script should I be using?
Running your script snippets the same way you have pasted, I get the same error that you are talking about in the console until I include the JQuery Library. Once the JQuery library is loaded the error goes away.
You may want to recheck your bundles to make sure that they are all linked properly, or if the software your using blocks JQuery on the frontend you may have to add another link to the Library you intend to use. Hope this helps.
I wanted to add this as a comment to poke around a little bit to come to the correct solution first, but I don't have enough rank for that. I would try using this on the front end, but with your version of JQuery that you want to use.
// By Chris Coyer CSS-Tricks
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
EDIT:
Here is the fiddle http://jsfiddle.net/sf9knxx8/ with no library, you can see the console to find your error. Here is one with the library added http://jsfiddle.net/6f980kyc/, clear your console and refresh you can see the error goes away.
Must be the $ conflict! Try this:
jQuery(document).ready(function () {
jQuery(".btn").click(function () {
jQuery("#basicModal").modal("show");
});
});
instead of
$(document).ready(function () {
$(".btn").click(function () {
$("#basicModal").modal("show");
});
});
Simply open viewsource in browser and see
1 : If jquery is file loaded (clicking on the link in viewsource should open the jquery file)
2 : If there are more than one links to include jquery (make sure you turn off EnableOptimization in your bundle)
Also try replacing $ with JQuery
I noticed this error in Firefox using their developer tool.
I use MVC, and was able to resolve this issue by moving
my #Scripts.Render() calls Before calling #RenderBody() in my Layout Page.
I well know that when the page is loaded, Angular may not be fully load, that's why some ng-bind and ng-cloak are useful.
However, I've just noticed that the content of the ng-include is parsed BEFORE angular is loaded, leading to some ugly display of not evaluated {{myVar}} for some milliseconds/seconds.
How could the ng-include directive (owned by Angular) be parsed if angular is not fully loaded?
Do I need to transform the following code:
<body id="home" ng-controller="MyAppCtrl">
<div ng-include src="'/app/topnav/top-nav.tpl.html'"></div>
<div>
<div ng-view></div>
</div>
(the issue here is that top-nav.tpl.html is parsed before Angular is fully loaded)
to:
<body id="home" ng-controller="MyAppCtrl">
<div ng-cloak>
<div ng-include src="'/app/topnav/top-nav.tpl.html'"></div>
<div>
<div ng-view></div>
</div>
</div>
I am new to Angularjs and need to do some stuff using angularjs. So my question is just to add some separate html pages to one page by using angular controller. Though I do not know how to do this and search it as well help would be appreciated.
I have a html page like this.
<html>
<body>
<div id="div1" >
</div>
<div id="div2" >
</div>
<div id="div3" >
</div>
</body>
</html>
And again I have 3 separate html pages ie. html1 , html2 , html3 likewise. So now I need to put my 3 html pages in to above html page dynamically by using angularjs. Help would bbe really appreciated.
Maybe use ng-include.
<html>
<body ngApp>
<div ng-include="firstPage.html"/>
<div ng-include="secondPage.html"/>
<div ng-include="thirdPage.html"/>
</body>
</html>
If you want to include and apply scope dynamically, you need $templateCache and $compile.