We Keep Coding

JQuery UI Datepicker not functioning

I am running into an issue where I feel as though I have everything set up correctly; but, no matter what, the JQuery UI Datepicker will not show up.
I have the following set up in my header (Angular project, header is always loaded no matter the route):
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
As well as this
<script type="text/javascript">
$(function() {
var nativeDateInputIsSupported = Modernizr.inputtypes.date;
if (!nativeDateInputIsSupported) {
$("input[type='date']").datepicker();
}
});
</script>
However when I am in Firefox and click on the following, nothing happens
<tr ng-repeat="revenue in runway.revenues">
<!-- Other table elements go here -->
<td>
<input type="date" id="date" max="{{maxDate}}" class="form-control" ng-model="revenue.date" placeholder="YYYY-MM-DD" required/> </td>
<td>
It also does not show up here
<input type="date" class="form-control" ng-model="user.startofbusiness" name="startofbusiness" id="startofbusiness" required>
I've checked many different StackOverflow threads but even when I follow the methodologies put forth by them, I can't get it to cooperate.
Any tips would be greatly appreciated!

As it turns out, this was implemented correctly, and is actually working. The issue was with regards to having used ng-repeat to generate the table's information dynamically. I am addressing this by writing a custom directive to handle the datepicker.

page does not change from javascript

I am working on a website using Jekyll through github-pages. I am working on some simple javascripts to make a random number generator, but they aren't able to change values on the page.
The page has the following:
/resume/index.html
<form>
<input type="text" name="#d" maxlength="3" value="1" />
<div class="dice_text">d</div>
<input type="text" name="d#" maxlength="2" value="4" />
<button type="button" name="rollme" onclick="roll()">roll</button>
<div class="dice_text"> : </div>
<input type="text" id="dieresult" readonly />
</form>
/resume/roll.js
document.getElementById('dieresult').setAttribute('value', '3') ;
function roll() {
alert("rolled!");
}
For some reason I don't understand, the roll() function will get called and give an alert when you press the button, so the site seems to be incorporating the javascript file, but it refuses to alter the page to display a number in the read only field.
My repo is online at github, and the problem site url is here.
EDITED: corrected 'id' vs 'name' issue but page still won't change the value of 'dieresult'

You're mistaking the name attribute with the id attribute
When you attempt to grab that element using document.getElementById, it will return null.
Making the id dieresult should fix this. I highly suggest getting cozy with your browser's inbuilt JavaScript console - you pick up on minor mistakes like this very quickly!

Your <input type="text" name="dieresult" readonly /> does not have an ID, which is what you are looking for in the line document.getElementById('dieresult').setAttribute('value', '3') ;
If you change the <input type="text" name="dieresult" readonly /> to <input type="text" id="dieresult" readonly /> and place this in the roll() function it should work just fine

your input has a name but you query it by id, change it to this:
<input type="text" name="dieresult" id="dieresult" readonly />

You have a 404 on jquery. Fix this by putting a jquery in your roll folder.
And, you can try to execute you code once everybody is onboard
$( document ).ready(function() {
document.getElementById('dieresult').setAttribute('value', '3') ;
});
See http://learn.jquery.com/about-jquery/how-jquery-works/#launching-code-on-document-ready

Can't assign a new value to my autocomplete box

I've created a search page that can be toggled between french and english. So when the user searches a record and toggles to french it displays the same record they were viewing on the english page.
What I want to do is display the record name in the search box when the page is toggled.I assumed it was as simple as doing a $('#inputID').val(record); but it doesn't seem to be working. I've alerted the record name and it works fine, so I'm stumped. All the scripts are linked correctly as well so that's not the problem.
Autocomplete Box Code
<div id="ui-widgit">
<label for="searchParams">
<h1>Search All Programs (By Screen Number or By Error Code):</h1>
</label>
<input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" />
<input type="button" value="Search" name="searchBtn" class="btn_Design" onclick="showSearch(inputID.value)"/>
</div>
Try to change the value of inputID with this
$('#inputID').val(recordToggle);
also have tried this:
$('#inputID input').val(recordToggle);

It is hard to tell with your presented markup but I am assuming you are trying to change the value of $('#inputID') after the page refreshed. It is important where you put this code. If it is placed before <input type="text" id="inputID" name="inputID" value="" class="ipt_Design" style="width:255px;" /> you will not return anything with $('#inputID') so you will change the value of nothing to your text. It will give no error. To fix this you can use:
$( document ).ready(function(){
$('#inputID').val(recordToggle);
});
Be sure to read about jQuery's ready function because load may be the better choice.
If this doesn't fix your problem let me know. I will update my answer.

