|
Hi all, I have a web app that has a display box and button UIs for typing numbers (0 through 9) into the display box. There is one button that when clicked generates multiple input fields.
My problem is that I can enter numbers into the first input field by clicking the numbered buttons and by typing numbers using the keyboard. Numbers can only be entered into other input fields using the keyboard. Any attempt to use the numbered buttons to enter numbers into other input fields will cause the focus to return back to the first input field.
Below are my markups and jquery
<body>
<div id="page">
<div id="myOutputs">
</div>
<script type="text/javascript">
$(document).ready(function () {
if ($('#box1').click())
{
$(".BTN").click(function () {
if ($.isNumeric($(this).html())){
$("#box1").val($("#box1").val() + $(this).html());
}});
}
else
if ($('#box2').click())
{
$(".BTN").click(function () {
if ($.isNumeric($(this).html())) {
$("#box2").val($("#box2").val() + $(this).html());
}
});
}
else
if ($('#box3').click())
{
$(".BTN").click(function () {
if ($.isNumeric($(this).html())) {
$("#box3").val($("#box3").val() + $(this).html());
}});
}
$("#functs").click(function () {
document.getElementById("myOutputs").innerHTML =
"<table id='data-table'>"
+ "<tr>"
+ "<td><input type='text' id='box1'/><td></tr>"
+ "<tr>"
+ "<td><input type='text' id='box2'/><td></tr>"
+ "<tr>"
+ "<td ><input type='text' id='box3'/><td></tr>"
+ "</table>";
document.getElementById('box1').tabIndex = "1";
document.getElementById('box2').tabIndex = "2";
document.getElementById('box3').tabIndex = "3";
});
}
Please explain why the code above is giving me the problems I've stated, thanks in advance.
modified 4-Feb-14 8:09am.
|
|
|
|
|
jQuery's .click method[^] has two forms; one to attach a handler to the click event of the matched elements, and one to trigger the click event. Your code is calling the second version.
Since the method returns the original jQuery wrapper object, which in Javascript terms is not "false-y", the code within the first if block executes.
Try something like this instead:
$(function() {
var currentBox = null;
$(document).on("focus", "#box1, #box2, #box3", function(){ currentBox = $(this); });
$(document).on("click", ".btn", function() {
if (currentBox) {
var value = $(this).html();
if ($.isNumeric(value)) {
currentBox.val(currentBox.val() + value);
}
}
});
});
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi, thanks for replying. Your code works like a charm.
|
|
|
|
|
Hello friends ,
i want to do a project java script . In which i want to compare algebraic expressions,
as if i give someone a question:
"A bike rental company charges initial deposit 100rs and 50 Rs/day . ravi paid 500 rs. then write an equation for to find no. of days x."
ANSWER will be 50x+100 = 500.
but answer can be written in may ways.
like :
100 + 50x = 500
500 -100 = 50x
there may be equations in two or more variables and polynomial of two or more degrees.
please help me to get source code if available,, or guide me in how to achieve that , what the things are needed.
|
|
|
|
|
|
Good Evening all
i am trying to post data coming from a form to the server and return a string , when i test this service works nicely. Its a Rest web api. now iam consuming it in Javascript Ajax like this
<script type="text/javascript">
function ProcessRegistration() {
jQuery.support.cors = true;
$.getJSON("http://www.mydomain.mymaindomain.com/api/Registration/Create", function (data) {
alert(data);
});
} </script>
When i run this and i get an Error
Failed to load resource: the server responded with a status of 405 (Method Not Allowed) http://www.mydomain.mymaindomain.com/api/Registration/Create
i have added the headers in IIS
"Access-Control-Allow-Origin" "*"
in my web config of the service i have added
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
</customHeaders>
</httpProtocol>
<...........
i have done all suggested by my research but i still get that error, try to restart the server but still the same.
Vuyiswa Maseko,
Spoted in Daniweb-- Sorry to rant. I hate websites. They are just wierd. They don't behave like normal code.
C#/VB.NET/ASP.NET/SQL7/2000/2005/2008
http://www.vuyiswamaseko.com
vuyiswa[at]dotnetfunda.com
http://www.Dotnetfunda.com
|
|
|
|
|
How did you declared Create method on the server?
I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)
|
|
|
|
|
Did you get any response? I am in the same boat, it returns to the same error. Please help
|
|
|
|
|
|
Good Day
i have a web api that i want to call on the client side and return its contents, so it s a post and i return some string. Now i have a form that will have the data to be posted as depicted below
<form name="registrationForm" method="post">
and there are other controls within the form and i have a button that triggers the post as depicted below
< <input title="Register" onclick="ProcessRegistration();" style="width: 100px; height: 100px; align-self: center" type="submit" name="submit_fourth" id="submit1" value="register" />
onCick i call a function from the client side, the definition of the function is
function ProcessRegistration()
{
$.getJSON("http://www.mydomain.maindomain.com/api/Registration/Create", function (data) {
alert(data);
});
}
now when i click the button to fire the service i get the following error in the console
XMLHttpRequest cannot load http:
Does anyone know how to solve this ?
Thanks
Vuyiswa Maseko,
Spoted in Daniweb-- Sorry to rant. I hate websites. They are just wierd. They don't behave like normal code.
C#/VB.NET/ASP.NET/SQL7/2000/2005/2008
http://www.vuyiswamaseko.com
vuyiswa[at]dotnetfunda.com
http://www.Dotnetfunda.com
|
|
|
|
|
The problem is that the client and the server are on different domains (mydomain.maindomain and localhost). XHR will deny such call except you put an 'Access-Control-Allow-Origin' header on the server...
See here:
https://developer.mozilla.org/en/docs/HTTP/Access_control_CORS[^]
I'm not questioning your powers of observation; I'm merely remarking upon the paradox of asking a masked man who he is. (V)
|
|
|
|
|
What is the web server? I had this same problem on a Tomcat server. I had to create a "filter" and "filter map" to resolve this.
|
|
|
|
|
hi thanks for your reply
i am using IIS , i was able to resolve the issue , but i had a to change my code a but to do this. my service is a Rest Web Api Service. So i was returning a String , i changed and returned an integer. So my Js code looks like this
$.ajax({
url: 'http://www.mysubdomain.mymaindomain.com/api/Registration/Create',
type: 'POST',
data: JSON.stringify(RegistrationModel),
contentType: "application/json;charset=utf-8",
success: function (data, textStatus, request) {
alert(data);
if (data != 0) {
alert("Your Reference number is ANP00" + data + " Keep it safe for Sure use");
ProcessPayment();
}
else {
alert("Already Registered,please renew");
}
},
error: function (x, y, z) {
alert(x + '\n' + y + '\n' + z);
}
});
I hope this helps someone in the future.
Thanks
Vuyiswa Maseko,
Spoted in Daniweb-- Sorry to rant. I hate websites. They are just wierd. They don't behave like normal code.
C#/VB.NET/ASP.NET/SQL7/2000/2005/2008
http://www.vuyiswamaseko.com
vuyiswa[at]dotnetfunda.com
http://www.Dotnetfunda.com
|
|
|
|
|
|
Greetings and Salutations!
I'm not sure if this is the right group for this, but if not, please let me know where I should post my questions.
I'm a novice to the world of jQuery and I've run into a snag (and can use some help). When I include the following line in my HTML file, the element doe not slide down as expected:
<script>
$(document).ready(function(){
$("#ContentHeader").slideDown(4000);
});
</script>
When I load the page the element appears without sliding down. I'm self taught using CodeAcademy and a text titled: "JavaScript & jQuery: The Missing Manual". Do I have the syntax correct?
Here is the full code I'm using:
<!DOCTYPE html>
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="JQSwaggerStyle.css"/>
<script>
$(document).ready(function(){
$("#ContentHeader").slideDown(4000);
});
</script>
</head>
<body>
<div id="ContentHeader">
<h1>Andre Mitchell Stevens Swagger</h1>
<h2>Ain't it cool???</h2>
</div>
</body>
</html>
=======================
Every experience in life is a lesson to be learned
A. Stevens
B.S., Computer Science
|
|
|
|
|
You haven't posted your CSS, but the first thing I would check is that you have display:none; set for your #ContentHeader element.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard,
Thanks for your feedback. Unfortunately that did not work. If I include "display: none" (without the quotes) the element doesn't appear at all (and I also tried using "slow" as the parameter, rather than "4000").
I also tried:
$("#ContentHeader").hide().slideDown("slow");
but that didn't work either...
Here is my CSS (so far):
h1, h2{
color: #FF8000;
text-align:center;
}
#ContentHeader{
background-color: #000040;
border-color: #FF8000;
border-style:groove;
border-radius: 5pt;
border-width: 5pt;
}
=======================
Every experience in life is a lesson to be learned
A. Stevens
B.S., Computer Science
|
|
|
|
|
You definitely need the display:none; . As Graham mentioned, you also need a <script> tag to include jQuery. If you don't have a local copy, you can use a CDN - for example:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
Here's a working example to play with: http://jsfiddle.net/Y5P7N/[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
If that is your complete page, then you haven't included the script tag to load jQuery itself. It should look something like this:
<script src="jquery.js"></script>
The actual src= filename and path may be different.
|
|
|
|
|
Can anyone help me to do coding on the topic duplicate file remover.I am weak in coding and i am just a student
Rahul
|
|
|
|
|
And are you hoping to do this in Javascript?
Veni, vidi, abiit domum
|
|
|
|
|
Yes.. i really need it.. Actuly it's my project... Can u help me??
modified 27-Jan-14 12:17pm.
|
|
|
|
|
I think you need to study what features you can use in Javascript. If you want to delete files on the user's system then that is forbidden in browsers for reasons of security.
Veni, vidi, abiit domum
|
|
|
|
|
In JavaScript? That's not possible for security reasons. If it would be possible, then websites could easily delete files on your system, which is probably not what you want. So no, it's impossible.
|
|
|
|
|
Hi I have a SQL Server Table named News with the following
columns-id,Title,Body,Created datetime and
Inside It's a column 'Number of clicks'.
Now I want to increment it by 1 when the title of a particular news is clicked.I need the c# code.Help, i can't do it
|
|
|
|