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.
Related
I am trying to change the p:growl position of primefaces through the .ui-growl class to use position: sticky. However, since the component is rendered at the end in body, the relative behavior of the position does not work as I would like.
Is there any way to use the sticky position for this component?
Or some way to get the component to render where it is declared?
PrimeFaces 5.1;
Mojarra 2.1;
Disclamer: I tried this with the PF 7.0 showcase, but I think the basics also work with the 5.1 version.
You effectively have 4 options. The latter three all need you to inspect the javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source is irrelevant here) and for the first solution it helps to see how the component works, but inspecting with a browser developer tool is sufficient (that is how I did it).
Basic analysis with or without looking at the source
This is a variant on your "Or some way to get the component to render where it is declared?". Since on the client side, it is all plain html, css and javascript, you can manipulate with al tools available on the client-side.
You can see that the main part of the grow is html technically rendered where it is declared. Check the PrimeFaces showcase and you'll see
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
right inside the form where it also is in the xhtml. The javascript of the component creates the client side dom things, amongst which is the container that you see right before the end of the body (from the showcase)
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
This last piece is html is where the individual growls are added to when they need to be rendered and hence the part that makes the component in most normal cases behave correctly but needs to be done differently in your case.
Solution 1, pure client-side component agnostic solution
Effectively this is as simple as moving this piece of html in the dom, see How to move an element into another element?.
In the online showcase I put the following jquery code in the browser developer tool console
$("#j_idt700\\:growl_container").prependTo(".layout-content");
And added the following css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
And it worked.
The jquery should be put somewhere in your page where it runs after the component javascript is executed, so best is to do it right before the end of the body.
Keep in mind that the j_idt700 prefix is the dynamic id of the form in the showcase (it does not have a fixed id here), but you can also use different selectors based on the classes or whatever)
Solution 2, changing the source 'locally'
In the javascript source, you can see where the container is technically rendered
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
Changing the this.jq.appendTo($(document.body)); in some way to have it appended to the current html node ('this'?) will make it work too. Regarding the overriding, you have two options
How do I find and/or override JavaScript in Primefaces component based on widgetVar?
Override a method from a Primefaces specific widget
Solution 3 Changing the source server side
Effectively you do the first part of #2 but patch the source and create a new custom PrimeFaces version
Solution 4 Make this feature avaiable for others too
What can be done here is to create a new attribute on the component and patch the source in some places so it is configurable to have the component behave as it is now or as sticky (they changed the existing 'sticky' attribute to 'keepAlive' in 7.0.x so sticky is avalable again ;-)). Of course this should be submitted as a patch then...
i have purchased a website template and i need help concerning the website translator using google translate.
The translate works well but after selecting a language, a google drop down appears and when i scroll down, it still appears and hides my main header titles.
Can something be done like removing this drop down when i translate a language or can someone suggest me another method.
Thanks a lot.
The problem is the the contents in this bar are inside of an iframe, So you cant use javascript to trigger the close button.
Solution
Once the user chooses a language the an iframe with a class named 'goog-te-banner-frame'
is added.
You can use javascript to detect if it present and hide it
$(document).ready(function(){
if($('.goog-te-banner-frame').length > 0){//check if the iframe exsits
$('.goog-te-banner-frame').css('display','none');
$('body').css('top',0);//google adds top to the body so the bar wont cover website content
}
});
because this code uses jquery. make you sure you load it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
I need to do the following,
I have a <select> (a list of team names), when the user selects a team, I get relevant information re: the team and display it.
How do I do this in jade?
I'm trying the following, (but I'm wrong obviously, I don't see a lot of documentation out there).
Briefly, I'm doing a include test.jade on my main page, and a res.render('test', {team: team_obj});
jade:
h1 #{team}.name
h2 #{team}.homeGround
h3 #{team}.manager
h4 #{team}.aka
nodejs:
collection.findOne(query, function(err, team_obj){
res.render('test', {team: team_obj});
});
I'm getting the information correctly in team_obj.
Get the following error when I run the app,
team is not defined
Now this is happening because test.jade is getting rendered before I feed it the team_obj.
Questions:
1) Am I doing this right? is include the correct way of partially rendering jade views? if yes, how do I make sure it renders only when the user has selected an option?
2) Is there a partial views concept in jade I'm unaware of?
1) you should use #{team.name}
2) you can't change the team object once the selector is changed. the template was rendered once with the database result. - such functionality should be handled by client side JavaScript and AJAX calls. partials in templates are just a way to share common pieces of templates, and its done in Jade via include.
I don't know what you're rendering and including and when.. but id you use a template variable like #{team.name} you have to make sure that the template was rendered with the team object.
Putting this code in
$('#hello').click ->
alert 'hello'
in posts.js.coffee in vanilla Rails 3.1 app does not work. The javascript is compiled and loaded before the page so the function isn't bound to its element. There are easy solutions, like manually loading the js on the page rather than using the asset pipeline, or using JQuery .live functions, but it seems like this code should work out of the box. Am I missing something??
I might be pointing out the obvious here, but have you (in jQuery) tried this:
$(function(){
//your code
$('#hello').click(function(){
alert("hello");
});
});
or
$(document).ready(function(){ [...] });
These (atleast under normal circumstances) should prevent any javascript inside from doing anything until the DOM has been loaded.
Hope this helps
Is it possible to make the PrimeFaces's Editor component, right to left?
It seems not to support dir and style attributes... :(
in my experience controls in jsf framework like prime/open/etc.. don't support RTL using html #dir,
usually the interfaces of these controls are built using Javascript, so probably you should work at that level.
Can I suggest you to consider two other alternatives to jsf controls in this case?:
Using a javascript html editor (like elrte, maybe is easier to customize and it has also Arabic translation). http://elrte.org/
Using the Flex html editor (is Flash, if you can, and Flex support RTL for all controls)
F.
Just bumped into this thread by accident,
anyway I remember that i did the RTL with jquery like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("j_idt33:inputtextlist").contents().find('html').attr('dir', 'rtl');
});
had to find the id with firebug , inputtextlist was the id i gave to the editor , and ypu can always use a smarter jquery selector (with suffix match)