Good morning,
I'm now a beginner in jQuery and I have a problem using iframes and inputs.
Here's the situation :
I have an input where I can enter (for example) a website, and display it on an iframe. I tried a lot but without a result. Here's my code.
I'd appreciate your help guys, thanks a lot !
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<input type="button" value="GO" onClick="getval()" />
<input type="text" name="url" src="http://www.google.com" id="textframe">
<iframe src="" id="targetframe"></iframe>
<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
<script type="text/javascript">
function getvalue() {
var xframe = $("textframe").val();
$("targetframe").attr('src', xframe);
}
</script>
</body>
You were using a undefined function and you didn't put hash symbol on the jquery objects when querying for an id.
I fixed your snippet and it should work.
function getval() {
var xframe = $("#textframe").val();
$("#targetframe").attr('src', xframe);
}
$("#btnGo").click();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnGo" value="GO" onClick="getval()" />
<input type="text" name="url" value="http://www.stackoverflow.com" id="textframe"> <br>
<iframe src="" id="targetframe"></iframe>
Remember that iframes needs http://in the url in order to work.
If you're on your website and you simply do www.google.com and your website is www.example.com, your iframe source will become www.example.com/www.google.com
Related
I am very, very new to html, but I am trying to try out a widget made by NCBO BioPortal. The widget is a javascript file that allows the admin to restrict a form field to certain terms pulled from an external vocabulary. Thanks for any insight you can give as to why it isn't working!
Here's the link for the widget: http://bioportal.bioontology.org/javascripts/widgets/form_complete.js
Here's what it's supposed to do:
-Look-ahead so that you don't need to type the whole term
-Controlled vocabulary provides consistency of the way different users use the term
Here's my HTML, written by following the guidelines on this page:
https://www.bioontology.org/wiki/index.php/NCBO_Widgets#Term-selection_field_on_a_form
<html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js"></script>
<meta charset="utf-8">
<title> NCBO Widget tester </title>
</head>
<body>
<body style="background-color:3a64a8">
<h1> NCBO Widget Tester </h1>
<p>Term Selection in a field</p>
<form action="/action_page.php">
Term tagger:<br>
<input type="text" name="term" class="bp_form_complete-all-name" size="100"/><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I'm not sure but looks like your script is running before page is loaded.
You need to put your script bellow your html code in body or add defer to your <script> tag.
<script src="https://code.jquery.com/jquery-3.2.1.min.js" defer></script>
<script type="text/javascript"
src="http://bioportal.bioontology.org/javascripts/widgets/form_complete.js " defer></script>
while trying to build an UI for an android and ios app with phonegap i got stuck:
my function getFocus() tries to get the tagName and/or id of the element in focus by using
document.activeElement.tagName
but all browsers seems to get different results:
Chromium (54.0.2840.87 (64-bit)) and androids Webkit return what I would expect: "BUTTON"
Safari (10.0), Firefox (49.0.2) and the ios Webkit return: "DIV"
they all seem to look from a different starting point in the DOM.
How can i be more precise in order to get at least BUTTON from safari/ios webkit as well as chromium/ android webkit?
here is the complete example code:
[edit] I edited one line in response to the helpful comment by user the8472 and took out an tag that was around the tag [/edit]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="add">
<div data-role="header">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content">
<p></p>
<p>
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton" onclick="javascript:getFocus()">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
button inside a does not seem to be valid anyway. If you're doing non-specified things you shouldn't expect consistent behavior.
https://html.spec.whatwg.org/#the-a-element
4.5.1 The a element
Content model:
Transparent, but there must be no interactive content or a element descendants.
https://html.spec.whatwg.org/#interactive-content-2
Interactive content is content that is specifically intended for user interaction.
a (if the href attribute is present), audio (if the controls attribute is present), button, details, embed, iframe, img (if the usemap attribute is present), [...]
i got it:
as the8472 pointed out, i should check the html specs:
button is (understandably) not properly specified in its focus behaviour:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button tells me that do not give focus to a button when clicked. that explains the described behaviour.
when i transfer the onclick="javascript:getFocus()" to the tag for example and click on input fields (not the button of course) i get the correct and to be expected elements in focus returned:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body id="mybody" onclick="javascript:getFocus()">
<div data-role="page" id="add">
<div data-role="header" id="myheaderDiv">
<h1>GetFocus</h1>
</div>
<div data-role="main" class="ui-content" id="mydiv">
<p id="myp">
textfield1:
<input type="text" id="title" placeholder="textfield1" />
textfield2:
<input type="text" id="message" placeholder="textfield2" />
<button id="mybutton">get focus</button>
</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script src="phonegap.js"></script>
<script type="text/javascript">
function getFocus()
{
alert(document.activeElement.tagName);
};
</script>
</body>
</html>
to identify the different elements i will later use .activeElement.id
I am learning Javascript. Please point me in the right direction! Also if you think my code is not efficient that is ok to tell me to.
I have this home page that takes the user's full name and I want to pass into the javascript and save it as a variable. The javascript returns an url back to the first page and then it gets redirected.
Here is the HTML I have:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/indexstyle.css" />
</head>
<body>
<form name="form1" method="GET" action="create.js">
<p>Please type your name:</p>
<input type="text" id="username" class="textbox" name="username" required = "" placeholder="Type Your First and Last Name" autofocus><br>
<input type="submit" value="Join" class="orangebutton"><br>
</form>
</body>
</html>
The javascript has a variable that is named username = "".
I appreciate any help and direction pointing.
Ok so I have a jquery tag plugin which works perfectly, but then I thought ho!, it would be cool to add a "placeholder"to my text box. I did so... and nothing appeared apart from the jquery plugin... My place holder should be "hello type here"... I guess it doesn't work, because of the plugin, which is between "script" tags... I would be very thankful if someone could help me:)
<html>
<head>
<script src="jquery-1.11.1.min.js"></script>
<script src="jquery-ui.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it.js" type="text/javascript" charset="utf-8"></script>
<link href="jquery.tagit.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="myForm" action="searchlevel.html" method="post">
<p id="text">Sport:</p>
<input type="text" name="query" id="box" placeholder="hello type here! ">
<input type="submit" value="Submit" id="but">
</form>
</body>
<script>
//this is jquery tag plugin...
$(document).ready(function () {
$("#box").tagit();
});
// I guess I have to add something here to display the "placeholder", please help.
</script>
</html>
Aloha to you mate!
why are you using tagit javascript and css for placeholder. delete that scripts and use it simple it will work , but remember its only create problem when you will it in IE <9
look at here may help you
JSFiddleTest here
I am using parsley.js for form validation. I read through the documentation on the website and followed their examples, but it does not seem to work as expected.
Here's the test file I created:
<doctype>
<html>
<head>
<title>Parsley</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src ="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="parsley.js"></script>
<link rel="stylesheet" href="parsley.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-8">
<h2>Parsley.js Form Validation</h2>
<form id="testForm" data-parsley-validate>
<label>Name</label><br />
<input type="text" name="name" data-required="true">
<br /><br />
<input type="submit" value="Submit" class="btn btn-success">
</form>
</div>
</div>
</div>
</body>
</html>
Any suggestions on what's going wrong?
You'll need to use data-parsley-required or directly required in your DOM.
Here are all the built-in validators: http://parsleyjs.org/doc/index.html#validators
Best
javascript file import should be in following order.
JQuery.js
Parsley.js
Common.js
<script type="text/javascript" th:src="#{/js/jquery-2.1.4.min.js}"></script>
<script type="text/javascript" th:src="#{/js/parsley.min.js}"></script>
<script type="text/javascript" th:src="#{/js/common.js}"></script>
If it's not like this, some component can't be known and it'll not working.I know it is a bit late, but I hope it can help someone.