Multiple Google CSE (Custom Search Engine) Boxes on Same Page

I am trying to implement two (different) Google CSE search boxes on the same page. The issue is that only the first instance works properly. For example, a sitewide search box in the header, then on certain pages, a 2nd search box that searches within a narrow silo of the site, etc.
This doesn't work properly in that with using the google-generated code for each box, they both get the same form ID, which is obviously not valid. This causes the google watermark branding to fail to appear in box #2, and also some auto/google generated variables fail to generate for the 2nd box also, such as the ss parameter (search session).
Now, the search itself works in both boxes, e.g. user searches, is taken to correct results page, and correct results are shown.
I am just trying to resolve this issue: how can I cause the 2nd form to get a different ID value (and still work properly - as google's javascript looks for the ID cse-search-box) I have tried adding a unique identifier to the ID and NAME attributes of the <form> element, but that caused the google.com javascript to malfunction (as I believe it looks for `cse-search-box' only)
Code is as follows:
search box 1:
<form id="cse-search-box" name="cse-search-box" class="search searchHeader" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:000" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
search box 2:
<form id="cse-search-box" name="cse-search-box" class="search searchWebDirectory" method="get" action="/search">
<input type="hidden" name="cx" value="partner-pub-0000000000000000:111" />
<input type="hidden" name="cof" value="FORID:10" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" id="q" class="text_input" />
<input type="submit" name="sa" value="Search" class="submit" />
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>

From: http://www.google.com/cse/docs/cref.html
The parameter in /coop/cse/brand named "form" outputs the first getElementById in the code. As such, using http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en will create a cse-search-box-targetted code, whilst giving it box2 will trigger on a different ID. The keyword searchbox_demo is reserved.
Give it a go if you'd like to: http://jsfiddle.net/JTV6f/1/ . Considering what you are doing, however, if I were you, I'd switch to either the V1 or V2 APIs.

This is a tested solution. Took me a while but I'm slow and I don't use CSS all the time.
Use the V1 code. When you select Get Code on the setup screen there is an option for the V1 code.
Put your search code in a div
div tag
searchcode
end div tag
Make your cse variables unique. That will be two places at the top of the code.
div id='cse'
and a little lower
customSearchControl.draw('cse', options);
For each search these should be the same but different than the other searches. I used cse0, cse1, cse2.
This will fix the searches so each search will work as specified but they will still share the same CSS.
So scope your styles with the scoped attribute.
style type='text/css' scoped
Do this for each search code. Now your searches can have their own look and feel, color, etc.
http://deltaboogie.com/search
Thanks,
Hairy Larry

javascript input focus

<form id="commentform" method="post" action="wp-comments-post.php">
<input type="text" aria-required="true" tabindex="1" size="22" value=""
id="author" name="author">
</form>
I set default value "visitor" to the input box. When focus is in text box or mouose enters it, I want to hide "visitor" string and want to show it when it loses focus or mose moves out.

Try using the HTML5 placeholder attribute:
<input type="text" aria-required="true" tabindex="1" size="22"
placeholder="visitor" id="author" name="author">
While browser support is not 100% there yet, this will give you a standard way to achieve what you're trying to achieve, without going through unnecessary hoops.
Another thing you can try is to overlay the input element over some text and make it transparent/translucent when not in focus and opaque when in focus/filled.
As of today, Tumblr's login page uses this trick:
<div class="input_wrapper" id="">
<label for="user_password">Password</label>
<input type="password" id="user_password" name="user[password]" data-validation-type="password" value="">
</div>
Through CSS magic this becomes:

Looks like you are using WordPress, so you have the jQuery library on your site.
You can use my jQuery plugin to achieve this.
Example
jQuery
$('#author').inputLabel({
customLabel: 'Visitor'
});
In this case, I had to specify the label myself, but the plugin works without this by finding the relevant label element to the input, which should be present for accessibility.
jsFiddle.

If you are up to HTML 5 yet then try this:
<script type="text/javascript">
var prompt="visitor";
var txt=document.getElementById("author");
txt.onfocus=function(){txt.value='';}
txt.onblur=function(){
if(txt.value==''){
txt.value=prompt;
}
}
</script>

Ates Goral's answer looks very interesting. please try it first shot. this is an alternative if you do not want to sweat..:)
i would suggest using a watermark plugin. there are many available.
have used this plugin before. worked fine. gives you nice control.
the plugin requires jQuery

Though I too would use jQuery or CSS and a pseudo-class (:focus)....
Here's an easy JS solution that does exactly what you're after. Again, I wouldn't recommend this approach for more than one or two input fields.
<input type="text" value="Visitor" onFocus="this.value='';" onBlur="this.value='Visitor';" id="author"/>