How can I select html element or div by Id using yui , How can I migrate the following code from Jquery to YUI
jQuery("#resultTable").text("");
Where resulttable is a div.
Thanks.
There's a nice table comparing YUI3 and jQuery here: http://jsrosettastone.com/
As you can see, it looks very similar:
// jQuery
jQuery('#resultTable').text('');
// YUI
Y.one('#resultTable').set('text', '');
Related
I am using Express with Pug as a view engine.
Pug renders comments in the HTML. For example:
div
// comment
p Hello
Would be rendered as:
<div>
<!--comment-->
<p>Hello</p>
</div>
How would I disable this functionality and instead strip them from the template so that they aren't visible in the rendered HTML?
I can see there is this pug-strip-comments package, but there is no documentation whatsoever for Express.
I want to avoid using something like a middleware to strip comments.
Thank you.
You can strip pug comments by using the following code. Just add //- instead of just // and it will strip it from from the rendered HTML.
//- will NOT output within markup
p foo
p bar
// will output within markup
p foo
p bar
You can take a look at the comments documentation for pug here:
https://pugjs.org/language/comments.html
I am trying to use Angular Formly to render a datalist without success. With what I have, it renders the text input element but drops the datalist markup.
The JS Bin demonstrating the problem is at http://jsbin.com/vamalasiru/edit?html,js,output.
Any thoughts?
The answer is to wrap the template in a div being that the template manipulator will only use the first element in a template if there is not root element.
The JS Bin has been updated to show the working solution.
I am working with a node-backbone application. I create dynamic content and add jquery UI draggable to the content or elements I create. However, when my template system renders, my elements will not even move. The paths are correct. I use a class to make a reference to those elements and the draggable method.
Can someone tell me what is the correct way to include the jquery ui and jquery scripts so they load correctly?
layout jade - index.jade - template (extend layout) rendered in the index.jade
In my app I have a jquery module which is connected to backbone, but for some reason the jquery UI does not connect with it and consequently I have to add a jquery script next it. But then the jquery will not work when I create the dynamic elements with backbone into my templates. I use .html() to add them to template.
This is layout.jade
!!! 5
html(lang="en")
head
title project
meta(name='viewport', content='width=device-width, initial-scale=1.0')
link(rel='stylesheet',href='/styles/bootstrap.css')
link(rel='stylesheet',href='/styles/styles.css')
body
.navbar.navbar-inverse
.container
button.navbar-toggle(type='button', data-toggle='collapse', data-target='.nav-collapse')
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href='#')
img(src='/img/greatlogowhite.png', width='300')
.nav-collapse.collapse
ul.nav.navbar-nav
li.active
a(href='#')
img(src='/img/house.svg', width='70')
li
a(href='#about')
img(src='/img/pen.svg', width='70')
li
a(href='#contact')
img(src='/img/search.svg', width='70')
li
a(href='#contact')
img(src='/img/chat.svg', width='70')
This is index.jade
block content
block scripts
extends layout
block content
div#content
block scripts
script(data-main='js/boot', type='text/javascript',src='/js/libs/require.js')
script(type='text/javascript', src='http://code.jquery.com/ui/1.10.3/jquery-ui.js')
This is how I try to use jquery ui
<script>
$(document).ready(function() {
$( ".pic" ).draggable();
});
</script>
Actually, I made it to solve the problem. Whoever uses backbone, node.js, and require.js, remember to include jquery and jquery UI as libraries with require, and when creating dynamic elements with backbone such as:
$('#content').append(html); inside backbone call jquery UI
$('.drag').draggable();
I must not be using jsfiddle correctly. Because I am having problems with a more complex project I have decided to go back to the intro and see if there is something I missed.
I am using PluralSight videos to get up to speed with knockout.
In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work. The fiddle is here
http://jsfiddle.net/SapphireGirl/Bdr55/2/
This is a very simple example and I would expect to see the
Hello, bob in the run box but the name is not binding the the text in the view model even in jquery like it is shown in the demo.
He is using jquery 1.7 while I am using jquery 2.0
Why won't my name bind?
Something silly I am sure.
javascript:
$(function(){
var viewModel = {
name: "bob",
changeName: function() {
this.name = "steve";
}
};
ko.applyBindings(viewModel);
});
Thanks in advance
You say
In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work.
but in your code sample you're explicitly referencing ko - the Knockout object.
The problem is that you want to use both JQuery and Knockout - so far you've chosen 'JQuery 2.0' as the framework for your page, but you haven't loaded Knockout anywhere.
Go to the 'External Resources' section on the left, and paste 'http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js' (one of the Knockout CDN urls - from their download page) and press the '+' to add it to your jsfiddle.
Press 'Run' and now everything should work.
I'm trying to use jsPlumb with the YUI framework to make some divs draggable and connected. However, I find when I try to make the divs draggable but contained within their parent, using:
jsPlumb.draggable("window2", {
containment:"parent"
});
the div is still draggable outside the bounds of its parent. If I set the parent's css to "overflow: hidden" I won't see the div when it's dragged beyond the parent's bounds but I'll still see the connector to the div, which looks really awkward.
To see this all in a fiddle: http://jsfiddle.net/xXYwX/3/
Does anyone know if there is a way to use jsPlumb's draggable function with YUI and still restrict the movement of the draggable div?
Thanks!
First make the div draggable using jsPlumb:
jsPlumb.draggable("window2");
Then add necessary jsPlumb end points:
jsPlumb.addEndpoint("window2", { ----});
Then add the HTML draggable like
$('#window2').draggable({
containment: 'parent'
});
Its working for me..
No, it seems not possible with the yui version of jsPlumb. The 'dd-constrain' module is missing and i found no way to plug this module in, because you can't get access to the Y.DD.Drag object.
You can send a feature request to the creator or do a pull request on github.
Here is a plain yui example with a constrained drag:
http://yuilibrary.com/yui/docs/dd/constrained-drag.html
make your container overflow: visible in css