I have a elemetn in my page. I don't control all javascripts used in this page, and seems that in some place my "select" element is being parsed by dojo and changed to a dijit element (dijit.form.select).
This element does not have an attribute "data-dojo-type", so I don't know why it is being changed.
Is there someway to avoid dojo parse this element?
<tr>
<th scope="row"><div dojoType="dijit.InlineEditBox">Stuff</div></th>
<td>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
I can't see the problem you have in this jsfiddle. The InlineEditBox becomes a dijit, but the <select> does not. The example can try both Dojo 1.6.0 and Dojo 1.8.3:
HTML:
<script>
var dojoConfig = {
parseOnLoad: false
};
</script>
<script>
var v16 = "https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js";
var v18 = "https://ajax.googleapis.com/ajax/libs/dojo/1.8.3/dojo/dojo.js";
var dojoUrl = v18;
document.writeln("<script src='" + dojoUrl + "'></scr" + "ipt>");
</script>
<table border="1">
<tr>
<th scope="row">
<div id="inlineEditBox1" dojoType="dijit.InlineEditBox">Stuff</div>
</th>
<td>
<select id="select1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
</table>
JS:
function dojo16ready() {
if (!(dojoConfig && dojoConfig.parseOnLoad)) {
dojo.parser.parse();
}
}
function dojo18ready(parser, registry) {
function go() {
console.log("inlineEditBox1", registry.byId("inlineEditBox1"));
console.log("select1", registry.byId("select1"));
}
if (!(dojoConfig && dojoConfig.parseOnLoad)) {
parser.parse().then(go);
}
}
function init() {
console.log("dojo.version", dojo.version);
if ("function" !== typeof require) {
// Must require before onload
dojo.require("dijit.InlineEditBox");
dojo.addOnLoad(dojo16ready);
} else {
require(["dojo/parser", "dijit/registry", "dijit/InlineEditBox"], dojo18ready);
}
}
init();
Related
I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
i am using https://developer.snapappointments.com/bootstrap-select/examples/
its working fine in view but when i using this in Jquery below code its not working. help me to fix this.
view code
<table id="tableAppointment" style="background-color:powderblue;">
<tr>
<th style="text-align:center;" colspan="1">NAME</th>
<th style="text-align:center;" colspan="1">HSN/SAC</th>
<th><i class="glyphicon glyphicon-plus">ADD</i></th>
</tr>
<tr>
<td >
<select class="selectpicker" data-live-search="true" name="product_name[]">
<option value=""></option>
#foreach ($addnewitem as $key=>$addnewitems)
<option >{{$addnewitems->product_name}}</option>
#endforeach </select>
</td>
<td >
<select class="selectpicker" data-live-search="true" name="part_no[]">
<option value=""></option>
#foreach ($addnewitem as $key=>$addnewitems)
<option >{{$addnewitems->part_no}}</option>
#endforeach </select>
</td>
<td><i class="glyphicon glyphicon-remove">REMOVE</i></td>
</tr>
</table>
<script type="text/javascript">
$('.addRow').on('click',function(){
addRow();
});
function addRow()
{
var tr='<tr>'+
'<td ><select class="selectpicker" data-live-search="true" name="product_name[]"><option
value=""></option> #foreach($addnewitem as $key=>$addnewitems)<option >{{$addnewitems->product_name}}</option>#endforeach </select></td>'+
'<td ><select class="selectpicker" data-live-search="true" name="part_no[]"><option value=""></option> #foreach($addnewitem as $key=>$addnewitems)<option >{{$addnewitems->part_no}}</option>#endforeach </select></td>'+
'<td><i class="glyphicon glyphicon-remove">REMOVE</i></td>'+
'</tr>';
$('tbody').append(tr);
};
$('.remove').live('click',function(){
var last=$('tbody tr').length;
if(last==1){
alert("you can not remove last row");
}
else{
$(this).parent().parent().remove();
}
});
</script>
after click $('.addRow') u need to re-render selectpicker
You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.
$(document).on('click','.addRow',function(){
addRow();
$('.selectpicker').selectpicker('refresh');
});
How i can add input field on specific selection in depended drop down
i want to show input field when user select other option in drop down list.
Like when someone want to add something more that is not in the list he can add manually.
List will be too big I'm just showing the first three categorizes
Here is my code:
#extends('layout/header')
#include('layout/sidebar')
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h1 class="motetreports_heading"></h1>
{{-- first sequnce --}}
<form action="/atgard" method="post">
#csrf
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category1 :</td>
<td width="59%" align="left" valign="middle">
<select name="category1" id="category1">
<option value="">Select Category1</option>
<option value="home_ware">Home Ware</option>
<option value="education">Education</option>
<option value="books">Other</option>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category2 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category2" name="category2">
<option value>Select Category2</option>
<!-- Home Ware -->
<optgroup data-rel="home_ware">
<option value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
<option value="audio-video">Audio/Video</option>
<option value="beddings">Beddings</option>
<option value="camera">Camera</option>
<option value="cell-phones">Cell Phones</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="education">
<option value="Colleges">Colleges</option>
<option value="Institutes">Institutes</option>
<option value="Schools">Schools</option>
<option value="Tuitions">Tuitions</option>
<option value="Universities">Universities</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="books">
<option value="College Books">College Books</option>
<option value="Engineering">Engineering</option>
<option value="Magazines">Magazines</option>
<option value="Medicine">Medicine</option>
<option value="References">References</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td align="right" valign="middle">Category3 :</td>
<td align="left" valign="middle">
<select disabled="disabled" class="subcat" id="category3" name="category3">
<option value>Select Category3</option>
<!-- Home Ware -->
<optgroup data-rel="home_ware">
<option value="foo1">category3 home ware 1</option>
<option value="foo2">category3 home ware 2</option>
</optgroup>
<!-- Education -->
<optgroup data-rel="education">
<option value="foo3">category3 Education 1</option>
<option value="foo4">category3 Education 2</option>
</optgroup>
<!-- Books -->
<optgroup data-rel="books">
<option value="foo5">category3 Books 1</option>
<option value="foo6">category3 Books 2</option>
</optgroup>
</select>
</td>
</tr>
</table>
<button type="submit" style="width: 100px;" class="btn btn-primary">Skicka</button>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $cat = $("#category1"),
$subcat = $(".subcat");
var optgroups = {};
$subcat.each(function(i,v){
var $e = $(v);
var _id = $e.attr("id");
optgroups[_id] = {};
$e.find("optgroup").each(function(){
var _r = $(this).data("rel");
$(this).find("option").addClass("is-dyn");
optgroups[_id][_r] = $(this).html();
});
});
$subcat.find("optgroup").remove();
var _lastRel;
$cat.on("change",function(){
var _rel = $(this).val();
if(_lastRel === _rel) return true;
_lastRel = _rel;
$subcat.find("option").attr("style","");
$subcat.val("");
$subcat.find(".is-dyn").remove();
if(!_rel) return $subcat.prop("disabled",true);
$subcat.each(function(){
var $el = $(this);
var _id = $el.attr("id");
$el.append(optgroups[_id][_rel]);
});
$subcat.prop("disabled",false);
});
});
</script>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
#include('layout/footer')
I think you should put an document.getElementById("theselectid").selected = true; or something that will indicate that it was checked, then: inside if, document.getElementById("theidofinput").disabled = false;document.getElementById("theidofinput").style.opacity = 1.0; or something.
I want to display images in dropdown... I'm using tag for this purpose, but it won't show the images...
HTML Code:-
<label for="event_icon">Choose Icon: </label>
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg"><img src="icons/vaisakhi.jpg" width="20px" height="20px"/></option>
<option value="cake.png"><img src="icons/cake.png" width="20px" height="20px"/></option>
<option value="game.png"><img src="icons/game.png" width="20px" height="20px"/></option>
</select>
html:
<select name="event_icon" id="event_icon">
<option>Select An Icon</option>
<option value="vaisakhi.jpg" data-style="background-image: url('icons/vaisakhi.jpg');"></option>
<option value="cake.png" data-style="background-image: url('icons/cake.png');"></option>
<option value="game.png" data-style="background-image: url('icons/game.png');"></option>
</select>
script:
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", {text: item.label});
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#event_icon")
.iconselectmenu()
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons avatar");
});
</script>
You can try this
<select>
<option style="background-image:url(male.png);">male</option>
<option style="background-image:url(female.png);">female</option>
<option style="background-image:url(others.png);">others</option>
</select>
I'm trying to link to other html pages via dropdown, and I've tried various codes but can't seem to get it to work. I'm using this code:
<form name="dropdown">
<select name="list" accesskey="target">
<option selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
<select>
<input type=button value="Go" onclick="goToNewPage(document.dropdown.list)">
I have different html pages laid out differently to alternate between layouts, how can I get this to work?
You may try this
<form>
<select name="list" id="list" accesskey="target">
<option value='none' selected>Choose a theme</option>
<option value="index.html">Theme 1</option>
<option value="theme2.html">Theme 2</option>
<option value="theme3.html">Theme 3</option>
</select>
<input type=button value="Go" onclick="goToNewPage()" />
</form>
JS: (Put this code into your <head>...</head> secion)
<script type="text/javascript">
function goToNewPage()
{
var url = document.getElementById('list').value;
if(url != 'none') {
window.location = url;
}
}
</script>