index.html
<link href="Styles/bootstrap.css" rel="stylesheet" />
<script data-main="Scripts/app" src="Scripts/require.js"></script>
<a class="btn0">button 0</a>
<div class="target"></div>
app.js
require({
paths : {
jQuery : 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
tooltip : 'bootstrap-tooltip'
}
});
require([ 'jQuery' ], function() {
require(['tooltip' ], function() {
$(".btn0").click(function() {
$(".target").load('btn0.html');
});
$('[rel=tooltip]').tooltip();
});
});
btn0.html
Wouldn't it be nice to see a Tooltip here?
In this situation, the tooltip doesn't work. Only works if i cut $('[rel=tooltip]').tooltip(); and paste in btn0.html like:
<script>
$('[rel=tooltip]').tooltip();
</script>
My question is. How organize the javascript code that is needed in btn0.html? It is possible put the JS content of btn0.html in app.js?
You have to call tooltip() function when btn0.html is loaded.
Element with rel="tooltip" does not exist when inicializing that page.
require([ 'jQuery' ], function() {
require(['tooltip' ], function() {
$(".btn0").click(function() {
$(".target").load('btn0.html', function ()
{
$('[rel=tooltip]').tooltip();
})
});
});
});
Related
Can anyone explain to me why when drawSection is called 'this' value becomes the global scope ?.
Is there anyway to use require here without having to save the widget in another variable before i lose it ?
define("my/TextBox", [
"dojo/_base/declare",
"dijit/form/ValidationTextBox"
], function(
declare, ValidationTextBox
) {
function drawSection() {
alert(this);
require(["dojo/dom-construct"], function(domConstruct) {
alert(this); // this = window
});
};
return declare([ValidationTextBox], {
postCreate: function() {
this.inherited(arguments);
drawSection.call(this)
}
});
});
It's quit simple use dojo/_base/lang hitch() function to solve the issue .
because the function inside the require(["dojo/dom-construct"], function(domConstruct) {....}) is refering to global context ,
so use lang.hitch function in the current context (by using this) and probleme is solved
Here is a Fiddle
and above working snippet :
define("my/TextBox", [
"dojo/_base/lang",
"dojo/_base/declare",
"dijit/form/ValidationTextBox"
], function(lang,
declare, ValidationTextBox
) {
function drawSection() {
alert(this);
require(["dojo/dom-construct"], lang.hitch(this,function(domConstruct) {
alert(this); // this = window
}));
};
return declare([ValidationTextBox], {
postCreate: function() {
this.inherited(arguments);
drawSection.call(this)
}
});
});
require([
"dojo/parser",
"my/TextBox",
"dojo/domReady!"
], function(
parser,
TextBox
) {
// important: parse document after the ValidationTextBox was extended
parser.parse();
});
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<body class="claro">
<input type="text" data-dojo-type="my/TextBox" />,
</body>
You need to use dojo/_base/lang lang.hitch like this:
require(["dojo/dom-construct"], lang.hitch(this, function(domConstruct) {
alert(this); // this = window
}));
That's a common closure problem.
See https://dojotoolkit.org/reference-guide/1.10/dojo/_base/lang.html#hitch
As a good practice, I would recommend having the drawSection method inside the widget and the dom-construct required on top (you will always need it as you call it from postCreate so a "on-demand" require is overkill)
define("my/TextBox", [
"dojo/_base/declare",
"dijit/form/ValidationTextBox",
"dojo/dom-construct"
], function(declare, ValidationTextBox, domConstruct) {
return declare([ValidationTextBox], {
postCreate: function() {
this.inherited(arguments);
this.drawSection()
},
drawSection: function() {
alert(this);
//domConstruct.whaever you want
};
});
});
I am trying to merge two JSON file and using it in autocompleteplugin.
But I do get an error TypeError: $(...).easyAutocomplete is not a function even I have added js library for both auto complete and jquery.
My code look like this:
<script src="jquery-3.1.0.js"></script>
<link href="easy-autocomplete.min.css" rel="stylesheet" />
<script src="jquery.easy-autocomplete.min.js"></script>
<script>
$.getJSON("file1.json", function (data1) {
$.getJSON("file2.json", function (data2) {
var final = $.extend({}, data1, data2);
var options = {
data: final,
getValue: "name",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
</script>
I made a working example based on your code.
Please check you have the correct paths when you include the script files. And also check if jQuery is included.
Hope will help you:
$.getJSON("https://api.myjson.com/bins/42jd0", function (data1) {
$.getJSON("https://api.myjson.com/bins/5bjqc", function (data2) {
var final = [];
final.push(data1.employees1);
final.push(data2.employees2);
var new_final = final[0].concat(final[1]);
var options = {
data: new_final,
getValue: "firstName",
list: {
match: {
enabled: true
}
},
theme: "square"
};
$("#KUNDE").easyAutocomplete(options); $('div.easy-autocomplete').removeAttr('style');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/easy-autocomplete.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-autocomplete/1.3.5/jquery.easy-autocomplete.min.js"></script>
<div class='easy-autocomplete'>
<input id="KUNDE"/>
</div>
You can run the code here by hitting the Run code snippet button or you can also check the jsfiddle I've made here.
I'm trying to make a website that uses parse. My java script will be shown below. The js is linked and I've made sure to include
<script src="//www.parsecdn.com/js/parse-1.6.12.min.js"></script>
in the html. My js :
$(document).ready(function() {
Parse.initialize("assumeisright", "assumeisright");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({
foo: "bar"
}).then(function(object) {
alert("yay! it worked cash muni");
});
$("div").hover(
function() {
$(this).addClass("active");
},
function() {
$(this).removeClass("active");
}
);
Parse.Push.send({
channels: ["Everyone"],
data: {
alert: "First Push"
}
}, {
success: function() {
// Push was successful
},
error: function(error) {
// Handle error
}
});
});
This doesn't work because in my html my div doesn't change when I hover so I'm assuming the Parse crashed. Any ideas of how to fix this, am I doing something wrong?
Thanks
As you are using jquery so you need to import that library as well, so final code will be something like this
<!doctype html>
<html>
<head>
<style>
</style>
<script src="http://www.parsecdn.com/js/parse-1.6.12.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
Parse.initialize("assumeisright", "assumeisright");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({
foo: "bar"
}).then(function(object) {
alert("yay! it worked cash muni");
});
$("div").hover(
function() {
console.log('add');
$(this).addClass("active");
},
function() {
$(this).removeClass("active");
}
);
Parse.Push.send({
channels: ["Everyone"],
data: {
alert: "First Push"
}
}, {
success: function() {
// Push was successful
},
error: function(error) {
// Handle error
}
});
});
</script>
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
On hover i have added console.log('add') just to test if hover is working fine, it outputs add when you hover over div
$("div").hover(
function() {
console.log('add');
$(this).addClass("active");
},
Always check your browser console for errors
I'm new to using both RequireJS and Magnific Popup, and I was wondering if anyone had successfully gotten them to play nice together. If so, what was the basic structure of your code?
Thank you!
First setup an emtry point in your html file:
<!DOCTYPE html>
<html>
<body>
<script data-main="entrypoint" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js"></script>
</body>
</html>
Then in entrypoint.js you can configure jquery and magnific popup:
require.config({
paths : {
jquery : '//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min',
magnificpopup : 'path/to/magnific-popup.min',
},
shim: {
'magnificpopup': ['jquery']
}
});
require([ 'popuptest' ], function(popuptest) {
popuptest.show();
});
Finally, on popuptest.js we can open a youtube popup like this:
define(['jquery', 'magnificpopup'], function($, magnificpopup) {
return {
show: function() {
$.magnificPopup.open({
items: {
src: 'https://www.youtube.com/watch?v=btPJPFnesV4'
},
type: 'iframe',
iframe: {
cursor: null,
titleSrc: function(item) {
return 'Video title';
},
patterns: {
youtube_short: {
index: 'youtu.be/',
id: 'youtu.be/',
src: '//www.youtube.com/embed/%id%?autoplay=1'
}
}
}
});
}
});
});
Hope this helps.
I'm trying to create a gallery group that mixes images and video, with the video using JWPlayer6.
I have each working as separate groups, but I can't workout how to integrate the two.
<!-- FancyBox to display images -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
}
});
});
<!-- FancyBox to display videos -->
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox-video").fancybox({
content: '<div id="video_container" style="">Loading video...</div><br>',
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
this.title = $(this.element).attr('caption');
},
afterShow: function(){
jwplayer("video_container").setup({
flashplayer: "/static/js/libs/jwplayerjwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
} // afterShow
}); // fancybox
}); // on
</script>
Ok, I'm not sure this is what JFK was suggesting but this seems to work, although there must be a more efficient way to do it:
<style type="text/css">
.fancybox-nav {
height: 80%;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
autoSize: true,
helpers : {
title : { type : 'inside' }
}, // helpers
beforeLoad: function(){
if($(this.element).attr('containertype')=='video'){
this.content = '<div id="video_container" style="">Loading the player ... </div><br>';
};
},
afterShow: function(){
if($(this.element).attr('containertype')=='video'){
jwplayer("video_container").setup({
flashplayer: "jwplayer.flash.swf",
file: this.href,
autostart: 'true'
}); // jwplayer setup
};
}// afterShow
}); // fancybox
}); // on
</script>
And the HTML:
<a class="fancybox" rel="group" title="Video 1" data-fancybox-type="anything" containertype="video" href="1.flv"><img src="1.png"/></a>
<a class="fancybox" rel="group" title="Image 2" href="2.png"><img src="2.png"/></a>