<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style_index.css">
<script src="js/testjs.js" charset="utf-8"></script>
<script src="js/sweetalert2.all.min.js"></script>
</head>
...
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
...
this is my code.
Search2 button works well, but Search1 button doesn't.
When I click this button, page has a lack and not work in IE11.
but in chrome it has no problem... I can't figure out why it does...
plz help me.
Sweetalert2 uses Promises but promises are not implemented by IE11. You have to include a polyfill (it's written in the docs). If you don't include the polyfill, you will have an error in the developer console logs (F12) "Promise" is undefined.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.26.12/sweetalert2.all.min.js"></script>
<!-- Include a polyfill for ES6 Promises -->
<script src="https://cdn.jsdelivr.net/npm/promise-polyfill"></script>
</head>
<body>
<div class="search">
<input type="text" id="search" name="search" required>
<button name="button" onclick="swal('Hi!')">Search1</button>
<button name="button2" onclick="alert('hi2')">Search2</button>
</div>
</body>
</html>
Related
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
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 using Bootstrap within a Symfony 2.7 based WebApp. Now I came across a strange problem when using the Bootstrap collapse function within a Form:
The collapse function is used to toggle the visibility of DOM objects. If use this function to toggle an element (e.g. a div container) within a Form, the form validation is triggered.
When I run the my code (see below) on my server, a "This field is required" messages pops up, as soon as a toggle the container using the button.
This does not seem to work here. The Snippet below works just fine. However you can see problem when running the Snippet on w3Schools.com instead. Click on this link to get to one of their examples. Replace the example code with my Snippet and run it.
The effect is the same es on my server: A click on the toggle button will trigger the form validation.
How can this bee? What is difference with the Snippet here (works OK) and the Snippet on my server or at w3Schools.com on the other hand (does not work)?
How can I avoid the form validation?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
Add button attribute type="button" If you are not specifying by default it will take as type="submit"
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" name="custom">
<div class="form-group">
<label class="control-label required" for="name">Name</label>
<input id="name" class="form-control" type="text" required="required" name="custom[name]">
</div>
<button type="button" class="btn btn-success" data-target="#toggleContainer" data-toggle="collapse" aria-expanded="true">Toggle</button>
<div id="toggleContainer" aria-expanded="true" style="">
1</br>
2</br>
3</br>
</div>
</form>
</div>
</body>
</html>
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.