HTML Conflicts in two javascript files

Asked

Viewed 1,134 times

1

I’m having trouble calling two files .js in my html page, because the two do not work together, only separately, I believe it is a conflict problem, what add an effect of Alert custom on my site, but when I paste the code on the site the captcha does not work, is carrying infinitely this way: inserir a descrição da imagem aqui

follows below the path of the . js files that are conflicting:

I want to add the code below:

<!DOCTYPE html>
<html>

      <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="dialog-confirm" title="Excluir pedido?"></div>

<button id="btn" onclick="confirmar();">Clica</button>
    <script type="text/javascript">
        function funcao_b() {
  alert('funcao B');
}
function confirmar() {
    $( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Excluir pedido": function() {
          $( this ).dialog( "close" );
          funcao_b();
        },
        'Cancelar': function() {
          $( this ).dialog( "close" );
          console.log('cancelado');
        }
      }
    });
}
    </script>
</html>

In the source code of this site:

http://natupote.net16.net/

How do I eliminate this conflict?

javascript jquery html

  • I just tested and I show the normal captcha, if the problem was only that I suggest to investigate better what is happening.

  • @Neuberoliveira I opened now and the captcha does not work

  • can you see again? was updating the site constantly at this time, I think I had taken the script q gave the conflict

  • uses your browser’s debug tools and see if you have any error, javascript error or network error, as captch usually comes from outside may be that there is something wrong

  • @Neuberoliveira, you were right, it was working, I’m sorry but now I added the script and the conflict is back, you can close the page q captcha will not work

  • thanks for the patience

  • @Neuberoliveira believe that the error is conflict even, because captcha now pifou q put the message script

  • Doubt is still open...

  • this is not conflict because the files are totally different, one is jquery-1.12.4.js and the other is jquery-ui.js user interface

  • and this normal functioning.

  • Why don’t you try to download the files and play in a local folder.

  • @GOKUSSJ4 Strange, in my notebook the captcha part does not load, I tried on my mobile phone and the error continues, the captcha part does not load, I already downloaded the files . html on my pc and the error continues, the site works, only part of captcha q hangs...

  • @Neuberoliveira you solved my problem in 40min what I took a day trying, thank you!

Show 8 more comments

1 answer

1


It is giving an error that jquery was not initialized, and I saw that Voce is also using prototype.forms.js which is another library.

2 Options

noConflict();

In jquery the default is to access it by the variable $ but exactly to avoid conflict with other libraries he has the method noConflict()that "redirects" jquery to its variable, e.g.:

var $jq = jQuery.noConflict();
$jq('#meuid').fadeIn();

Loading order

You may be able to resolve the conflict only by loading jquery before prototype.

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

Note: Giving 404 error at this url http://stats.hosting24.com/count.php

Edited.

Solution

I think I found the real problem. The mistake I mentioned earlier was this "Uncaught Referenceerror: jQuery is not defined"

You already have that in your code: var $JQuery = jQuery.noConflict() then basically the variable $does not exist, hence the error. your code must be something like this:

function confirmar() {
    $JQuery( "#dialog-confirm" ).dialog({
      resizable: false,
      height: "auto",
      width: 400,
      modal: true,
      buttons: {
        "Excluir pedido": function() {
          $JQuery( this ).dialog( "close" );
          funcao_b();
        },
        'Cancelar': function() {
          $JQuery( this ).dialog( "close" );
          console.log('cancelado');
        }
      }
    });
}

I just switched out all the $for $JQuery.

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.