I think I'm having a problem with jQuery

JavaScript
1

I have a page which uses jquery to put a picture in a select box, it also uses bootstrap so I think the two scripts are causing a problem

image
image1819×718 45.5 KB

The problem seems to be it doesn’t see the function (select2)
But when I comment out the three bootstap scripts, it seems to work
image
image1850×672 27.9 KB

The scripts I have are

<?php
session_start();

if(isset($_SESSION['email'])) { 
include "../conn.php";

$power_strip_id = (int)$_GET['id'];
	
$sql = 'SELECT power_strips.pdu_id,power_strips.name,power_strips.manufacturer,power_strips.model,power_strips.room_id,power_strips.row,power_strips.bay,
		power_strips.receptical_type,power_strips.total_recepticals,power_strips.voltage,power_strips.notes,power_strips.enabled,
		pdus.name AS pdu_name, pdus.pdu_id
       FROM power_strips 
	   INNER JOIN pdus ON power_strips.pdu_id = pdus.pdu_id
       WHERE power_strip_id = '.$power_strip_id;

//echo $sql;

$result = mysqli_query($conn, $sql);

?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="1800;url=../logout.php" />
<title>Edit PDU</title>
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="../css/tabs.css">
<link rel="stylesheet" href="../css/style.css" type="text/css" />
<link href='../css/select2.min.css' rel='stylesheet' type='text/css' / >


</head>
<body>
<script src='../scripts/jquery-3.0.0.js' type='text/javascript'></script>
<!-- select2 script -->
<script src='../scripts/select2.min.js'></script>        
<script>
$(document).ready(function(){
	$("#r_type").select2({
		templateResult: formatOptions
	});
	$("#p_type").select2({
		templateResult: formatOptions
	});});

function formatOptions (state) {
	if (!state.id) { return state.text; }

	console.log(state.element.value);
		var $state = $(
	'<span ><img sytle="display: inline-block" class="type" src="../images/' + state.element.value.toLowerCase() + '.png"  /> ' + state.text + '</span>'
	);
	return $state;
}
</script>
<!--<script src="../scripts/jquery-3.3.1.slim.min.js"></script>
<script src="../scripts/popper.min.js"></script>
<script src="../scripts/bootstrap.min.js"></script>-->

</body>
</html>
2

You can’t generally have 2 versions of jquery running (although there are ways if you need different versions for different plugins). Usually though you can get away with the latest version unless you need the deprecated features.

Therefore remove either the full version or the slim version (if you need full jquery).

Remove this:
<script src="../scripts/jquery-3.3.1.slim.min.js"></script>

It may be that you may not need the full version for select2 but haven’t checked yet. Just swap both files around and if select2 works with slim.js then stick with that.

3

thank you, it worked (both the menu dropped down and the images appear in the select options.

While were on the subject, im only using jquery so the menu drops down (I like how the menu is responsive and drops down)

image
image938×622 50.9 KB

Should I consider a CSS only approach for this effect

Isnt my use of jQuery overkill?
What is a good use of jQuery?```

4

Generally for a click action then js is best otherwise you need the checkbox hack and can it get awkward if you needs lots of other things to happen at the same time.

Bootstrap needs jquery for all its default hide and shows and toggles and other effects anyway. Use the slim version if it works with your select2.

Bootstrap 5 is doing away with jquery altogether and uses custom Js only.

Some people would say no use but it can be useful to smooth out browser inconsistencies and for people not that proficient in raw js. A lot of the good things from jquery are making (have made) their way into normal js so you can do a lot of the simple things without jquery these days.

As I mentioned above bootstrap needs it and so does your plugin I believe. If you are using bootstrap then you should use the bootstrap toggles and dropdowns etc anyway :slight_smile:

1 Like
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.