jQuery in external file not working - javascript

Just testing a calculator with some different functions. I got a problem when i move the code to an external js file and then trying to import it. The calculator will not run when i do it this way.
HTML code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="custom.js"></script>
</head>
<body>
<div><input id="a1" type="text" value="0" min="0"/></div>
<div>Velg en:</div>
<div>Dårlig<input type="checkbox" name="checkbox" class="checkbox_dårlig"></div>
<div>Normal<input type="checkbox" name="checkbox" class="checkbox_normal"></div>
<div>Bra<input type="checkbox" name="checkbox" class="checkbox_bra"></div>
<select>
<option disabled selected value> -- Velg en type -- </option>
<option id="test1">Test 1</option>
<option id="test2">Test 2</option>
<option id="test3">Test 3</option>
<option id="test4">Test 4</option>
<option id="test5">Test 5</option>
</select>
<div>Value: <input id="pris" type="text" value="0" /></div>
</body>
</html>
JS:
$(document).ready(function(){
$('#a1').keyup(calculate);
$(".checkbox_dårlig").change(calculate);
$(".checkbox_normal").change(calculate);
$(".checkbox_bra").change(calculate);
$("select").change(calculate);
$('input[type="checkbox"]').on('change', function() {
$('input[type="checkbox"]').not(this).prop('checked', false);
calculate()
});
});
function calculate(e) { some code }
Can someone see where the problem is?

You didn't import the file. You have to put it in src not type
You have to import it in this way:
<script type="text/javascript" src="custom.js"></script>

Related

Javascript set default value on dropdownlist not working

<select id="modalAdd_DDLSample"> </select>
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
$("#modalAdd_DDLSample").val("1");
$("#modalAdd_DDLSample").val(1);
$("#modalAdd_DDLSample").val('1');
$("#modalAdd_DDLSample").val("1");
$('#modalAdd_DDLSample option[value="1"]').attr("selected",true);
$('#modalAdd_DDLSample option[value="1"]').attr("selected","selected");
I have tried many ways to set dropdownlist value to default value 1(MAC) when form is load but none of them works, did I missed something important? Appreciate your help
<select id="modalAdd_DDLSample">
<option value="0"> PC</option>
<option value="1"> MAC </option>
<option value="2"> Raspberry </option>
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
let value="1";
$("#modalAdd_DDLSample").val(value);
</script>
Put the options into the select and write selected in the one you want default.
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1 selected> MAC </option>
<option value=2> Rasberry </option>
</select>
Your select code is wrong, the options should be written inside select tag.
This is the html code.
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
</select>
don't forget to include the jquery library
this is the javascript code
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type="text/javascript">
$(function(){
$("#modalAdd_DDLSample").val(1);
});
</script>
When the page is loaded, it will automatically set modalAdd_DDSSample value to MAC.
Your JS Code is right but you have issue in the HTML code
Check Out the code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</head>
<body>
<select id="modalAdd_DDLSample">
<option value=0> PC</option>
<option value=1> MAC </option>
<option value=2> Rasberry </option>
</select>
<script>
$(function(){
$("#modalAdd_DDLSample").val("1");
});
</script>
</body>
</html>

HTML Entities Displaying Encoded when Cloned with jQuery

