We Keep Coding

How do I tell a Javascript method to wait until after binding values to execute in DotVVM?

I use a value binding (<dot:HtmlLiteral Html="{value: BannerHTML}" class="mainBanner"/>) to generate some of my page content based on a number of variables.
I also need to run some javascript on the generated HTML to fix a few minor niggles, like matching font size for unusual scaling scenarios and the like. As standard, I place executable javascript at the end of an HTML document.
Generated HTML in one of these scenarios:
<div class="mainBanner" data-bind="html: BannerHTML">
<div class="mainBanner-upper">some text</div>
<div class="mainBanner-face" id="mainTitle">some other text</div>
<div class="mainBanner-lower">some more text</div>
</div>
JS to operate on that HTML:
(requires https://github.com/adactio/FitText.js)
window.fitText(document.getElementById("mainTitle"));
As far as I can see, the javascript executes before the HTML is generated, and javascript that is executed on the element returns Cannot read property 'xyz' of null. How do I tell it to wait? I tried both binding the javascript file to a resource, and simply writing it in with <script> tags at the end of the body element without success.

As your problem seems to be DOM related, I can propose you two approches.
Your javascript must check and wait for DOM. On which I strongly suggest you to read this answer to ...how to call a function when the page/DOM is ready...
Add your script dynamically after your data is binded (I'm not really sure about this)
Good luck.
EDIT
So I went and took a look to the dotvvm documentation to look for events calls and noticed something interesting :
Every DotVVM page includes Dotvvm.js which defines dotvvm in the global scope. This object can be used to access viewmodel and react to various page events.
This allows you to access specifics events fired by DOTVVM, you only have to find the one you need in your case. I provided you with an example below.
You could try something like this (the event may no be the one you need) :
<script>
//By subscribing to the event, your code will only be executed
// if "init" event is fired by dotvvvm
dotvvm.events.init.subscribe(()=>{
window.fitText(document.getElementById("mainTitle"));
//basically enclose the content of your script tag with this.
});
</script>
Please do read the documentation as I may have omitted something ? DOTVVM Javascript Events

JQUERY: ID not found, just defined before

I've got a problem I don't understand.
I want to create a datepicker with JQUERY (UI-1.9.1 + JQ 1.8.2)
I define the
<input id="date1" .... value="">
DateSelClickHere
"DateSelClickHere" should be a picture later on.
If you now click to the empty datefield, it just works fine.
If you click to the text (or image),I get this: [object Object]
Sample here:
http://jsfiddle.net/3DH3L/
I don't get it?!?
PS: I will try it with the property "image" - but - this is the crap - it's not my code and I just start with this project, so I first search for the "easy way" to fix the errors.

The problem is that you are using a JavaScript URIs. The purpose of these is to generate a document to display by running some JavaScript.
If you just want to run some JS, then use a button. Use a link only if you want to link somewhere.
<input type="button" value="DateSelKlickHere">
You could use an onclick attribute, but you'd be better off binding your JS with JavaScript.
$('#date1 + input[type="button"]').on("click", function (evt) {
$('#date1').focus();
});

Invoking jQuery function without an element

So, I use jQuery quite extensively and I am well aware of the "right" way to do the below, but there are times where I want to solve it in a more generic way. I'll explain.
So, I may have a link, like this: <a href='menu' class='popup'>Show menu</a>. Now, I have a jQuery function that fires on click for all a.popup that takes the href-attribute and shows the <div id='menu'></div> item (in this case). It also handles URL's if it can't find a DOM item with that ID.
No problem here. But, there are times when I don't have the same control over the coe where I can create a selectable target that way. Either because the code isn't created by me or because it is created through a chain of function that would all need a huge ovrhaul which I won't do.
So, from time to time, I would like to have this code:
Show menu
This would be in a case where I can only submit the label and the HREF for a link. No class, no nothing.
Problem here is that the function popup() has no idea about what element invoked it, and in most cases that's not a problem for me, since I only need to know where the mouse cursor was upon invokation.
But in some cases, I use someone elses jQuery functions, like qTip or something else. so I still want to fire off qTip(); when clicking a link that runs this JS function, but what do I attach it to to make it show? I can't just runt $().qTip(); because that implies $(this) and "this" is undefined inside the function.
So how do I do it? Any ideas?

Is there anyway you change the javascript method to javascript:popup('menu', this);? I've used this method successfully many times.

Instead of referring to "this" try referring to $('a:focus') to refer to the link that was clicked.
Here's a quick and, as #Crescent Fresh would add, dirty (☺) sample:
<body>
<p>Show popup()</p>
<div id="menu" style="display:none">Today's menu</div>
<script type="text/javascript">
function popup(elm) {
$('#' + elm).show();
alert( $('a:focus').text() )
}
</script>
</body>
I tried just ":focus" but IE7 returned too much content. I tested this in FF 3.6.3, IE7, Chrome 4.1.249.1064 (all on Windows) and it seems OK, but I see now (when I was just about to hit "Post Your Answer") this relies on the browser's native support for querySelectorAll - see this jQuery Forum post ":focus selector filter?" and the jQuery.expr entry in the jQuery Source Viewer (where it appears Paul's idea was not implemented).

How about
Show menu
Once you get the event object you can virtually do anything to it.

how to hide a div in javascript with onblur - rails

i have a link_to_function that shows a hidden div. now i would like to hide this div if the user clicks out of this div(onBlur or onclick). when should i call this function and how? this is my function that shows the hidden div:
<%= link_to_function "ShowHorse", "$('horsePic').show();" :class =>"links_02"%>
shoud it be from inside this function? or should i call an external action with link to remote to look after events on the site? i would be able to use function onblur if it references a form element(text_field or sth). but i dont know how or when to put code for just div element. i was trying sth like:
:onclick=>"if($('loginContainer').onClick) {} else {$('loginContainer').hide}"
i dont know much javascript so i am kind of a lost here. was checking google but wasnt able to find anything useful. any help would be greatly appreciated!

It appears that you're using Prototype, so you can use the built-in JavaScript helpers in Rails to do this for you.
One thing to be careful with in JavaScript versus Ruby is that functions are not called unless the brackets are included. Without the brackets you get a reference to the function instead.
// Check to see if a function is defined
if ($('something').onClick)
true;
// Check to see if a defined function returns a true value by calling it
if ($('something').onClick())
true;
Typically you can just introduce functions in your link_to definition as required.

You should look at defining a click event on the whole body of the page. If a click isn't caught on the div you're watching, close the div. You might need to look at capturing and bubbling javascript events, to get the right click target.
http://www.quirksmode.org/js/events_order.html Very good resource for understanding how a click will move through your page.

Using an HTML button to call a JavaScript function

I am trying to use an HTML button to call a JavaScript function.
Here's the code:
<input type="button" value="Capacity Chart" onclick="CapacityChart();">
It doesn't seem to work correctly though. Is there a better way to do this?
Here is the link:http://projectpath.ideapeoplesite.com/bendel/toolscalculators.html click on the capacity tab in the bottom left section. The button should generate an alert if the values are not changed and should produce a chart if you enter values.

There are a few ways to handle events with HTML/DOM. There's no real right or wrong way but different ways are useful in different situations.
1: There's defining it in the HTML:
<input id="clickMe" type="button" value="clickme" onclick="doFunction();" />
2: There's adding it to the DOM property for the event in Javascript:
//- Using a function pointer:
document.getElementById("clickMe").onclick = doFunction;
//- Using an anonymous function:
document.getElementById("clickMe").onclick = function () { alert('hello!'); };
3: And there's attaching a function to the event handler using Javascript:
var el = document.getElementById("clickMe");
if (el.addEventListener)
el.addEventListener("click", doFunction, false);
else if (el.attachEvent)
el.attachEvent('onclick', doFunction);
Both the second and third methods allow for inline/anonymous functions and both must be declared after the element has been parsed from the document. The first method isn't valid XHTML because the onclick attribute isn't in the XHTML specification.
The 1st and 2nd methods are mutually exclusive, meaning using one (the 2nd) will override the other (the 1st). The 3rd method will allow you to attach as many functions as you like to the same event handler, even if the 1st or 2nd method has been used too.
Most likely, the problem lies somewhere in your CapacityChart() function. After visiting your link and running your script, the CapacityChart() function runs and the two popups are opened (one is closed as per the script). Where you have the following line:
CapacityWindow.document.write(s);
Try the following instead:
CapacityWindow.document.open("text/html");
CapacityWindow.document.write(s);
CapacityWindow.document.close();
EDIT
When I saw your code I thought you were writing it specifically for IE. As others have mentioned you will need to replace references to document.all with document.getElementById. However, you will still have the task of fixing the script after this so I would recommend getting it working in at least IE first as any mistakes you make changing the code to work cross browser could cause even more confusion. Once it's working in IE it will be easier to tell if it's working in other browsers whilst you're updating the code.

I would say it would be better to add the javascript in an un-obtrusive manner...
if using jQuery you could do something like:
<script>
$(document).ready(function(){
$('#MyButton').click(function(){
CapacityChart();
});
});
</script>
<input type="button" value="Capacity Chart" id="MyButton" >

Your HTML and the way you call the function from the button look correct.
The problem appears to be in the CapacityCount function. I'm getting this error in my console on Firefox 3.5: "document.all is undefined" on line 759 of bendelcorp.js.
Edit:
Looks like document.all is an IE-only thing and is a nonstandard way of accessing the DOM. If you use document.getElementById(), it should probably work. Example: document.getElementById("RUnits").value instead of document.all.Capacity.RUnits.value

This looks correct. I guess you defined your function either with a different name or in a context which isn't visible to the button. Please add some code

Just so you know, the semicolon(;) is not supposed to be there in the button when you call the function.
So it should just look like this: onclick="CapacityChart()"
then it all should work :)

