Im trying to run this plugin
https://github.com/jzaefferer/jquery-treeview
In clear html it works, so it means the problem is in my mvc code.
I have following code
<!-- TREEVIEW Plugin -->
<link href="/Content/jquery-treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />
<script src="/Content/jquery-treeview/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/Content/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#treeview ul").treeview();
});
</script>
the link addresses are okay, because they are not underlined and i checked the path manually. In clear HTML the plugin works. I also tried
#Scripts.Render("~/Content/jquery-treeview/jquery-1.2.6.min.js")
or
#Url.Content("~/Content/jquery-treeview/jquery-1.2.6.min.js")
At it seems same (not working). Where is the problem ?
But this code works, so JQuery is loaded.
$(document).ready(function () {
alert("ready!");
});
HTML Code
<div id="treeview">
<ul>
<li>Category
<ul><li>SubCategory</li></ul>
</li>
</ul>
</div>
Mystery revealed, in Shared/_Layout.cshtml JQuery was also included by default so the solution was comment it out :-)
Related
The Sheety API is great but I cannot make it work with Vue.
The only included example uses jQuery with handlebars.js which, like vue.js, uses double mustache syntax that collides.
<html>
<head>
<title>UK Theme Parks</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON('https://api.sheety.co/uk-theme-parks', function(data) {
var template = Handlebars.compile($('#item-template').html())
$('#items').html(template(data))
})
})
</script>
<script id="item-template" type="text/x-handlebars-template">
<ul>
{{#each this}}
<li>{{name}}</li>
{{/each}}
</ul>
</script>
</head>
<body>
<div id="items">Loading theme parks...</div>
</body>
</html>
Is there a way to make this example work inside the Vue component? Most preferably, to make it work without having to import the handlebars.js or jQuery?
Please mind that I am an exploratory designer, not a well-versed js coder, so I would greatly appreciate a working example :)
I am in learning phase of vue.js and here is my index.html code as follows:
<html>
<head>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<todo-item></todo-item>
</ul>
</div>
<script src="index.js"></script>
</body>
</html>
and code of index.js is as follows:
Vue.component('todo-item', {
template: '<li>Todo 1</li><li>Todo 2</li>'
})
var app = new Vue({
el: '#app'
})
now in the output, I am getting only one <li>Todo 1</li> not the second Todo 2.
Can anyone let me know why it is happening?
In case I repeat the <todo-item></todo-item> in index.html then it is repeating Todo 1, should not it display Todo 2 after Todo 1?
I have gotten the answer, It was happening because
Component template should contain exactly one root element.
and I was using two <li> in the same template without a root element.
So I have changed in the template as
template: '<ul><li>This is a todo</li><li>Another work</li></ul>'
and removed <ul> from index.html. It is working fine now.
I am using browserify and i want to use bxslider. When i had all the templates in a single file (index.html), it was working. Now i am using browserify to build it so i have vue components. I want to use bx slider in a vue component.
slider.vue
<ul class="bxslider">
<li>
<img src="img/thumb-01.jpg"/>
</li>
</ul>
index.html
<link href="plugins/bxslider/jquery.bxslider.css" rel="stylesheet" />
<div id="app"></div>
<!-- scripts -->
<script src="plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script src="plugins/bxslider/jquery.bxslider.min.js"></script>
<script src="dist/build.js"></script>
<script>
$(document).ready(function(){
$('.bxslider').bxSlider();
});
</script>
I couldn't get the bxslider, i try to use it as a function in a component, alse try to use it in a seperate file. Any suggestions please?
The problem is that $(document).ready() is executed before the vue.js code. You need to replace this code
$(document).ready(function(){
$('.bxslider').bxSlider();
});
with
$(document).ready(function(){
setTimeout(function(){
$('.bxslider').bxSlider();
},100);
});
I am trying to workout a HelloWorld example of Bootstrap3 and X-editable. I am attaching my page source code in this post. I am facing two issues.
I am getting the following error when i use mode as 'popup' as soon as i click on the editable link.
TypeError: this.getCalculatedOffset is not a function
If i switch from popup to inline at-least the page appears however, the buttons dont appear correctly.
Any feedback would be appreciated. Page Source is below:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>X-Editable Bootstrap Hello World!</title>
<link rel="stylesheet" href="twitter-bootstrap/css/bootstrap.css" type="text/css"/>
<link href="bootstrap-editable/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Hello World Bootstrap</h1>
<div class="hero-unit">
<p>Hey.. this is my very first XEdit-able Bootstrap site.</p>
<!-- superuser -->
superuser
</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="twitter-bootstrap/js/bootstrap.js"></script>
<script src="bootstrap-editable/bootstrap3-editable/js/bootstrap-editable.js"></script>
<script type="text/javascript">
$.fn.editable.defaults.mode = 'inline';
$(document).ready( function(){
//$('#username').editable();
$('#username').editable( {
type: 'text',
pk: 1,
url: '/post',
title: 'Enter username'
});
} );
</script>
</body>
</html>
Your bootstrap css and js files must be from 2.xx version of bootstrap, that's a problem.
Use x-editable for bootstrap 2 or update your bootstrap to version 3+.
I had the same issue after upgrading from Bootstrap 2 to Bootstrap 3.
I had upgraded Bootstrap's CSS, X-Editable's CSS and JS, but had forgotten to upgrade Bootstrap's JS which was still for v2.
Don't forget to update all files:
Bootstrap 3 .css and .js
X-Editable for Bootstrap 3 .css and .js
Probably a bit late, but hopefully that can still help someone.
I've been trying to make a jQuery tab UI like in the following Better alternative to an iframe? but after hours of troubleshooting I just don't know what I'm doing wrong.
My test.html:
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
</div>
</body>
So in my folder I have test.html (the above), one.html, two.html, and three.html. When I load test.html, any tab I select just says Loading... and the html pages never load.
For a more visual explanation, I'm trying to do what this demo is but with html pages:
http://www.coldfusionjedi.com/demos/jquerytabs/test.cfm
Please help haha I'm so lost as to what I'm doing wrong. Thanks in advance :)