I have included the JQuery CDN in the <script> tag,but it does not works. I am using intellij, it prompts me WITH such warning "Unresolved function or method $()"
Any response is appreciated
<%# taglib prefix="s" uri="/struts-tags" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="http//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.0.min.js"></script>
<title>Success</title>
<script>
$("#select").click(function() {
alert("aaaa");
});
$("#delete").click(function() {
alert("aa");
});
</script>
</head>
<body>
<label for="person">personname</label>
<input id="person" name = "person" type="text" />
<input id="add"type="button" value="add" />
<input id="delete"type="button" value="delete"/>
<input id="select"type="button" value="select"/>
<input id="update"type="button" value="update"/>
</body>
</html>
Since you have put all js inside header you have to put it inside document.ready.
<script>
$(document).ready(function(){
$("#select").click(function() {
alert("aaaa");
});
$("#delete").click(function() {
alert("aa");
});
})
</script>
This is because script tag is a blocking tag and when you put it inside header tag, it will be parsed before DOM is ready. At that time jQuery don't know what is #select & #delete, so no way it will able to attach the click handler.
A second option is to put all script near closing body tag. So first DOM will be ready with elements then js will be executed. Then you can remove the
$(document).ready(function(){
})
Example
<body>
<!--All HTML elements-->
<script>
// All your js goes here.
</script>
There are several advantage of putting scripts just before closing </body> tag , which is beyond this question
Related
Hello guys I am New to javascript I want to know why does the html button disappears as soon as i click it. The browser shows the text but the button disappears. here is how my html looks likes
<html>
<head>
<script type="text/javascript">
function funcname(){
document.write("<br/> <br/> <br/> some text");
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
The write() method writes HTML expressions or JavaScript code to a document.
The write() method is mostly used for testing: If it is used after an HTML document is fully loaded, it will delete all existing HTML.
Answer from: source
<html>
<head>
<script type="text/javascript">
function funcname()
{
document.body.innerHTML += "Some Text";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
</body>
</html>
Try above code it will work fine.If you use document.write() overwritten body so should be use document.body.innerHTML .
The Document.write function overwrites the document content when called, as stated by the Mozilla Developer Network:
Note: as document.write writes to the document stream, calling document.write on a closed (loaded) document automatically calls document.open which will clear the document.
Source: https://developer.mozilla.org/en-US/docs/Web/API/Document/write
document.write() will override your whole body element. If you want to override only specific parts, you could define a target and use innerHTML to change the text.
<html>
<head>
<script type="text/javascript">
function funcname(){
document.getElementById("someParagraph").innerHTML = "Paragraph changed!";
}
</script>
</head>
<body>
<form>
<input type="button" name="something" value="touch me" onclick="funcname()">
</form>
<p id="someParagraph">Hey<p>
</body>
</html>
I have Index.asp
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
</body>
</html>
blocks/header.asp
<div class="hideMeIamHeader"></div>
blocks/bottom.asp
<div class="hideMeIambottom"></div>
blocks/footer.asp
<div class="hideMeIamfooter"></div>
<button id="Hideheader">Hide Header</button>
<button id="Hidebottom">Hide bottom</button>
<button id="Hidefooter">Hide footer</button>
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
How to make this example working? I cant access .hideMeIamHeader and .hideMeIambottom from footer.asp
UPDATE (SOLVED)
So index.asp must look like
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!--#include file="blocks/header.asp"-->
<!--#include file="blocks/bottom.asp"-->
<!--#include file="blocks/footer.asp"-->
<script>
$(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
</script>
</body>
</html>
The most likely scenario is that these items do not exist in the DOM yet at the time the click handlers are being set. You can rectify this by using jQuery's ready() function:
$(document).ready(function() {
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
jQuery Documentation: https://api.jquery.com/ready/
Your code should be executed once DOM is ready,
$(document).ready( function(){
//Your code goes here
$('#Hideheader').on('click',function(){$('.hideMeIamHeader').hide();});
$('#Hidebottom').on('click',function(){$('.hideMeIambottom').hide();});
$('#Hidefooter').on('click',function(){$('.hideMeIamfooter').hide();});
});
More Explanation: Your code is being executed when file is being loaded, and not when whole page is loaded, so when Javascript page is loaded actually page and DOM elements are not created, so jquery is not able to find the elements.
So First you need to let load all the DOM content and then you and work on DOM elements, So you code should be always executed once DOM is ready...
i have a very simple asp.net code but my code doesnt make any sense and after run there would be nothing happen .
I'm using external java script file and trying to run my Script from my asp page and in the button object .
Its my asp code :
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication2.test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ">
<title></title>
<script src="Script/Script_Validate.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" >
<div>
<asp:Button runat="server" Text="aaaaaa" OnClientClick="valid();" />
</div>
</form>
</body>
</html>
Its my JS's file content :
function valid()
{
alert("Hello! I am an alert box!!");
}
please help .
Your code works for me. Do you definitely have a "Script" folder? Is the name of the file correct? Do you have JavaScript enabled on your browser?
The only problem I can see with your code is your head tag has a single quotation mark ("). Maybe this should be runat="server"?
I am completely fresher in knockout.js and just started . I just created a simple page in asp.net form application . and put following scripts and HTML .
when i run this code fields are still showing blank
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/knockout-1.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
var product = { itemNumber: "T314CE", model: "Taylor 314ce", salePrice: 1199.95 };
ko.applyBindings(product);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2>
With Knockout</h2>
<span>Item number</span><span data-bind="text: itemNumber"></span>
<br />
<span>Guitar model:</span><input data-bind="value: model" />
<span>Sales price:</span><input data-bind="value: salePrice" />
</div>
</form>
</body>
</html>
no js error ? How can i find the reason behind this ?
You should call the function on document.ready or you can put the script block at the bottom of your HTML document.
rahularyansharma your binding executes before your DOM load.. so it never works untill it will exceute inside the document.ready or page bottom script area.
In my application i just want to alert the value in the text box using javascript .
aspx page code
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript">
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="textbox1" Text="asdsad">
</asp:TextBox>
</div>
</form>
</body>
</html>
I only get alert 'hi' ..after that i get an error " object required" . whats the reason?
Your code is running before the element has been displayed on the screen. Try -
window.onload = function() {
alert("hi");
alert(document.getElementById('<%=textbox1.ClientID%>').value);
}
Or move your script to the bottom of the page as suggested by Tejs in the comments below.
The page is not loaded yet. You have to put the code in a function and then trigger with
onload=yourfunction;
Please change the script location, put the script code on bottom of the page.Just After the complete with form tag.
The ID you are trying to get is a server side id and not the html id of the element, if you checked using firebug you will notice that the id has loads of extra letters and numbers inserted by asp.net, i'd recommend using jquery instead to walk into the dom to select the specific element.
You could also add a name and getByName.