Cara menggunakan NOCONFLICT pada JavaScript

Diposting pada tanggal 19 April 2014

Konflik atau bentrok antar JQuery biasanya terjadi ketika memasang lebih dari satu script JQuery pada website, dan biasanya pula yang sering terjadi bentrok adalah file jquery.js dengan jquery.min.js, misalkan kita punya website yang menggunakan slider (memakai jquery.js), kemudian kita memasang livechat (memakai jquery.min.js), mungkin ketika kita ingin menampilkan maka ada salah satu bagian yang tidak bekerja sebagai misal slidernya tidak bergerak atau chatnya tidak muncul.

Bagaimana cara mengatasi konflik antar Jquery tersebut. Perhatikan contoh script yang belum ditambahkan deklarasi untuk mengatasi konflik:

1. $(document).ready(function(){

2. $("a.slick").click(function () {

3. $(".active").removeClass("active");

4. $(this).addClass("active");

5. $(".content-slick").slideUp();var content_show =

6. $(this).attr("title");

7. $("#"+content_show).slideDown();

8. });

9. });

Script diatas sebenarnya sudah berjalan dengan baik akan tetapi nyatanya bentrok sangat mudah terjadi. Perhatikan contoh script yang sudah ditambahkan deklarasi untuk mengatasi konflik:

1. var $jnoc = jQuery.noConflict();

2. $jnoc(document).ready(function(){

3. $jnoc("a.slick").click(function () {

4. $jnoc(".active").removeClass("active");

5. $jnoc(this).addClass("active");

6. $jnoc(".content-slick").slideUp();var content_show =

7. $jnoc(this).attr("title");

8. $jnoc("#"+content_show).slideDown();

9. });

10. });

Bandingkan contoh script diatas maka kita akan menemukan perbedaan yang sebenarnya sangat sederhana.Penjelasan:var $jnoc = jQuery.noConflict(); adalah script untuk mendeklarasikan fungsi jQuery.noConflict yang berfungsi untuk mengatasi konflik-konflik JavaScript$jnoc pada script berikutnya merupakan script untuk menggantikan fungsi dasar simbol "$". Jika di perhatikan maka sebenarnya semua simbol "$" tergantikan oleh script jQuery.noConflict hanya diwakilkan kepada script $jnoc yang sudah dideklarasikan sebelumnya pada baris 1.

$jnoc bisa saja diganti dengan kata apapun sesuai dengan keinginan, asalkan sesuai dengan kata yang dideklarasikan sebelumnya sebagai wakil dari script jQuery.noConflict pada baris 1.

Assalamualaikum gan, udah banyak cara agar mereka bisa bersatu tapi hasil nya selalu nihil, udah pake noConflict tapi masih aja gak bisa, masalah nya kalo jQuery.min.js ga di pake navbar menu nya berjalan sesuai tempat nya tapi data dari modal bootsrap gak muncul dan modal bootstrap ga bisa di close,.... pas bootstrap.min.js nya ga di pake tapi cuma pakek jQuery.min.js, data nya muncul, tapi modal bootstrap ga bisa d close juga.... dan banyak fungsi menu yg gak berjalan ketika dua2 nya di pake, datanya muncul modal bootstrap bisa di close tapi ada menu yang menjorok kebawah .. ini gambarnya..... \\ini menu nya jadi kebawah pas di klik

 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script type="text/javascript">
jQuery.noConflict();
    jQuery(document).ready(function(){
        $('.view_data').click(function () {
            var id = $(this).attr("id");
            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
		url : 'detail.php',
                method : 'post',
                data :  {id:id},
                success : function(data){
                $('#fetched-data').html(data);//menampilkan data ke dalam modal
		$('#myModal').modal("show");

		
		
		
                }
            });
         });
    });
  </script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 

@Obbytokun

169 Kontribusi 10 Poin

Dipost: 3 tahun yang lalu Update 2 tahun yang lalu

• disertakan juga error tab consolenya masingmasing saat kasus pertama dan saat kasus kedua, - @hilmanski
• apakah jamu pake library external lain? seperti library UI dan lainnya? tambahkan juga infonya - @hilmanski

Jawaban

Saya sudah coba basenya tidak ada masalah, kode berjalan, bisa ditutup, tidak ada error, Disini tidak menggunakan jquery conflict, dengan urutan seperti ini:

  
//css bootstrap di tag head
//kode HTML //modal danlain-lain

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script type="text/javascript">
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').trigger('focus')
        })
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

@hilmanski

2485 Kontribusi 2052 Poin

Dipost: 3 tahun yang lalu Update 3 tahun yang lalu

• buat tampilan biasa memang bisa di close, tapi di ane itu pas pakek js nya si menu yg di navbar pas di klik jadi ngaco kaya d gambar di atas - @Obbytokun
• maksudnya pake "js nya?". konteksnya ditulis detail ya biar teman-teman tahu apa yang perlu dicoba dan bisa memperkirakan masalahnya. - @hilmanski

Untuk masalah modal tidak bisa diclose, Mungkin karena ada lebih dari satu modal (di pertanyaan tidak ada infonya) Perhatikan data-target dan id modalnya itu sendiri, pastikan dia berbeda antara satu modal dengan modal yang lain agar tidak tabrakan contoh 2 modal

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
      Launch demo modal
    </button>

    <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
  Launch demo modal2
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title 2</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  </div>
</div>
</div>
</div> 

@hilmanski

2485 Kontribusi 2052 Poin

Dipost: 3 tahun yang lalu

• modal cuman ada satu gan.... - @Obbytokun

Kalau pakai ajax, tidak cukup jquery slim, coba import juga kode ajaxnya

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> //seteleh import jquery 

@hilmanski

2485 Kontribusi 2052 Poin

Dipost: 3 tahun yang lalu

• nanti saya coba gan - @Obbytokun

Login untuk gabung berdiskusi