I have this code running on jsfiddle, but I can't get it to run locally on my browser. Maybe someone can spot something I am not doing right? Thanks in advance!
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
</script>
</head>
<body>
<input id="key_select" type="text" name="keyword" disabled/>
<div class="main">
<input type="button" name="honda" value="honda" />
<input type="button" name="mercedes" value="mercedes" />
</div>
</body>
</html>
Place your code inside document ready handler
<script type="text/javascript">
$(function(){
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
});
</script>
Your problem is that your logic is executing before the html element exist on the page so it does nothing.
Placing the code on document ready fix this issue as this handler is executed when DOM element tree was constructed.
While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it's important to reference external stylesheets or embed style elements before referencing the scripts.
In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead.
You forgot document ready, the element isn't rendered yet when you're trying to get it, so you have to either wait for the document to be ready, or move the script below the elements so that they are available when the script is running.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function() {
$('.main input').click(function() {
var value = $(this).val();
var input = $('#key_select');
input.val(value);
return false;
});
});
</script>
</head>
<body>
<input id="key_select" type="text" name="keyword" disabled/>
<div class="main">
<input type="button" name="honda" value="honda" />
<input type="button" name="mercedes" value="mercedes" />
</div>
</body>
</html>
jsFiddle adds the DOM ready handler automatically when selected in the dropdown on the left
Related
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
I'm having problem with the following code,
The submit button is not binding to the jQuery script and the console is not printing anything. I can't figure out what the problem is..
<html>
<head>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script>
</head>
<body>
<script>
// Variable to hold request
var request;
// Bind to the submit event of our form
$("#show").submit(function(event){
console.log ("Im here");
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
</html>
You code is not working as at the time the script is interpreted and executed, the form does not exist in the DOM. Wrap your code in document-ready handler.
Specify a function to execute when the DOM is fully loaded.
Use
$(function () {
//Your code
})
OR, You can place the script tag below the form element
It is a silly mistake and the only thing that you have to change is to wrap the whole code in $(document).ready(function(){}); .
The updated code is :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<script>
$(document).ready(function(){
var request;
$("#show").submit(function(event){
console.log ("Im here");
});
});
</script>
<!--form action="getVehiclePosition.php" method="GET"-->
<!--Name: <input type="text" name="name"><br>-->
<form id="show">
<input type="submit" value="Send">
</form>
</body>
May be you can modify id form to "show123" and run again. if it's work => duplicate id show in page.
Glad help for you.
I am loading a page into a div by
<script>
$(document).ready(function() {
$("#link").click(function(e) {
e.preventDefault();
$("#div").load("page.php");
});
</script>
The page loads but the javascript that I have in page.php does not load.
This is what I have:
<script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
$(function() {
$("#date").datePicker();
});
</script>
When I load page.php outside of the div (as in its own tab/window), the page works perfectly. (The above is copy-pasta from http://jqueryui.com/datepicker).
What is the cause and how can I solve it?
Your scripts are never loaded. They are stripped out during load.
(The above is copy-pasta from http://jqueryui.com/datepicker/)
I'm going to assume that you mean you are copying the entirety of that sample's source, which looks roughly like this:
<!doctype html>
<html lang="en">
<head>
<!-- Snipped for brevity: A bunch of script and link elements-->
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
So you're taking this document using jQuery's load function and placing it inside a div:
$("#div").load("page.php");
Load won't cooperate here
According to the docs on .load():
jQuery uses the browser's .innerHTML property to parse the retrieved document and insert it into the current document. During this process, browsers often filter elements from the document such as <html>, <title>, or <head> elements. As a result, the elements retrieved by .load() may not be exactly the same as if the document were retrieved directly by the browser.
In my own experience, this normally means that .load() will only return content from inside the body element, without the body element itself. In other words, from the above sample, this is the only HTML actually being loaded:
<p>Date: <input type="text" id="datepicker" /></p>
You should use your browser's developer tools (F12) to put a breakpoint in the script and find out what actually gets loaded.
How do you do this properly?
There's two parts to it.
Part 1: Move resources outside the <head> element
The Datepicker code sample contains a few resources in the <head>. You're going to have to place these elsewhere.
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
The link elements
These can't be loaded up by the page you're loading. Place those inside the <head> element of the parent page you're trying to load this other one into.
The script elements
These will be loaded up when you load the document, too, as long as:
You place them within the <body> element of the document you're loading, and
You adhere to this section in the jQuery .load() docs to make sure you load in the script elements correctly.
However, it's only jQuery and jQuery UI, which you know you're going to be using. You might as well move these into the parent page's <head> element too.
2. Place the important bits you're trying to load in the body.
That's these bits:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
Place those inside the <body> element of the document you're trying to load. Then, provided you followed that advice about scripts, this will be loaded successfully.
Optionally, include jQuery references in the <body>:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
You may just need to change:
<script>
$(function() {
$("#date").datePicker();
});
</script>
to
<script>
$("#date").datePicker();
</script>
as the document.ready event has already fired, which is what $(function() { tells it to wait for. I'm not sure if jquery automatically runs scripts in ajax'ed content, if not, you could try this (not neccessarily safe, make sure you understand the security risks of eval if you do this).
$("#div").load("page.php", function() {
$("#div").find("script").each(function(i) {
eval($(this).text());
});
});
Note: this will run something like:
<script>
$("#date").datePicker();
</script>
But NOT something like:
<script>
$(function() {
$("#date").datePicker();
});
</script>
As, again, the second waits for the document.ready event, which has already fired.
I think $(document).ready() aka $(function) will not execute when you load the document with load.
You can try to trigger it manually in the complete callback of load, or you can name the function you pass to $ and call it.
Following is a statement that should run according to me when the HTML page loads.
document.getElementById("name_field").value = "JavaScript";
But this does nothing.If i try to do the same thing the different way :
window.onload = init;
function init() {
document.getElementById("name_field").value = "JavaScript";
}
Then this works fine.
What is wrong with the first script.?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="valtest.js">
</script>
</head>
<body>
<form>
<label>Enter your name <input type="text" id="name_field" /></label> <br/>
<input type="submit" value="submit" />
</form>
</body>
</html>
Onload runs after the HTML has been rendered in the page. So in your first example the element is not yet available for JavaScript processing.
Most use "document ready", which means the document has been rendered.
jQuery example:
$(document).ready(function() {
init()
});
Your HTML probably looks like this:
<script>
document.getElementById("name_field").value = "JavaScript";
</script>
<!--
More
code
here
-->
<input id="name_field" value="Static">
If that's the case, when the JavaScript is run there is no element with the ID "name_field" in the DOM yet.
window.onload is executed only after the entire DOM has been loaded and parsed ... which is why running the function then works. (It would also work if it was attached to any other event handler that ran after the DOM was loaded, or even if the order of the script and input tags were reversed.)
The element with id 'name_field' isn't available in the DOM yet because the whole document gets loaded in the sequencial order.
The second example will execute once the document has been loaded and your element is available.
the javascript in your first sample execute immediately, before any DOM has rendered. You have to wait for the DOM to render before you try to operate on it, which you are doing in your second sample.
The first script may or may not work depending on where it is placed within your HTML. If the script is before the field itself (the <input id="name_field" />), the script will run before the browser acknowledges the existence of the field, so it will do nothing (actually, it should throw an error stating that you are trying to access the value property of an undefined object).
The second version runs after the page finishes loading. By then, the browser already knows about your field, to the script works.
I have tried to set a item to read only, as you see in the code i have tried several way and can't get that to work. Can anyone help me with this?
<html>
<script>
//test.Attributes.Add("readonly","readonly")
//document.getElementById('testtt').setAttribute('readonly', 'readOnly');
// document.getElementByID('test').value=readOnly;
//document.getElementByID('test').readOnly = true;
// $("#test").attr("readonly", "readonly");
//$("#test").removeAttr("readonly");
//$('#test').attr('readonly', 'readonly');
$("#test").attr("readonly")
</script>
<body>
<input id="test" type="text" value="text" />
</body>
</html>
$('#test').attr('readonly', true);
working example : http://jsfiddle.net/FBUDt/
this should work for you:
$("#test").attr("readonly", "readonly");
remember that the DOM needs to be loaded before you try to find the element
you could use jquerys DOM-ready
$(function() {
$("#test").attr("readonly", "readonly");
});
what version of jquery are you using?
You should try wrapping your code into $('document').ready();
According to the documentation,
The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code.
So it would be:
$('document').ready(function(){
$("#test").attr("readonly", "readonly");
});
You can't refer to an element that is created later in the document. Move the script down below the form, or place it in a document.ready block. Also, you should use $.prop() in jQuery 1.6+
$(function(){
$('#test').prop('readonly', true);
});
I would go with
document.getElementById('test').setAttribute('readonly', 'readOnly');
But that is not the issue. The position of your script is where it goes wrong. You are trying to change element which does not exist.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>testcase</title>
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
</head>
<body>
<div class="some container">
<input id="test" type="text" value="text" />
</div>
<script type="text/javascript" charset="utf-8">
document.getElementById('test').setAttribute('readonly', 'readOnly');
</script>
</body>
</html>
If you place your scripts right befor the closing </body> tag , then it is executes as soon as DOM has been built.
And please. Stop using JS libraries to do the most basic things.
you are missing
$(document).ready(function() {
$('#test').attr('readonly', 'readonly');
});
sample
http://fiddle.jshell.net/Pe4J5/