Develop Reference

How to hide an element only if it matches specific hash?

I'm trying to hide a form only if it's on the root site, or on the specific hash https://www.example.com/#uno. My code below is causing the form is not show on all the subpages (/#dos, /#tres, etc). Can someone help me understand what is happening?
$(function(){
if (location.hash == "" || location.hash == "#uno"){
$("#form").hide();
} else {
$("#form").show();
};
}());

This is because you hide the form once, but you don't make it reappear until you reload the page. (You only check the hash once, when loading the entire page, not when the hash changes.
function showHideForm() {
if (location.hash == "" || location.hash == "#uno"){
$("#form").hide();
} else {
$("#form").show();
};
}
window.onhashchange = showHideForm;

Google Dart Core Pages Clear Children

I'm attempting to clear the children elements on a page whenever a page is changed. However, with the current method of doing so, nothing on the page always changes, the same properties remain. Right now, I have dynamically generated inputs that have different data in them depending on which tab is selected and displays the appropriate core-page (https://www.polymer-project.org/docs/elements/core-elements.html#core-pages). Is there a way to reset the core-page each time so that the different inputs for each tab will show up appropriately? The children.clear() may not be the best approach. Please let me know if you need more information.
#observable int pageChangeCount = 1;
void pageChanged(oldValue, newValue) {
var pages = document.querySelector('core-pages');
pageChangeCount++;
if (page == 0) {
if(pageChangeCount %2 != 0)
{
pages.children.clear();
}
Display(true);
} else if (page == 1) {
if(pageChangeCount %2 == 0)
{
pages.children.clear();
}
Display(false);
}
}

I actually got it by going through all of the elements:
pages.children.removeWhere( (Element e) {
if( e.nodeName != "ELEMENT YOU ARE LOOKING FOR") {
return true;
}
else {
return false;
}

How to make web form appear after previous web form has data entered into it?

I'm looking to make a second web form appear after the first web form has something entered into it. I'm currently using a sinatra set up with slim as the templating engine, and pure javascript.
input#topic value="Enter topic" onfocus="this.value = this.value=='Enter topic'?'':this.value;" onblur="this.value = this.value==''?'Enter topic':this.value;"
input#subtopic value="Enter subtopic" onfocus="this.value = this.value=='Enter subtopic?'':this.value;" onblur="this.value = this.value==''?'Enter subtopic':this.value;"
The above are my two forms, the onfocus and onblur are to make the form value disappear and reappear if clicked on.
My javascript is as follows.
function checkField(field) {
if(field.value != null) {
document.getElementById('subtopic_form').style.display = 'true';
} else {
document.getElementById('subtopic_form').style.display = 'false';
}
}
This doesn't work, and part of the problem is that when I add to the input tags
onchange="checkField(this)"
then I get a function unused message inside my javascript file, even though I have specified in my home.slim file
script src="/js/application.js"
Any help to get this to work as I need is much appreciated.
I'm open to using jquery for this, and if there was any way to make the second form have an effect upon appearance that'd be awesome.
-Adam

The display property accepts several values, but true and false are not among them. To get a full list, go to MDN or w3schools or MSDN. But I can tell you right now, that the values you most likely want are "none" and "block", as in:
function checkField(field) {
if(field.value != null && field.value != '') {
document.getElementById('subtopic_form').style.display = 'block';
} else {
document.getElementById('subtopic_form').style.display = 'none';
}
}
with jQuery, though, this code could be quite a bit cleaner!
function checkField(field) {
if (field.value != null && field.value != '') {
$("#subtopic_form").show();
} else {
$("#subtopic_form").hide();
}
}
or even
$("#topic").change(function(){
if ($(this).val()) {
$("#subtopic_form").show();
} else {
$("#subtopic_form").hide();
}
});
and if you want effects, consider jQuery's .fadeOut() or .slideUp() in place of .hide()
Note that I added field.value != '' to your code. Also, it would be best to use !== instead of !=.
:)

Is there any way to programmatically call and execute pjax from within my javascript file?

I have a function that waits for a user to click on an input of type text and then waits for the user to press the down and up arrow keys. When the user presses the down and up arrow keys the function hoverDown() is called which essentially programmatically hovers over tables rows. When enter is pressed, window.location is called and the appropriate page is loaded. The problem is that I'm using pjax throughout my application to dynamically load the content and push the new url without a page refresh. When I call the window.location function, the pjax no longer works, but instead, the correct url is loaded and a full page refresh occurs - the very thing I'm trying to avoid. Is there any way to programmatically invoke and execute pjax from within my function? Relevent Code:
//HTML
<div id="main">
<input type="text" class="table-search" id="search" autocomplete="off" placeholder="Search Clients..." /><table class="table" id="tblData">
<thead><tr><th>Name</th> <th>Title</th></tr></thead>
<tbody id="tblDataBody">
<tr><td>Scott</td> <td>Client</td></tr>
<tr><td>Billy</td><td>Client</td></tr>
<tr><td>George</td><td>Client</td></tr>
<tr><td>Sara</td><td>Client</td></tr>
<tr><td>John</td><td>Client</td></tr>
<tr><td>Megan</td><td>Client</td></tr>
<tr><td>Ben</td><td>Client</td></tr>
<tr><td>Jully</td><td>Client</td></tr>
<tr><td>Bethany</td><td>Client</td></tr>
<tr><td>Alen</td><td>Client</td></tr>
<tr><td>Jane</td><td>Client</td></tr>
<tr><td>Alice</td><td>Client</td></tr></tbody></table>
</div>
//Javascript
$(document).ready(function(){
$("#main").on("keydown", "#search", hoverDown);
});
function hoverDown(e) {
var $tbl = $('#tblDataBody');
var $cur = $('.active', $tbl).removeClass('active').first();
if (e.keyCode === 40) { //down
if ($cur.length) {
$cur.next().addClass('active');
} else {
$tbl.children().first().addClass('active');
}
} else if (e.keyCode == 38) { //up
if ($cur.length) {
$cur.prev().addClass('active');
} else {
$tbl.children().last().addClass('active');
}
} else if (e.keyCode == 13) {
if ($cur.length) {
window.location = $cur.find("a").attr("href");
}
}
}
//For the sake of completeness, CSS:
.active {
background-color: yellow;
}
If you want to see this code in action to get a better understanding, you can check out this jsFiddle.
And again, I'm trying to use pjax to load the content.

I don't know how I missed this in the documentation the first time around, but I found a simple way to manually invoke pjax.
} else if (e.keyCode == 13) {
if ($cur.length) {
// manually invoke pjax after enter has been pressed
var $url = $cur.find("a").attr("href");
$.pjax({url: $url, container: '#main'});
}
}

