I have a problem where my javascript is not working in a separate file, but it is working inline.
This is the working code with my javascript in line. This is in asp.net 4.0.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="FrontEnd.master.cs" Inherits="pigninja.FrontEnd" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script type="text/javascript">
function ShowItem(itemID) {
document.getElementById(itemID).style.visiblity = "visible";
}
function HideItem(itemID) {
document.getElementById(itemID).style.visiblity = "hidden";
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Pigninja Paradox</title>
<link href="../Styles/Styles.css" rel="Stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="pageWrapper">
<div id="header">
</div>
<div id="navigation">
<div id="menu">
<ul>
<li>Home</li>
<li>About Me
<div id="submenu">
<ul>
<li onmouseout="HideItem('submenu');" onmouseover="ShowItem('submenu');"><a href="1983.aspx">
1983</a></li>
<li>1988</li>
<li>1990's</li>
<li>2000</li>
<li>Present</li>
</ul>
</div>
</li>
<li>Programming</li>
<li>Rants</li>
</ul>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="Content" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>
I'd rather be an outlaw then to fall to Babylon law</p>
</div>
</div>
</form>
</body>
</html>
The problem is as soon as I change this to
<script language="javascript" type="text/javascript" src="../scripts/navBarScript.js"> </script>
My code no longer works and I can't for the life of me figure out why.
Make absolutely sure that the src path your of your script is correct, you could always set it as such
src="/scripts/navBarScript.js"
Starting with a / to reference from the base, There is no reason for it to not work
Also, put the external script tag inside the head or just before the closing body tag
I'm not sure why this fixed it, but I ended up changing my script to
function ShowItem(itemID){
document.getElementById(itemID).style.display = "block";
}
function HideItem(itemID){
document.getElementById(itemID).style.display = "none";
}
After these changes my code performed as expected. I do not know how or why. But this resolved my issue.
Related
I am trying to include a jsp file when a button is clicked like so
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#RegisterChildPage').on('click', function() {
$('.content').html("<%# include file="FamilyManagerView.jsp"%>");
});
});
</script>
My problem is in this line $('.content').html(<%# include file="FamilyManagerView.jsp"%>); There is a syntax error and i don't know what is the correct way to write it.
<%# include file="FamilyManagerView.jsp"%> is not included properly because of the <% %>.
This may help you.
Add a DIV to your JSP file which includes your other JSP file and it is initially hidden
Then remove hidden in onlclick function
!document.getElementById('testContainer').hidden - The HTMLElement property hidden is a Boolean which is true and using ! operator you can display the hidden DIV.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Main JSP</title>
</head>
<body>
<div class="row">
<div class="col-12">
<div class="row">
<button class="btn btn-success" onclick="renderElement()">Render Me</button>
</div>
<div class="row mt-2" id="testContainer" hidden>
<!-- Insert your file here -->
<%# include file="test.jsp" %>
</div>
</div>
</div>
</body>
<script>
const renderElement = () => {
document.getElementById('testContainer').hidden = !document.getElementById('testContainer').hidden;
}
</script>
</html>
I am attempting to run an method after the DOM is ready, but cannot access the element. It is coming back as undefined. The code is below. I know the element is accessible because code ran after the DOM elements processes fine. The alert in the separate js file come back undefined. The alert at the bottom of the html returns the correct value.
HTML
<%# Master Language="C#" inherits="test.master"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head runat="server">
<title>test</title>
<link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('<%= varthing %>'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="hdr_toolslct_cursys_payer" runat="server"></span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="hdr_toolslct_name" class="hdr_toolslct_name" runat="server"></span>!
Thing1:
<select id="hdr_toolslct_gp" runat="server">
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="nav" class="nav" runat="server">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
<asp:ContentPlaceHolder id="cntnt_phldr" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help.
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Javascript
function ajaxStuff(vartest) {
alert($("#ftr").html());
}
ViewSource
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>
test
</title><link rel="Stylesheet" href="css/master.css" />
<script type="text/javascript" src="./javascript/jquery-1.10.2.js"></script>
<script type="text/javascript" src="./javascript/master.js"></script>
<script type="text/javascript">
$(ajaxStuff('no'));
</script>
</head>
<body>
<div id="wrapper">
<div id="hdr">
<div id="hdr_logo">
<img alt="Logo" id="hdr_logo_img" src="images/logo.png" />
</div>
<div id="hdr_toolslct">
<div id="hdr_toolslct_wrpr">
<span id="hdr_toolslct_cursys"><span id="ctl00_hdr_toolslct_cursys_payer">Mcaid</span> - <span id="hdr_toolslct_cursys_prov"></span></span><br />
Hello <span id="ctl00_hdr_toolslct_name" class="hdr_toolslct_name">Name Name</span>!
Thing1:
<select name="ctl00$hdr_toolslct_gp" id="ctl00_hdr_toolslct_gp">
<option selected="selected" value="OP1">Option 1</option>
<option value="OP2">Option 2</option>
</select>
Thing2:
<span id="hdr_toolslct_prov_wrpr"></span>
</div>
</div>
</div>
<div id="ctl00_nav" class="nav">
<div id="nav_home" class="nav_tab">Home</div>
<div id="nav_worklist" class="nav_tab">Worklist</div>
<div id="nav_reporting" class="nav_tab">Reporting</div>
<div id="nav_splits" class="nav_tab">Splits</div>
<div id="nav_users" class="nav_tab">Users</div>
<div id="nav_import" class="nav_tab">Import</div>
</div>
<div id="cntnt">
</div>
<div id="ftr">
If you experience issues with this tool, please stop using it. I'm not going to help
</div>
</div>
<script type="text/javascript">
alert($("#ftr").html());
</script>
</body>
</html>
Please bear in mind that the reason you're getting undefined is because the function ajaxStuff is being invoked immediately. If you use any of the following forms, it should work as expected. (), or (arguments) invokes the function right away:
$(ajaxStuff);
Or
$(document).ready(ajaxStuff);
Or
$(function() {
ajaxStuff('no');
});
Or
$(document).ready(function() {
ajaxStuff('no');
});
JS FIDDLE DEMO
Live demo
HTML
<div id="test">hello</div>
JS
$('document').ready(function(){
alert($('#test').html());
});
You forgot the jQuery ready event:
http://api.jquery.com/ready/
Your code might work with:
$( document ).ready(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
Or
$(function() {
// Handler for .ready() called.
alert($("#ftr").html());
});
in the JavaScript part.
Demo
UPDATE:
As this is not working, you should try to analyze the DOM that is generated:
$(function() {
// Handler for .ready() called.
console.log($("body").html());
});
Maybe there IDs are changed? Or something like that? You tell us :D
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script>
$("#local").live('pageinit', function(evt) {
//$(document).ready(function(){
var edit = $('#edit');
edit.append('<li>test1</li>');
edit.listview('refresh');
});
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#local">
<h3 class="ui-li-heading">Local Storage Test</h3>
<p class="ui-li-desc">Just a test</p>
</a>
</li>
</ul>
</div>
</div>
<div data-role="page" data-add-back-btn="true" id="local">
<div data-role="content">
<ul id="edit" data-role="listview" data-inset="true">
<li>ntry already there. Append works...</li>
</ul>
</div>
</div>
</body>
</html>
So my problem is on the second page. I just added a new element and update the list view just to load the css jqm.
But if I use everything that is good pageInit except round the corners of the list view (data frame = "true"). He did not appear rounded, but I checked the css load, and should be all year. But when used document.ready everything is fine. Round the corners of the list view!
Please help me because I do not want to use document.ready.
$("#local").live('pagecreate', function (evt) {
var edit = $('#edit');
edit.append($('<li>test1</li>'))
});
Try replacing above code peace
This is actually an Adobe AIR app, but since the problem I'm having is with very basic JavaScript, I thought I should put it here.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>KM Ciclo de Servicio</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/ciclo.css" rel="stylesheet" type="text/css" />
<script src="script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function changefield()
{
#('#ciclo').append('ASD');
}
</script>
</head>
<body oncontextmenu="return false;">
<div id="topMenu">
<button class="menuItem" id="new" title="Nuevo"><img src="images/new.png" alt="Nuevo"/></button>
<button class="menuItem" id="save" title="Guardar"><img src="images/save.png" alt="Guardar"/></button>
<button class="menuItem" id="open" title="Abrir"><img src="images/open.png" alt="Abrir"/></button>
<input type="text" value="Momento cambiado" onkeypress="changefield()"/>
<div style="display: inline-block; float: right;">
Nuevo:
<button class="menuItem" id="momento">Momento</button>
<button class="menuItem" id="atributo">Atributo</button>
</div>
</div>
<div id="main" align="center">
<div id="ciclo"></div>
</div>
<script src="script/init.js" type="text/javascript"></script>
</body>
</html>
This is the function I'm trying to call:
<script type="text/javascript">
function changefield()
{
#('#ciclo').append('ASD');
}
</script>
However, my terminal tells me there's an error on line 20, which is:
<input type="text" value="Momento cambiado" onkeypress="changefield()"/>
The error says:
ReferenceError: Can't find variable: changefield
onkeypress at app:/index.html : 19
I have checked some tutorials on JavaScript functions to make sure (including the one at w3schools), and there doesn't seem to be anything wrong. I am calling the function exactly how these tutorials suggest I do so.
Any ideas on what's going on?
The proper syntax is this:
function changefield()
{
$('#ciclo').append('ASD');
}
This was a javascript syntax error:
#('#ciclo').append('ASD');
which caused the changefield function to not be defined.
Problem might be that jQuery creates $ variable, not #
function changefield()
{
$('#ciclo').append('ASD');
}
Because # should be $
function changefield() {
$('#ciclo').append('ASD');
}
This SyntaxError was causing the changefield function to not be created so the inline onkeypress couldn't find it.
I have the following script in my homepage
$(function () { // same as $(document).ready(function () { })
// assuming we have the open class set on the H2 when the HTML is delivered
$('li.drawer h2:not(.open)').next().hide();
$('h2.drawer-handle').click(function () {
// find the open drawer, remove the class, move to the UL following it and hide it
$('h2.open').removeClass('open').next().hide();
// add the open class to this H2, move to the next element (the UL) and show it
$(this).addClass('open').next().show();
});
});
It works in Safari, but not in Firefox 3.08/3.1 beta3.
How can you get the above jQuery script work in Firefox?
[edit]
First lines of my index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<link href="template.css" type="text/css" rel="stylesheet"/>
<title>Abc</title>
<script type="text/javascript" src="jquery.js" />
<script type="text/javascript">
! - - - - Above Code is at Here - - - - -
</script>
</head>
The body of index.html
<body>
<div class="mainbody">
<h1 class="myheader">Test</h1>
<p>Test</p>
<ul class="drawers">
<li class="drawer">
<h2 class="drawer-handle open">Contact info</h2>
<ul>
<li>name
</li>
<li>
<div class="">aaa
</div>
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Unpublished</h2>
<ul>
<li class="italic">
<i>A</i> (2009).
</li>
<li class="italic">
<i>aaa</i> (2008).
</li>
</ul>
</li>
<li class="drawer">
<h2 class="drawer-handle">Recent projects</h2>
<ul>
<li class="italic">
Websites
</li>
<li class="italic">
Search
<form action="http://www.google.com/cse" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="8834479:1qd7hky6khe" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en"></script>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
It works for me in Firefox 3.0.9
What exactly is not working?
My guess is that you have invalid HTML which causes some wrong DOM structure in Firefox. But it is hard to tell without looking at your code.
Why are your tags in your jquery selectors in uppercase? By your doctype, you're using XHTML, and all tags must be lowercase. Not sure if that'll make a difference, but you should change H2 => h2, etc.
I got the code to work in Firefox by replacing the following
<script type="text/javascript" src="jquery.js" />
to
<script type="text/javascript" src="jquery.js"></script>