I have the following problem:
I am trying add routes js files in php.
In a html file works perfectly.
Why not work in a php file?
Try:
grunt bower-install
Error:
Verifying property bower-install.app.src exists in config...OK
Reading bower.json...OK
Parsing bower.json...OK
Warning: Cannot read property 'block' of undefined Use --force to continue.
The code:
bower: {
dev: {
dest: './components'
},
},
'bower-install': {
app: {
src: ['template.php']
},
},
}
There is a issue since a week ago, but no response there.
https://github.com/stephenplusplus/grunt-bower-install/issues/33
It's like says #SimonBoudrias. You have to go to the following file path:
node_modules/grunt-bower-install/node_modules/wiredep/lib/inject-dependencies.js
Add to fileTypesDefaults object, the object php
var fileTypesDefault = {
html: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
}, php: {
block: /(([\s\t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
detect: {
js: /<script.*src=['"](.+)['"]>/gi,
css: /<link.*href=['"](.+)['"]/gi
},
replace: {
js: '<script src="{{filePath}}"></script>',
css: '<link rel="stylesheet" href="{{filePath}}" />'
}
},
yaml: {
block: /(([\s\t]*)#\s*bower:*(\S*))(\n|\r|.)*?(#\s*endbower)/gi,
detect: {
js: /-\s(.+)/gi,
css: /-\s(.+)/gi
},
replace: {
js: '- {{filePath}}',
css: '- {{filePath}}'
}
}
};
A regards
Related
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 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.
In my app i try to create a preloader with jquery.html5loader like this :
$.html5Loader({
filesToLoad: 'load.json', // this could be a JSON or simply a javascript object
onBeforeLoad: function () {
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function () {
$('#load').hide();
console.log('Complete Loaded');
},
onElementLoaded: function ( obj, elm) { },
onUpdate: function ( percentage ) {
// sleep(100000);
console.log(percentage);
$("#load").text(' '+percentage);
}
});
the script correctly work and i get Complete loaded log in console when all script loaded but i get another error on angular
Uncaught object angular.js:36
in my json file i load all script except jquery,angular.js,angular-route.js . i think the problem is because i have a this code in my html :
<html ng-app="myApp">
Probably you are doing something wrong. I've created this simple jsfiddle embedding angularjs in the page and everything seems to work.
$.html5Loader({
filesToLoad: {
files: [{
"type": "SCRIPT",
"source": "//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js",
"size": 4.096,
}]
},
onBeforeLoad: function() {
console.log('Before load');
$('body').append('<div id="load">Loading....</div>');
},
onComplete: function() {
$('#load').hide();
console.log('Complete Loaded');
},
onUpdate: function(percentage) {
// sleep(100000);
console.log(percentage);
$("#load").text(' ' + percentage);
}
});
As part of our Grunt build we are transpiling some typescript code into a few separate files, and then concatenating the resulting javascript along with all the rest of our javascript code. Unfortunately I can't get the dynamic buildup of filenames to work along with grunt-concat.
This is the relevant snippet from our Gruntfile - see the part on generatedTypeScriptFiles, which doesn't work.
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js'
];
grunt.initConfig({
gitinfo : {}, //will be populated with values from Git
options : {
"packageName" : nconf.get("name"),
"frameworkVersion" : nconf.get("version"),
"frameworkOutputPath" : nconf.get("frameworkOutputPath"),
"workerOutputPath" : nconf.get("workerOutputPath"),
"sourceMapPath" : nconf.get("sourceMapPath")
},
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
generatedTypeScriptFiles : {
all : function () {
var tsf = [];
for (var key in this.typescript) {
if(this.typescript[key].dest) {
tsf.push(this.typescript[key].dest);
}
}
return tsf;
}()
},
scriptfiles : {
hybrid : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}(),
web : function () {
return jsfiles.concat('<%= generatedTypeScriptFiles.all %>');
}()
}
concat : {
web : {
options : {
separator : ';',
},
src : '<%= scriptfiles.web %>',
dest : '<%= options.frameworkOutputPath %>'
}
}
}
I am guessing that for our case where we actually know all the resulting filenames in our typescript build step, we could just build up the filenames beforehand - outside of grunt.initConfig. That should fix things, right? Or is there another way?
Maybe I misunderstand the problem or what you're trying to do, but why don't you just glob all .js files from the "generated" directory?
Like this:
var jsfiles = [
'js/external_libraries/inherit.js',
'js/external_libraries/modernizr.js',
'js/baz.js',
'generated/*.js'
];
grunt.initConfig({
typescript : {
foo: {
src : ['js/Foo/*.ts'],
dest : 'generated/Foo.js',
},
bar : {
src : ['js/Bar/*.ts'],
dest : 'generated/Bar.js',
}
},
concat : {
web : {
options : {
separator : ';',
},
src : jsFiles,
dest : '<%= options.frameworkOutputPath %>'
}
}
});
It's simple!
This is my dynamic JavaScript code with Razor markup:
<script type="text/javascript">
$.fancybox.open(
[
#foreach (var class in GenericClass)
{
var aux = "{ href: 'http://localhost:63095" + Url.RouteUrl("Image") + "' }";
<Text>#aux</text>
break;
}
],
{ helpers: { thumbs: { width: 75, height: 50 } }
});
</script>
This is what I get in any web browser:
<script type="text/javascript">
$.fancybox.open(
[
{ href: 'http://localhost:63095/Home/Image' }
],
{ helpers: { thumbs: { width: 75, height: 50 } }
});
</script>
But this is what I really wanted to be generated:
<script type="text/javascript">
$.fancybox.open(
[
{ href: 'http://localhost:63095/Home/Image' }
],
{ helpers: { thumbs: { width: 75, height: 50 } }
});
</script>
The problem is clear: instead of an apostrophe (') the output has '. Does someone know how I can generate the ' instead of ' ?
OBSERVATION: I already tried to do escaping and encoding but neither seems to work.
Maybe try including the value inline instead:
#foreach (var class in GenericClass)
{
<Text>{ href: 'http://localhost:63095#(Url.RouteUrl("Image"))' }</text>
break;
}
I believe that should fix the issue
Raw Html Approach
If you do need raw html you can use the following:
#Html.Raw(myString)
Just be very careful with this especially if you are including values entered by the user since it could cause XSS or other security issues.