Jquery error

7 replies · opened Jan 14, 2023

AallaysJan 14, 2023

hi, i have problem with jquery (Uncaught ReferenceError: $ is not defined)
https://prnt.sc/658yXSa8NVa_

<div class="col-md-6">
<label for="Id Prog" class=" control-label"> Program </label>
<select name='id_prog' rows='5' id='id_prog' class="form-select {{ $errors->has('id_prog') ? ' is-invalid' : '' }}" required autofocus ></select>
@if ($errors->has('id_prog'))
<span class="invalid-feedback" role="alert">
{{ $errors->first('id_prog') }}
</span>
@endif
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#id_prog").jCombo("{!! url('daftarwilayah/comboselect?filter=program:id:PROGRAM&limit=WHERE:JENIS:=:'.'4 Wilayah') !!}",
{ selected_value : '{{ old('id_prog') }}' });
</script>

SSemicolon WebSTAFFJan 15, 2023

Hello,

This is not an issue with Canvas's Codes but the Custom JS Scripts added on the Page. From the screenshot you have provided the jquery.mask.min.js is causing a JS Conflict which is blocking the following scripts from executing causing a chained error. We recommend fixing the JS issues on you page which are there due to Customizations and then if you are still facing any further issues with the JS, please reply us here with a Live URL and we will definitely provide you with further assistance. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

AallaysJan 15, 2023

i was remove <script src="https://cdn.rawgit.com/igorescobar/jQuery-Mask-Plugin/1ef022ab/dist/jquery.mask.min.js"></script> bbut the problem not solve. i use jquery jcombo, still error and not show the option.
on header :
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,400i,700|Poppins:300,400,500,600,700|PT+Serif:400,400i&display=swap" rel="stylesheet" type="text/css" />
<link href="/css/bootstrap.css" rel="stylesheet">
<link href="/style.css}" rel="stylesheet">
<link href="/css/swiper.css}" rel="stylesheet">
<link href="/css/dark.css" rel="stylesheet">
<link href="/css/font-icons.css" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/magnific-popup.css" rel="stylesheet">
<link href="/css/custom.css" rel="stylesheet">
<script type='text/javascript' src='https://platform-api.sharethis.com/js/XXXXX' async='async'></script>
on footer
<script src="/js/jquery.bootstrap.js"></script>
<script src="/js/jquery.js"></script>
<script src="/js/plugins.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=XXXX"></script>
<!-- Footer Scripts============================================= -->
<script src="/js/functions.js"></script>

SSemicolon WebSTAFFJan 15, 2023

Hello,

We have attached the Screenshot of the JS Codes which is causing this issue. Please make sure that you add all your Custom JS Codes at the bottom of the Page after the js/functions.js File. So, moving this code at the bottom after the jQuery has been initialized should fix this issue. Please make sure that you read the Documentations to avoid unnecessary issues: https://docs.semicolonweb.com/docs/getting-started/javascript/#docs-snippet-custom-js-plugins .

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

AallaysJan 21, 2023

Hi team, thanks for your advice before, that still not solve my problem.
the problem can be solve when i removed jquery.js
and i must include jquery-library.js and jquery.migrate.js, but i have conflict.

do you have advice for my conflict?, thanks.

AallaysJan 21, 2023

ok, it's was clear, problem solve. Thanks.

SSemicolon WebSTAFFJan 22, 2023

Hello,

Glad the issue was resolved.

Do let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard