I want to use CActiveForm's AjaxValidation.
My layout view file was like this before enabling AjaxValidation:
<html lang="tr-TR" dir="ltr">
<head>
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.js"></script>
</head>
As you see i'm calling jquery framework on my layout page (because i'm using on every page).
And i decided to use CActiveForm's ajax validation. Firstly enable enableAjaxValidation while calling it:
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'otel-form',
'enableAjaxValidation'=>true,
)); ?>
And then uncomment this on my controller
$this->performAjaxValidation($model);
But i got $(...).yiiactiveform is not a function error. When i check source code of page :
As you see, one more jquery library included, too. So there are 2 jquery files on page. Because of this i'm getting error. Next i put something like this for disabling jquery.
Yii::app()->clientscript->scriptMap['jquery.js'] = false;
Now jquery is loading only once. But this result is :
<html lang="tr-TR" dir="ltr">
<head>
<script type="text/javascript" src="/istanbulcityhotels/assets/cb2686c8/jquery.yiiactiveform.js"></script>
<script src="/istanbulcityhotels/js/jquery.js"></script>
</head>
jquery.yiiactiveform.js calling BEFORE jquery.js . It should called AFTER jquery.js.
It confused a bit. What should i do?
ADDITIONAL
Yes, i read this question because titles' are really similar, but question isnot same.
Thank you.
You should not be including jQuery manually from your layout. Instead of doing this, include it from within your Controller base class:
public function init() {
Yii::app()->clientScript->registerCoreScript('jquery');
}
Don't forget to call parent::init() from within your concrete controllers.
It seems CActiveForm inserts the scripts before the title tag using CClientScript::POS_HEAD constant. So a workaround is to add this code
<?php
$cs=Yii::app()->clientScript;
$cs->scriptMap=array(
'jquery.js'=>false
);?>
to the top of the main layout file in order stop it from loading jquery, then put the title tag after you load your jquery file
<script src="<?php echo Yii::app()->request->baseUrl; ?>/js/jquery.js"></script>
This way jquery.yiiactiveform.js will be loaded right after jquery.
just put your own jquery on tag title,
just like this:
<script src="/istanbulcityhotels/js/jquery.js"></script>
<title>your title</title>
Related
Is there a way to add a script tag declared in view B to the list of scripts in view A (which calls B)?
The example below should make it clear what I need.
I have a base template A:
<html>
<head>
<title>#title</title>
<!-- declared stylesheets -->
</head>
<body>
#content
<!-- Java script dependencies -->
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>
Note that the base view declares dependencies to jquery.js and bootstrap.js at the end of the file. This is OK except for the following case:
#base(title) {
#header()
#navigation()
<div class="container">
#content
</div>}
The navigation view has a script tag that depends on jquery already being loaded.
When I load the page I get an error stating that "$ symbol is not defined" which makes sense because the script is parsed before jquery is loaded.
Is there a way for me to add the script declared in navigation at the end of the base view (after the declaration of jquery)?
I've tried moving the dependency to jquery to the <head></head> section and everything works as expected, but I would like to keep the current layout.
Edit: To be more clear, I want to send the script dependencies from #navigation view to #base view .
Take a look to Play's doc for moreScripts and moreStyles equivalents (last section in doc)
De dacto it deosn't need to be named scripts so you can use your own name, also you can use it for sending other blocks of HTML into higher level view (layout).
See answers to similar quesion
So it can be i.e.:
#navigationScripts = {
<script src="/assets/my-navigation.js"></script>
}
#base(title, navigationScripts) {
#header()
#navigation()
<div class="container">
#content
</div>
}
And in layout:
#(title: String, navigationScripts: Html = null)
<html>
<head>
<title>#title</title>
<!-- declared stylesheets -->
</head>
<body>
#content
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
#navigationScripts
</body>
</html>
I am using Handlebars in an Express Node.js app. My layout.html file includes a <head> section. How can I make the <head> section different for different pages? (So that I can, for example, reference a JavaScript file in only one page, and vary the <title> for each page.)
layout.html looks like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src='/public/ajsfile.js'></script>
<link type='text/css' href="/public/style.css" rel="stylesheet">
</head>
<body>
{{{body}}}
</body>
</html>
(I am imagining varying the <head> content with something analogous to {{{body}}} in the above, but with {{{head}}}.)
This is a great question and, in my mind, a glaring weakness in Express's view model. Fortunately, there is a solution: use Handlebars block helpers. Here's the helper I use for this purpose:
helpers: {
section: function(name, options){
if(!this._sections) this._sections = {};
this._sections[name] = options.fn(this);
return null;
}
}
Then, in your layout, you can do the following:
<head>
{{{_sections.head}}}
</head>
<body>
{{{body}}}
</body>
And in your view:
{{#section 'head'}}
<!-- stuff that goes in head...example: -->
<meta name="robots" content="noindex">
{{/section}}
<h1>Body Blah Blah</h1>
<p>This goes in page body.</p>
You can make the follow:
layout.hbs
<head>
<title>{{title}}</title>
{{#each css}}
<link rel="stylesheet" href="/css/{{this}}" />
{{/each}}
</head>
app.js
router.get('/', function (req, res, next) {
res.render('index', { title: 'MyApp', css: ['style.css', 'custom.css'] });
});
Result:
<head>
<title>MyApp</title>
<link rel="stylesheet" href="/css/style.css" />
<link rel="stylesheet" href="/css/custom.css" />
</head>
Maybe, you could use this implementation of the section helper: https://github.com/cyberxander90/express-handlebars-sections
You just need to install it and enable it:
yarn add express-handlebars-sections # or npm
const expressHandlebarsSections = require('express-handlebars-sections');
app.engine('handlebars', expressHandlebars({
section: expressHandlebarsSections()
}));
Hope it helps.
Younes
I know this is an older question but I wanted to point out a clear alternative solution to what you are asking (I'm not entirely sure why nobody else spoke about it over the years). You actually had the answer you were looking for when you bring up placing things in {{{head}}} like you do for {{{body}}}, but I guess you needed help understanding how to make it work.
It seems possible that most of the answers on this page are geared towards Node "Sections" because you speak about the different sections of HTML you've included in your layout file that you want to change. The "Sections" everyone is speaking about in this thread seems to be a technique, although I may be mistaken, originating from Microsoft's Razor Template Engine. More info: https://mobile.codeguru.com/columns/dotnet/using-sections-and-partials-to-manage-razor-views.htm
Anyway Sections work for your question, and so could "Partials" theoretically (although it may not actually be the best option for this). More info on Partials:
https://www.npmjs.com/package/express-partial
However, you simply asked for a way to alter the HTML tag content of your template layout in Handlebars, and assuming we are talking about HTML head tags, all you need to do is replace the content you have in your template layout HTML head tags with one of these (I use 3 brackets because it seems HTML would be included and you don't want it escaped):
<head>
{{{headContent}}}
</head>
Then you just dynamically pass whatever data you want through the route you create in your app.js file to "get" the page like so (I am mostly taking the code #Fabricio already provided so I didn't have to rewrite this):
router.get('/', function (req, res) {
res.render( 'index', { headContent:'I DID IT!' });
});
Now when you load your page, "I DID IT!" will be where you expect it to show up.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
I'm defining page with some vars and methods. Then I wanna use it in html markup (for example data-win-bind="textContent: myPage.variable). How can I access page variables in html markup?
In the JavaScript code behind your page, say default.js, you'd include your ViewModel for the data binding, something like:
(function(){
WinJS.Namespace.define("MyModel.myPage", {
variable : null
};
MyModel.myPage.variable = 'foo';
})();
Then in when the page is activated (in default.js), you'll need to initialize the bindings with a call like
WinJS.Binding.processAll(document.body, MyModel);
There's quite a bit more functionality available though, so this is just a simplistic one-way binding case that should get you started. For more info, check out the Quickstart: binding data and styles.
You have to use javascript here's the skeleton:
<html>
<head>
<script type="text/javascript">
//Code goes here
</script>
</head>
<body>
</body>
<html>
I have a test jsp with:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js" type="text/javascript">
</script>
<script type="text/javascript">
dojo.require("dojo.widget.Tree");
dojo.require("dojo.widget.TreeSelector");
dojo.require("dojo.widget.TreeNode");
dojo.require("dojo.widget.TreeContextMenu");
</script>
</head>
<body>
<div dojoType="TreeSelector" widgetId="treeSelector"></div>
<div dojoType="Tree" widgetId="treeWidget" selector="treeSelector"toggler="wipe">
<div dojoType="TreeNode" widgetId="1" title="First node" isFolder="false"></div>
<div dojoType="TreeNode" widgetId="2" title="Second node">
<div dojoType="TreeNode" widgetId="2.1" title="Second node First Child"></div>
<div dojoType="TreeNode" widgetId="2.2" title="Second node Second Child"></div>
</div>
<div dojoType="TreeNode" widgetId="3" title="Third node" isFolder="false"></div>
</div>
This will not work in any browser.
I thought this would be easy, it seems the dojo library is not being downloaded/found?
Do I need to do anything else?
Also, my IDE, JDeveloper, reports that the attribute "dojoType" is not defined on element div.
I have to say, this example looks like it is taken from a very old version of dojo, but you're trying to run it against Dojo 1.5. That most likely won't work. dojo.widget hasn't existed since...0.4, 0.9 maybe.
You may be right in your comment to the previous answer in that no parseOnLoad: true was necessary in the original example, but I'd also assure you that that example was not running any version of Dojo anywhere near what you're running it with.
Based on what you're looking at there, you may want to start somewhere like here: http://www.dojotoolkit.org/reference-guide/dijit/Tree.html
I'm not sure what the default behavior is when it's not present, but you probably need to define a djConfig with parseOnLoad set to true (or call the parser directly). See the following links for more information:
http://docs.dojocampus.org/djConfig
http://dojocampus.org/content/2008/03/08/the-dojo-parser/
Follow the:
Google AJAX Libraries API Dev Guide,
and the Google API Loader's Guide.
You need to:
register for an API key (or use a direct link as you did),
if not using a direct link but google.load, you need to defer the execution of your code using an onload callback.
Personally, I would just do something like:
within the <head> section of my.html:
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY_API_KEY_GOES_HERE"></script>
<script type="text/javascript" src="my.js"></script>
in my.js:
google.load("dojo", "1.5", {
uncompressed: true
});
function OnLoad() {
/* do stuff here */
}
google.setOnLoadCallback(OnLoad);