I have a scenario of two different files where I need to load one html in another.
iframe.html:
<select data-placeholder="Choose a Country..." class="flexselect">
<option value=""></option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Algeria">Algeria</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
</select>
<iframe src="index.html" style="width:100%; border: 0px solid #fff;"></iframe>
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://rmm5t.github.io/jquery-flexselect/flexselect.css">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.6.4.js" type="text/javascript"></script>
<script src="http://rmm5t.github.io/jquery-flexselect/jquery.flexselect.js" type="text/javascript"></script>
<script src="http://rmm5t.github.io/jquery-flexselect/liquidmetal.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("select.flexselect").flexselect();
});
</script>
</body>
</html>
It doesn't show any error at the same time its not working too. What I have observed is that its not getting triggered on the select tag which is above the iframe tag.
It works if I keep the select tag content in the index.html page, but there the iframe is not allowing to display the full dropdown content. It is getting restricted to certain height & allowing to scroll.
So I can't keep select tag in the iframe, it should be out of the iframe.
How can we make it workable?
You should know , How communication between iframe and parent window works.
Below code you can use to call parent window method.
window.parent.functionName();
Related
I'm trying to use bootstrap-multiselect to get a multi-select dropdown on my web page.
I've created a minimal example, the code of which is below. When I run this I get a single 'old-style' looking button on the page, which does nothing when it is clicked. I was expecting one of the bootstrap-multiselect dropdown multiselects.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
crossorigin="anonymous">
</script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet"
type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript">
</script>
</head>
<body>
<select id="example-getting-started" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$('#example-getting-started').multiselect();
});
</script>
</body>
</html>
What am I doing wrong?
Problem is in versions you use.
Bootstrap is supported up to version 4 since they have migration guide just up to v4
And also, as I can see, rawgit version that you use is not the same as the latest version.
Here is the version that uses js and css from their page and it works fine.
If you need it to work with v5 then you can use it like this
$('#example-getting-started').multiselect({
buttonClass: 'form-select',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-bs-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
}
});
And you also need to use bundle version of bootstrap which contains popper.js
Here is example
I'm trying to understand the Web Components, so I want to create a web component that would "wrap" a select tag into the select2.
Here's my main HTML:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select2-select>
</div>
</body>
</html>
And my custom element:
<link rel="import" href="../bower_components/polymer/polymer.html"></link>
<polymer-element name="select2-select">
<template>
<select id="main">
<content></content>
</select>
</template>
<script>Polymer({});</script>
</polymer-element>
The problem is, the option tags aren't being inserted in the shadow DOM:
What am I doing wrong? I'm running Firefox on Ubuntu 14.04.2, if it's anyhow relevant.
Thank you very much.
Yeah that happens, the easiest way around it is to use attributes. I've amended your original script to make it work.
Main html:
<html>
<head>
<title>Web components</title>
<meta charset="utf-8"></meta>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="elements/select2-select.html"></link>
</head>
<body>
<div>
<select2-select options='[
{"value":"1","text":"1"},
{"value":"2","text":"2"},
{"value":"3","text":"3"},
{"value":"4","text":"4"}
]'></select2-select>
</div>
</body>
</html>
custom element:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="select2-select" attributes="options">
<template>
<select id="main">
<template repeat="{{option in options}}">
<option value={{option.value}}>{{option.text}}</option>
</template>
</select>
</template>
<script>
Polymer('select2-select', {
publish: {
options: {},
}
});
</script>
</polymer-element>
The first thing I can think of is that JQuery & Select2 are not accessible to the element because you have added them to the global scope. As per The Golden Standard Expressed Dependencies section Web Components should be responsible for their own dependencies.
The other thing to look at is that some HTML elements will only render inside other specific elements. For example - If I add option tags to div, they will not render unless they are wrapped in a select tag.
I am trying to implement a nice multi select field by using the loudev multi-select.js I followed the steps on the page, but nothing happens - only a normal multiple <select> is shown. The paths to multi-select.css and jquery.multi-select.js are OK.
I can't figure what's wrong:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="/css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$('#my-select').multiSelect({});
</script>
</body>
</html>
The code above is working perfectly fine. You need to click on the CTRL key and make multiple selections. Do you want to see the selected items in a separate box on the right as shown on the developer's website ?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link href="css/multi-select.css" media="screen" rel="stylesheet" type="text/css">
</head>
<body>
<select multiple="multiple" id="my-select" name="my-select[]">
<option value='elem_1'>elem 1</option>
<option value='elem_2'>elem 2</option>
<option value='elem_3'>elem 3</option>
<option value='elem_4'>elem 4</option>
<option value='elem_100'>elem 100</option>
</select>
<script src="js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$('#my-select').multiSelect({});
</script>
</body>
</html>
I think you made a slight mistake in the placement of the css and js files. Note that I removed the leading slash in front of the JS and CSS file and it is working fine for me. I assume you have the following directory structure
HTML file
js/ js file inside here
css/ css file inside here
Well I found my problem - it's because I'm using https:// to load the page. In such case the links to jQuery should be also https otherwise the browser ignores them:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
Thanks to Rahul Kadukar and his answer to point me that the code is overall OK.
in hard-work I created a selected form with images, correctly shown in Firefox, Chrome and Internet Explorer in compatibility mode.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>InputEdit Demo</title>
<link rel="stylesheet" type="text/css" href="css/standard.css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="inputedit.js"></script>
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700' rel='stylesheet' type='text/css'/>
</head>
<body style="margin:30px;">
<form action="form.php" method="post">
<select id="sel_no1" name="sel_no1" class="inputEdit_select">
<option value="1">Diese Woche</option>
<option value="2">Diesen Monat</option>
<option value="3">Hall of Fame</option>
</select>
</form>
</body>
</html>
I used the Javascript plugins from there:
Download They used MooTools, a JavaScript framework.
Now to my Problem:
when i want to use onclick="this.form.submit();" nothing happens.
Did anyone of you can get me a better use of an well designed select form with onchange submit? Or show me how can i solve my problem?
Here I've uploaded all my files with a preview. This problem I try to fix for a lot of hours. I hope some friendly guy would help me.
Regards
Robin
If you want to just submit the form when the select box is changed, do this:
<form action="form.php" method="post" id="theForm">
<select id="sel_no1" name="sel_no1" class="inputEdit_select" onchange="document.getElementById('theForm').submit();">
<option value="1">Diese Woche</option>
<option value="2">Diesen Monat</option>
<option value="3">Hall of Fame</option>
</select>
</form>
why does the following code don't focus the filteringselect?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://yandex.st/dojo/1.6.0/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<style type="text/css">
#import "http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css";
</style>
<script type="text/javascript">
<!--
dojo.require("dijit.form.FilteringSelect");
dojo.addOnLoad(function(){
dijit.byId('dept').focus();
});
-->
</script>
</head>
<body class="claro">
<select name="dept" id="dept" dojoType="dijit.form.FilteringSelect" >
<option value=""></option>
<option value="test">test</option>
<option value="test1">test1</option>
</select>
</body>
</html>
I tried it with ie7 and firefox 3/4 - it works.
but it fails in ie8 :-(
may this be a dojo bug - or am I doing something wrong?
when does dojo.addOnLoad() fire? after the DOM is ready, or after all widgets have properly been initalized?
regards
gerhard
it's very intresting bug.. i have made small research and found solution. maybe it looks like a "dirty hack", but still it can help you.
you can simply add timeout:
dojo.addOnLoad(function () {
setTimeout(function () { dijit.byId('dept').focus() }, 400);
});
Not noticeable by a user but it gives IE a moment to breathe.
It's work in IE8 for me
I'm not sure what browsers fully support this, but you could try:
<select name="dept" id="dept" dojoType="dijit.form.FilteringSelect" autofocus>
Also, I don't see why you're using an Import statement if you could just use the link tag:
Before:
<style type="text/css">
#import "http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css";
</style>
After:
<link rel="stylesheet" type="text/css" href="http://yandex.st/dojo/1.6.0/dijit/themes/claro/claro.css">