$('input.text-1').wrap('<span class="textfield-1"></span>');
.textfield-1 {
border: 1px solid #d00;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text text-1" />
Wrap() doesn't seem to work. I don't see <span>s wrapped around input in firebug. If they were wrapped, inputs would be hidden with display: none, but they aren't.
What am I doing wrong here?
Works ok for me. Is it possible that you have a javascript error on the page that is preventing the code from executing?
Here's my test. Element does become invisible and I can see that it is wrapped in the span.
<html>
<head>
<style type="text/css">
.textfield-1 {
border: 1px solid #d00;
display: none;
}
</style>
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function(){
$('input.text-1').wrap('<span class="textfield-1"></span>');
});
</script>
</head>
<body>
<input type="text" class="text text-1" />
</body>
</html>
Related
i started to use math.js just for convenience and i was wondering if i could use math.sum method and pass
a collection of input values as argument and return the sum of all input values,for example,something like this :
code to visualize my concept :
$(document).ready ( function(){
$("#sum").val(math.sum($("#container input")))
});
input{
position:relative;
float:left;
clear:both;
text-align:center;
}
#sum{
margin-top:5px;
}
<!DOCTYPE html>
<html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="container"><input value="15"><input value="5"><input value="10"><input value="20"></div>
<input id="sum" placeholder="SUM OF ABOVE INPUTS">
</body>
</html>
Your math.sum method expects a JS Array so you need to build it from what you have to comply with the requirement.
In just one line you can go from Jquery Objects to your expected Array.
[Jquery DOM Elements].get() => [ES6 DOM Elements].map() => JS Arrays
$("#sum").val(math.sum($("#container input").get().map(v=>v.value)))
input {
position: relative;
float: left;
clear: both;
text-align: center;
}
#sum {
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="container"><input value="15"><input value="5"><input value="10"><input value="20"></div>
<input id="sum" placeholder="SUM OF ABOVE INPUTS">
</body>
</html>
You need to map the element values to an array first.
The math library doesn't know anything about getting values from a jQuery collection of elements
Simple case with no validation:
const values = $("#container input").toArray().map(el => el.value)
$("#sum").val(math.sum(values))
input {
position: relative;
float: left;
clear: both;
text-align: center;
}
#sum {
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<script src=https://cdnjs.cloudflare.com/ajax/libs/mathjs/3.3.0/math.min.js></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<div id="container"><input value="15"><input value="5"><input value="10"><input value="20"></div>
<input id="sum" placeholder="SUM OF ABOVE INPUTS">
</body>
</html>
I'm try to load the page content via the JQuery load() method.
Here is the code
$(window).ready(function() {
$('#content').load('views/login.html');
});
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
(Sorry but i can't add the login.html to the snippet editor. It's a login form powerd by the mdl framework:/)
Now the Javascript functions for the form element from mdl does not work correctly. There are no errors in the developer console. I've also tried to reload all my javascript files after the load request by jquery?
Does anyone have any idea what's going wrong with my script?
I've solved this problem by myself. Here the solution:
I simply call the mdl javascript after the load method again.
$.getScript('https://code.getmdl.io/1.3.0/material.indigo-blue.min.css');
Now it works perfectly. Thanks to all!
if code you provided is copied from your .html file then structure is not good.
Here is working version:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<style>
.mdl-layout {
align-items: center;
justify-content: center;
}
.mdl-layout__content {
padding: 24px;
flex: none;
}
</style>
<link href="https://code.getmdl.io/1.3.0/material.indigo-blue.min.css" rel="stylesheet" />
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mdl-layout mdl-js-layout mdl-color--grey-100">
<main class="mdl-layout__content" id="content">
</main>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#content').load('views/login.html');
});
</script>
</body>
</html>
CSS styles needs to be enclosed with tags, and Javascript code must be closed within tags
Hope this helps you.
I take a script from jsfiddle, and obviously it work, but when i try to run it locally, it stops to work. I read in another question that to use jsfiddle code, I need to put my script into:
$(document).ready(function() {
});
I do it for the following code, but it doesn't work even. Can someone please help me?
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script type=”text/javascript”>
$(document).ready(function() {
$('#btnName').click(function(){
var text = $('#inputName').val() + '<button>x</button>';
if(text.length){
$('<li />', {html: text}).appendTo('ul.justList')
}
});
$('ul').on('click','button' , function(el){
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
Two reasons:
Because you haven't included jQuery on the page. You need
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
somewhere before your script (with that path or some other valid path to jQuery).
The quotes here
<script type=”text/javascript”>
are fancy quotes. They must be normal quotes. Or, best practice, just don't include the type at all; JavaScript is the default.
It's also worth formatting your code in a reasonable, consistent way.
E.g.:
<html>
<head>
<style type="text/css">
li {
border: 1px solid #ccc;
margin-bottom:3px;
padding: 2px 5px;
}
button {
margin-left: 10px
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.js"></script>
<script>
$(document).ready(function() {
$('#btnName').click(function() {
var text = $('#inputName').val() + '<button>x</button>';
if (text.length) {
$('<li />', {
html: text
}).appendTo('ul.justList')
}
});
$('ul').on('click', 'button', function(el) {
$(this).parent().remove()
});
});
</script>
</head>
<body>
<input type="test" id="inputName" />
<button id="btnName">Add</button>
<ul class="justList"></ul>
</body>
</html>
I'm trying to set the default focus on an input box when the page loads (example: google).
My page is very simple, yet I can't figure out how to do this.
This is what I've got so far:
<html>
<head>
<title>Password Protected Page</title>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("PasswordInput").focus();
}
</script>
<style type="text/css" media="screen">
body, html {height: 100%; padding: 0px; margin: 0px;}
#outer {width: 100%; height: 100%; overflow: visible; padding: 0px; margin: 0px;}
#middle {vertical-align: middle}
#centered {width: 280px; margin-left: auto; margin-right: auto; text-align:center;}
</style>
</head>
<body onload="FocusOnInput()">
<table id="outer" cellpadding="0" cellspacing="0">
<tr><td id="middle">
<div id="centered">
<form action="verify.php" method="post">
<input type="password" name="PasswordInput"/>
</form>
</div>
</td></tr>
</table>
</body>
</html>
How come that doesn't work while this works fine?
<html>
<head>
<script type="text/javascript">
function FocusOnInput()
{
document.getElementById("InputID").focus();
}
</script>
</head>
<body onload="FocusOnInput()">
<form>
<input type="text" id="InputID">
</form>
</body>
</html>
Help is much appreciated :-)
And you can use HTML5's autofocus attribute (works in all current browsers except IE9 and below). Only call your script if it's IE9 or earlier, or an older version of other browsers.
<input type="text" name="fname" autofocus>
This line:
<input type="password" name="PasswordInput"/>
should have an id attribute, like so:
<input type="password" name="PasswordInput" id="PasswordInput"/>
This is one of the common issues with IE and fix for this is simple.
Add .focus() twice to the input.
Fix :-
function FocusOnInput() {
var element = document.getElementById('txtContactMobileNo');
element.focus();
setTimeout(function () { element.focus(); }, 1);
}
And call FocusOnInput() on $(document).ready(function () {.....};
You could also use:
<body onload="focusOnInput()">
<form name="passwordForm" action="verify.php" method="post">
<input name="passwordInput" type="password" />
</form>
</body>
And then in your JavaScript:
function focusOnInput() {
document.forms["passwordForm"]["passwordInput"].focus();
}
Please consider this code:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px; height:72px; border: solid 1px grey"></div>
<iframe id="iView" style="width: 200px; height:70px; border: dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
var doc = document.getElementById("iView").contentWindow.document;
doc.designMode = "On"
doc.open()
doc.write("<html><head></head><body class='some-class'>Some test text</body></html>");
doc.close();
jQuery("#iView").appendTo("#dlgDiv")
})
</script>
</body>
</html>
In IE it works fine and preserves test in the frame ("Some test text") as well as it keeps it in design mode.
In FF/Chrome/Opera it wipes out all content of the iframe - if you inspect it's DOM with FireBug you can see that iframe.body lost it's class "some-class" as well as all text and it's not in design mode.
Any ideas how to overcome this problem? The original problem is that all rich text editors fail to work in a jQuery.dialog in those browsers and I tracked the problem down to the above-mentioned fact...
It's a real show stopper for me, any help would he highly appreciated!
Thank you,
Andrey
Takes to refresh the movement (appendTo) and does not locate either the iframe:
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>
<body>
<div id="dlgDiv" style="width:202px;height:72px;border:solid 1px grey"></div>
<iframe id="iView" style="width:200px;height:70px;border:dotted 1px red" frameborder="0"></iframe>
<script type="text/javascript">
jQuery(document).ready(function() {
$("#iView").appendTo("#dlgDiv");
setTimeout(function(){
var iBody = $("#dlgDiv").find('#iView').contents().find("body"); // <-----
iBody.append("<div>my bad html</div>"); // old container
iBody.empty(); // empty body in iframe
iBody.append("Some test text"); //add container
iBody.append("<div>or something right</div>"); //add container
iBody.attr("class", "some-class"); //add class to body
}, 100);
})
</script>
</body>
</html>
Edition: for it is understood