I'm new to jQuery, and while my code does mostly what I want it to (in duplicating a form group), I'm having a couple of issues with the classes/values of the buttons:
When clicked, the .btnadd that is appended to the .formdupgroup loses it's value, rather than having a '+' symbol on it, it displays nothing.
2.When the duplicate .btnadd classes are changed to be .btnremove, they display the HTML entity as text on the button. Rather than a 'x' symbol, they read '×' in full.
I'm sure these issues are related to decoding the HTML entities in both cases, but I can't find a way to work around it, without resorting to just typing the unevenly spaced 'x' and '+' characters. How do I add a decoded HTML entity as the value on my inputs?
$(function(){
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val('×');
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='&plus;'>
</div>
</div>
</div>
</form>
</div>
</script>
</body>
</html>
You don't need to escape + and × so you can just enter these directly into your function.
The reason the value is blank is because the val property is being reset by this line:
newEntry.find('input').val('');
Here's a working JSFiddle.
The reason .val('×'); Doesnt put an "x" in there is because javascript does not parse these html codes itself. You will need to specify that it has to be parsed.
Here is a working model to use html codes in javascript/jquery.
$(function(){
var parser = new DOMParser;
$(document).on('click','.btnadd',function(e){
e.preventDefault();
var controlForm = $(this).parents('.formdupgroup:first'),
currentEntry = $(this).parents('.toduplicate:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val(parser.parseFromString('&plus;', 'text/html').body.textContent);
newEntry.find('select').prop('selectedIndex',0);
controlForm.find('.btnadd:not(:last)')
.removeClass('btnadd').addClass('btnremove')
.removeClass('btn-success').addClass('btn-danger')
.val(parser.parseFromString('×', 'text/html').body.textContent);
}).on('click','.btnremove', function(e){
$(this).parents('.toduplicate:first').remove();
e.preventDefault();
return false;
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>
<body>
<div class='container-fluid'>
<form>
<div class='formdupgroup'>
<div class='form-row toduplicate'>
<div class='col-md-2'>
</div>
<div class='form-group col-md-8'>
<label for='selectexample' class='sr-only'>Select Example</label>
<select name='selectexample' class='form-control'>
<option value='' disabled selected>Please Select an Option</option>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
<option value='4'>Option 4</option>
<option value='5'>Option 5</option>
<option value='6'>Option 6</option>
<option value='7'>Option 7</option>
<option value='8'>Option 8</option>
<option value='9'>Option 9</option>
<option value='10'>Option 10</option>
</select>
</div>
<div class='col-md-2'>
<input type='button' class='btn btn-success btnadd' value='&plus;'>
</div>
</div>
</div>
</form>
</div>
</body>
</html>
This also works for html codes that dont apear on your keyboard. for example ♠

MultiSelect using Jquery is not working

I am using This Jquery Multi Select but while using it it gives me error for $(...).multiSelect is not a function. I guees it is the problem of javascript not implemented so i check it twice but I found all javascript need is implemented properly. Below is the necessary code for it
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
<script src="~/assets/plugins/jquery-1.10.1.min.js"></script>
<script src="~/assets/scripts/ui-jqueryui.js"></script>
<script src="~/assets/lou-multi-select-759348a/js/jquery.multi-select.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>
Here is how you call the Scripts and I have attached a Screenshot of the o/p:
I have Just moved the Scripts above the HTML
Note: its a working example taken from your HTML only
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="js/jquery.multi-select.js"></script>
<script>
$(document).ready(function () {
$('#Pages').multiSelect();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="PageList" class="portlet-body fuelux" >
<select name="Pages[]" size="20" id="Pages" multiple="multiple" style="border:none;width:100%"> <option>xyz</option>
<option value="1">xyz</option>
<option value="2">xyz</option>
<option value="3">xyz</option>
<option value="4">xyz</option>
<option value="5">xyz</option>
<option value="6">xyz</option>
</select>
</div>
</form>
</body>
Edit: After Adding the Css of Multi select here is the view

Bootstrap multiselect dropdown is not visible

Despite the fact that I can make this bootstrap-multiselect work in independent file, I'm not able to see the dropdown list once I click on caret, even if I included it in portal files.
I have already used bootstrap-datepicker, datetimepicker, chosen, and backbone.js
This is the line which is supposed to do the trick
$('.insightList').multiselect({
selectAllText: true
});
Does anyone have an idea of what can be the cause for not adding class 'open' for 'btn-group'?
![On click also there is only btn-group class for div whether it should add open class][1]
Thanks in advance
I've just created a jsbin to solve your problem Working demo.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
<meta charset="utf-8">
<title>Example by #Bneiluj</title>
</head>
<body>
<select id="insightList" multiple="multiple">
<optgroup label="Group 1">
<option value="1-1">Option 1.1</option>
<option value="2-1">Option 2.1</option>
<option value="2-2">Option 2.2</option>
<option value="2-3">Option 2.3</option>
</optgroup>
</select>
<script id="example">
$('#insightList').multiselect({
enableClickableOptGroups: true
});
</script>
Please, let me know if you have any question.
Check the Occurrence of the
Bootstrap.js
Bootstrap-select.js
Bootstrap-multiselect.js
if one of them exist more then 1 times then the dropdown will not displayed
Make sure your HTML structure for the dropdown is as follows:
<select id="example-selectAllText" multiple="multiple" style="display: none;">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
<div class="btn-group"><button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="None selected" aria-expanded="false"><span class="multiselect-selected-text">None selected</span> <b class="caret"></b></button><ul class="multiselect-container dropdown-menu"><li class="multiselect-item multiselect-all"><a tabindex="0" class="multiselect-all"><label class="checkbox"><input type="checkbox" value="multiselect-all"> Check all!</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="1"> Option 1</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="2"> Option 2</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="3"> Option 3</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="4"> Option 4</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="5"> Option 5</label></a></li><li><a tabindex="0"><label class="checkbox"><input type="checkbox" value="6"> Option 6</label></a></li></ul></div>
$('#example-selectAllText').multiselect({
includeSelectAllOption: true,
selectAllText: 'Check all!'
});
This is the simple multi select am trying to build with the same bootstrap multiselect I have loaded all the necessary jquery and css but still it shows a select box displaying all the options it has not as proposed in above solution.
<select id="multi-select" name="field" multiple="multiple" >
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<!-- initialize multiselect -->
<script>
$(document).ready(function() {
$('#mult-select').multiselect();
});
</script><!-- //ends-->

JSfiddle code is not working

I am trying to transfering elements from one listbox to another listbox in html. For this I am using below code:
Question ::--This code I found from a link by stackoverflow which redirects to jsfiddle site, it is working on that site but not working here??
<html>
<header>
<script type="text/javascript">
$(function(){
$("#button1").click(function(){
$("#list1 > option:selected").each(function(){
$(this).remove().appendTo("#list2");
});
});
$("#button2").click(function(){
$("#list2 > option:selected").each(function(){
$(this).remove().appendTo("#list1");
});
});
});
</script>
</header>
<body>
<div>
<h3>List A</h3>
<select id="list1" multiple="multiple" rows=2>
<option value=1>Option 1</option>
<option value=2>Option 2</option>
<option value=3>Option 3</option>
<option value=4>Option 4</option>
</select>
<br/>
<input id="button1" type="button" value="Move to List B" />
</div>
<div>
<h3>List B</h3>
<select id="list2" multiple="multiple" rows=2>
</select>
<br/>
<input id="button2" type="button" value="Move to List A" />
</div>
</body>
</html>
I know this is very silly question but I am a beginner.
What I did wrong here?? please help me ..
Add jquery file in <head></head> section like this
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
then it works fine.

Categories