MultiSelect using Jquery is not working - javascript

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

Related

how to show the only the loding.gif on (onclick) with flask backend?

I am new to jquery & js. I am using a flask application for my mini project.
I am calling the loding.gif file via js/jquery script. it is working like when I hit submit button in html loding.gif file is called, but it is showing below to the submit button itself.
I want like 'if I hit submit button in html, only loding.gif as to show' other content like form name dropdown, everything has to hide.
what I need to change?
index.html
<!DOCTYPE html>
<html lang="en">
<html><head>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<div class="content">
<h1>The select form attribute</h1>
<right>
<!--<img src="https://media.giphy.com/media/l1J9LIsJB4xHMzLLq/giphy.gif">-->
</right>
<div class="zoom"></div>
<form method="POST" id="carform">
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<!--<input type="submit" value="Submit">-->
<input type="submit" name="anything_submit" value="Submit" onclick="$('#loading').show();">
</form>
<div id="loading" style="display:none;"><img src="{{url_for('static', filename='loder.gif')}}" alt="loading......" />Loading...!</div>
<br>
</div>
</body>
</html>
You can wrap your form inside a div and hide it when you submit your form. So, there's not much more to be added. Take a look:
$('#submit_leave_email').submit(function(e) {
$("#will_hide").hide();
$('#loading').show();
setTimeout(()=>{
$('#loading').replaceWith("<img src='https://c.tenor.com/Kt8pNHXHLKwAAAAC/module-free.gif' width='100'>");
}, 3000)
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="will_hide">
<form id='submit_leave_email' method='post'>
<label for="uname">Firstname:</label>
<input type="text" id="uname" name="uname">
<br>
<select id="cars" name="carfs">
<option value="volvo">Volvo XC90</option>
<option value="saab">Saab 95</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<br>
<select id="image" name="image">
<option value="volvo">Volvo XC90</option>
<option value="debian">debian</option>
<option value="mercedes">Mercedes SLK</option>
<option value="audi">Audi TT</option>
</select>
<button type='submit' class='input_button' value='submit'>Insert </button>
</form>
</div>
<div id="loading" style="display:none">
<p>Loading...!</p>
</div>
</body>
Notice that I used the setTimeout just to simulate the delay of backend's response and e.preventDefault() to avoid submitting the form from here.

jQuery in external file not working

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>

Can we use select2 inside the dialog?

I am working in asp.net core. I am using typescript. I am using select2.
HTML:-
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Script:-
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
css and js:-
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
This is my code for select2. I am using select2 inside the modal dialog. When using select2 inside the dialog, it does not work.
I check like using select2 outside of the modal dialog, it works fine.
Can we able to use select2 inside of the modal dialog? If yes means, how?
Version of select2: 4.0.3
It works fine inside modal too. (check snippet)
$(document).ready(function() {
$(".js-example-basic-multiple").select2();
$("#dialog").dialog();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="dialog" title="Basic dialog">
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</div>

How to display the input box in select2?

I am working in asp.net core. And I am using typescript. I am using select2 option.
HTML:-
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
Script:-
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
style:-
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
script:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
This is my code. I get output like this.
The input box is not appear. I want like this:
When I click in the box, the popup should appear like below:
How can I achieve it?
I write a html and script code in partial view. And I add a css and js file in layout html file.
Try below example. the code in the question don't have closing < script > tag.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge,chrome = 1">
<title>Hello World using select2.js</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
</head>
<body>
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</body>
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
</html>
It works fine here,
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select multiple id="e1" class="js-example-basic-multiple js-states form-control">
<option value="AL">Alabama</option>
<option value="Am">Amalapuram</option>
<option value="An">Anakapalli</option>
<option value="Ak">Akkayapalem</option>
<option value="WY">Wyoming</option>
</select>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
$(document).ready(function () {
$(".js-example-basic-multiple").select2();
});
</script>
</html>

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