One major problem you have is that you're using browser sniffing for no good reason:
if(navigator.appName == 'Netscape')
{
vesdiameter = document.forms['Volume'].elements['VesDiameter'].value;
// more stuff snipped
}
else
{
vesdiameter = eval(document.all.Volume.VesDiameter.value);
// more stuff snipped
}
I'm on Chrome, so navigator.appName won't be Netscape. Does Chrome support document.all? Maybe, but then again maybe not. And what about other browsers?
The version of the code on the Netscape branch should work on any browser right the way back to Netscape Navigator 2 from 1996, so you should probably just stick with that... except that it won't work (or isn't guaranteed to work) because you haven't specified a name attribute on the input elements, so they won't be added to the form's elements array as named elements:
<input type="text" id="VesDiameter" value="0" size="10" onKeyUp="CalcVolume();">
Either give them a name and use the elements array, or (better) use
var vesdiameter = document.getElementById("VesDiameter").value;
which will work on all modern browsers - no branching necessary. Just to be on the safe side, replace that sniffing for a browser version greater than or equal to 4 with a check for getElementById support:
if (document.getElementById) { // NB: no brackets; we're testing for existence of the method, not executing it
// do stuff...
}
You probably want to validate your input as well; something like
var vesdiameter = parseFloat(document.getElementById("VesDiameter").value);
if (isNaN(vesdiameter)) {
alert("Diameter should be numeric");
return;
}
would help.

Your code is failing on this line:
var RUnits = Math.abs(document.all.Capacity.RUnits.value);
i tried stepping though it with firebug and it fails there. that should help you figure out the problem.
you have jquery referenced. you might as well use it in all these functions. it'll clean up your code significantly.

I have an intelligent function-call-backing button code:
<br>
<p id="demo"></p><h2>Intelligent Button:</h2><i>Note: Try pressing a key after clicking.</i><br>
<button id="button" shiftKey="getElementById('button').innerHTML=('You're pressing shift, aren't you?')" onscroll="getElementById('button').innerHTML=('Don't Leave me!')" onkeydown="getElementById('button').innerHTML=('Why are you pressing keys?')" onmouseout="getElementById('button').innerHTML=('Whatever, it is gone.. maybe')" onmouseover="getElementById('button').innerHTML=('Something Is Hovering Over Me.. again')" onclick="getElementById('button').innerHTML=('I was clicked, I think')">Ahhhh</button>