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
Related
Good day to all time of day, there was such a problem:
in index.jsp passing the answer.jsp, here's the code:
index.jsp
<head>
<meta charset="UTF-8">
<title>Lab 2</title>
<link rel="stylesheet" href="css/graphic.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/table.css">
</head>
<body>
<div class="hero">
<jsp:include page="jsps/hero.jsp"/>
</div>
<div class="graphic">
<jsp:include page="jsps/graphic.jsp"/>
</div>
<div class="form-container">
<jsp:include page="jsps/forms.jsp"/>
<button id="checkButton">Проверить</button>
<div id="outputContainer">
<span class="outputStub notification">Результаты отсутствуют</span>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/checkboxHandler.js"></script>
<script src="js/formValidator.js"></script>
<script src="js/graphicValidator.js"></script>
<script src="js/session.js"></script>
<script src="js/table.js"></script>
</body>
answer.jsp
<%# page contentType="text/html;charset=UTF-8"%>
<div class="table">
<div class="table-header">
<div>X</div>
<div>Y</div>
<div>R</div>
<div>Входит ли в ОДЗ?</div>
</div>
<div class="table-content">
<script>
console.log("1111111111")
AddInSession(${x}, ${y}, ${r}, ${result ? "<div style=\"color: green\">Да</div>" :
"<div style=\"color: red\">Нет</div>"})
</script>
<div class="table-row" id="table-row">
</div>
<script>Table()</script>
</div>
</div>
I need to pass values through the context and I did it, and I also need to return an answer.jsp, here is the code for one of the servlets
ServletContext context = getServletContext();
context.setAttribute("x", object.getX());
context.setAttribute("y", object.getY());
context.setAttribute("r", object.getR());
context.setAttribute("result", object.getResult());
getServletContext().getRequestDispatcher("/jsps/answer.jsp").forward(request, response);
The browser sees the js code, but does not execute it. My concern is not so much that my methods are not being executed, but that console.log is also not producing results.
Can someone explain what I'm doing wrong?
P.S in index.jsp code is being executed
Is there any standard way of coding in Jquery mobile... (ie) Why this question is because the same code for page event is working fine in some devices..and some devices not even produce error or alert...
Example:-
Check the below code
$(document).on('pageinit', "#pageid", function() {
alert("inside page init");
$('input[name="radioBtn"]').on('change', function () {
alert($(this).val());
});
});
It is working fine in browsers both webkit, chrome and mozilla ...but not working in mobiles..
I don't know what is wrong..Can anyone please advice..
NOTE: I tried and using the following link http://www.gajotres.net/document-onpageinit-vs-document-ready/
but still its not working...
This is about my page structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi-page template</title>
<link rel="stylesheet" href="//code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pageinit', "#main", function() {
$('input[name="farmerGender"]').on('change', function () {
alert($('input[name=farmerGender]:checked').val());
});
});
</script>
</head>
<body>
<div data-role="page" id="main">
<div data-role="header">
<h2>Header</h2>
</div>
<div data-role="content">
<div id="div-1">
<ul>
<li>Div-2</div></li>
<li>Div-3</div></li>
</ul>
</div>
<div id="div-2">
<fieldset data-role="controlgroup">
<input type="radio" name="radioBtn" id="rad-1" value="rd-1" checked="checked"/>
<input type="radio" name="radioBtn" id="rad-2" value="rd-2"/>
</fieldset>
</div>
<div id="div-3">
content
</div>
</div>
<div data-role="footer">
<h2>Footer</footer>
</div>
</div>
<body>
</html>
Please check and let me know is there any wrong in this code....
Thanks in advance...
Can someone please tell me why the countdown function is not working properly (the countdown is not starting in the div with the I.D. "countdown"). Probably something real simple, but Javascript isn't my forte. This is the countdown plugin I am using: http://keith-wood.name/countdown.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="./css/web-style-second.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="chrome://mozbar/skin/css/injected.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.countdown.js"></script>
</head>
<body>
<a name="top"></a>
<div id="container">
<div id="content">
<div class="center">
<center>
<div></div>
</center>
</div>
<script type="text/javascript">
$(function() {
$('#countdown').countdown({
until: '14min+20sec',
format: 'MS',
layout: '{mnn}min ' + '{snn}sec ',
onExpiry: function() {
$(".hidden").css("display", "block");
}
});
});
</script>
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 class="hasCountdown" id="countdown">14min 20sec </h4>
</div>
<form name="signupFrm" id="signupFrm" action="#" method="post" class="hidden">
<div>
<div class="yellow_red">
<h1></h1>
</div>
<div class="center">
<a href="https://www.testing.com" class="btn_buy_now">
Get Started</a>
</div>
<input name="submit" value="submit" type="hidden">
<p class="mb_5"> </p>
</div>
</form>
<div class="fnote justify">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
You should put the $(function () ...) script into the <head> tag of your HTML page. This way, the countdown will be initiated once the DOM has fully loaded.
I think that the problem is that you are missing the reference to the "jQuery Countdown CSS". In the usage instructions of the plugin it says:
Download and include the jQuery Countdown CSS and JavaScript in the
head section of your page. #import
"jquery.countdown.css";
But you can still make it work without the "jQuery Countdown CSS" if you remove the class attribute from the <h4> element with the id "countdown", like this:
<div class="time_box">
<h3 class="italic">When The Clock Hits Zero ... </h3>
<h4 id="countdown">14min 20sec </h4>
</div>
JSFiddle Example
The countdown plugin uses the class hasCountdown to test whether the countdown has already been instantiated, so you should use a different class name.
From jquery.countdown.js:
/* Class name added to elements to indicate already configured with countdown.*/
markerClassName: 'hasCountdown'
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.
I have 3 button-images in one page, such that when you press 1, it should show the iFrame related to it, and hide the others. I just started learning about webdev, and I've browsed online, but i can't seem to make it work. :o
Here's my code:
<div id="tabs">
<div id="overview">
Overviews
</div>
<div id="gallery">
Gallery
</div>
</span>
<div id="reviews">
Reviews
</div>
</div>
Each wrapper# is the id of a div that contains the iFrame. The divs contained in the tabs div above are button-images.
How can I show 1 frame 1st, then when the other button-image is clicked, that iFrame will hide, and the iFrame corresponding to the button clicked will be the only 1 showing?
Thank you so much in advance!! :)
P.S. you can check out my website www.giroapps.com to get a better picture of what i'm trying to achieve. :)
There is a neat solution for you: http://www.stilbuero.de/jquery/tabs_3/
Quick example:
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.tabs.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#tabs").tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li><span>One</span></li>
<li><span>Two</span></li>
<li><span>Three</span></li>
</ul>
<div id="fragment-1">
<iframe>IFrame1</iframe>
</div>
<div id="fragment-2">
<iframe>IFrame2</iframe>
</div>
<div id="fragment-3">
<iframe>IFrame3</iframe>
</div>
</div>
</body>
Update
In regards of your application:
<SCRIPT type="text/javascript">
$(document).ready(function(){
$("#tabs a").click( function() {
$("#tabs-1").load(this.href);
return false ;
} ) ;
$("#tabs a:first").click() ;
});
</SCRIPT>
<DIV id="tabs">
<DIV id="overview">
<A class="imagelink lookA" href="./toframe.html">Overviews</A>
</DIV>
<DIV id="gallery">
<A class="imagelink lookA" href="./tawagpinoygallery.html">Gallery</A>
</DIV>
<DIV id="reviews">
<A class="imagelink lookA" href="./trframe.html">Reviews</A>
</DIV>
</DIV>
<div id="tabs-1"></div>