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.
Related
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="TEXTBOX1_ID"></input>
<input type="button" id="button1" value="Add"onclick="add_element_to_array()"></input>
<input type="button" id="button2" value="Display" onclick="display_array()"</input>
<script src="js/app-functions.js"</script>
</body>
</html>
the above code contains two buttons and onclick they use a function from a js file. However once I press any of the bottoms it does nothing a piece of text is meant to appear, I don't think it is my js code as It very simple and I have made sure it's not a syntax error.
you missed to > in script.it didn't include file .
corrected:
<script src="js/app-functions.js"></script>
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
Using JQuery, I need to write a function, called on click for any of the two buttons (edit0, edit1).
I have the following code:
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
</body>
</html>
When I run it, nothing happens on button click.
I tried to replace the script with:
$('button[class="edit"]').click(function() {
alert('1111');
});
But the result is the same.
You can simply use CSS3 [attribute^=value] Selector to implement 'click event on all buttons with id starting with custom text' as you wish, like below.
$('button[id^="edit"]').click(function() {
alert('111');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<button id="edit0" class="edit"> edit </button>
<button id="edit1" class="edit"> edit </button>
<script type="text/javascript">
$('[id^=edit]').click(function() {
alert("1111");
});
</script>
</body>
</html>
And also, put your code just before the closure </body> tag to ensure your dom is ready when the code runs.
I normally see that syntax for addressing custom attributes, try this.
$('button.edit').click(function() {
alert('1111');
});
Also put your script below your HTML. Or use a jQuery on document ready. Remember JavaScript/JQuery are executed sequentially.
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"?
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.