After reading over the doucmentation you linked, I believe you should be using the $.pjax.click function instead of assigning your URL to window.location:
var container = $(this).closest('[data-pjax-container]')
$.pjax.click(event, {container: container})

Have a look at Djax : Dynamic Pjax
https://github.com/beezee/djax

java script is not working in mozila

I have added some javascript in html page for input validation.same page is working correct in IE and chrome but in mozila its not working.The problem is when user inputs invalid data its supposed to show alert msg box and when user clicks OK it should return false to form...BUT mozila is not waiting for alert box it just shows alert box for 5-6 sec and then goes to next page defined in form action="nextpage.php"
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(oldpassword, "<b>Error: </b>Please enter the Old Password!") == false)
{ changeColor("oldpassword"); return false; }
else if (valid_length(newpassword, "<b>Error: </b>Please enter the New Password!!") == false)
{newpassword.value=""; changeColor("newpassword"); return false; }
else if (valid_length(cnfpassword, "<b>Error: </b>Please enter the Confirm Password!!") == false)
{cnfpassword.value=""; changeColor("cnfpassword"); return false; }
else if (document.getElementById('newpassword').value != document.getElementById('cnfpassword').value)
{changeColor("newpassword");cool.error("<b>Error: </b>Passwords entered are not same!");
newpassword.value="";cnfpassword.value="";return false;}
}
}function validate_required(field, alerttxt)
{
with (field)
{
if (value == null || value == "")
{
cool.error(alerttxt);return false;
}
else
{
return true;
}
}
}
cool.error is nothing but CSS nd Js for alert box.I thing there is not any problem in my code weather problem is in some browser settings.Is it so??? because it is working fine in IE and Chrome.

You're using a non-standard IE-only behavior that creates global variables for every element with an ID.
To fix it, add a global variable for each element that you use:
var oldpassword = document.getElementById("oldpassword");
Also, you should never use Javascript's with block.
It is very different from VB's with block, and should not be used unless you truly understand its pitfalls and shortcomings. It will also slow down your code.

You could also use some javascript library to get past browser issues. I'm rooting for jQuery.