I'm using Pixel Admin template, which is not a current version of now I think, to implement a jinja2 web application that using an old version of the select2 dependency version 3.5.1. It is working fine except when viewing it on iso device, that virtual keyboard is always showing on touch select2.
I know that this bug has already been fixed in select2 latest version 4.0.6, so I want to change it to this version.
layout.html
<!DOCTYPE html>
<html class="gt-ie8 gt-ie9 not-ie pxajs">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Application</title>
<script src="{{ url_for('static',filename='js/jquery-1.11.1.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/bootstrap.min.js') }}"></script>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/bootstrap.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pixel-admin.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/rtl.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/themes.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/pages.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='stylesheets/widgets.min.css') }}">
<script src="{{ url_for('static',filename='javascripts/dynamic_con.js') }}"></script>
<!-- Remove select2 old version -->
<!-- <script src="{{ url_for('static',filename='js/select2.js') }}"></script> -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="{{ url_for('static',filename='js/bootstrap-datepicker.js') }}"></script>
<script src="{{ url_for('static',filename='javascripts/toolbar.js') }}"></script>
<script>var init = [];</script>
{% block content %}
{% endblock %}
<script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>
<script type="text/javascript">
init.push(function () {
})
window.PixelAdmin.start(init);
</script>
</body>
</html>
Centre.html
{% extends "layout.html" %}
{% block content %}
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
{% endblock %}
when open the URL route http://127.0.0.1:5000/Centre, the select2 does not open at all ios devices but working fine on desktop view. Unless I remove main js file of pixel admin <script src="{{ url_for('static',filename='javascripts/pixel-admin.min.js') }}"></script>, the select2 is working fine, but other functionalities of theme will be missing as well as the main js script was removed. Therefore, this is not a solution I am looking for.
My question is how can replace select2 of version 3.5.1 in template pixel admin with select2 version 4.0.6 to make it working well on an ios device? Thanks.
Added:
I just found that in file pixel-admin.min.js which come along with themes consists of many other plugins including select2. I saw it contains an exact script of select2 script inside it. That might be a reason that I could not override it with a newer version of select2 because as said if I comment out file pixel-admin.min.js, it worked but other plugins and function inside that js file will be gone as well, I don't that. Therefore how can I overcome this trade-off? Please kindly help, I need that so badly, Thanks.
pixel-admin.min.jsand include select2 new version, it still did not work. I tested further found the main function of templatewindow.PixelAdmin.start(init);caused the problem. because when I disabled it, function select2 of new version just showing up. Yet, I was not supposed to remove the main functionality of the theme. Any suggestion please? Thanks – Premedical