HTML Conflicts in two javascript files

Question

HTML Conflicts in two javascript files

Navigation

#1 by (1 votes)

1

I'm having trouble calling two .js files in my html page, because the two do not work together, just separate, I believe it's a conflict problem, custom alert on my site, but when I paste the code on the site the captcha does not work, it loads infinitely like this:

Belowisthepathofconflicting.jsfiles:

Iwanttoaddthecodebelow:

<!DOCTYPEhtml><html><linkrel="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><scriptsrc="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:

link

How do I eliminate this conflict?

javascript html jquery

asked by anonymous 15.08.2016 / 17:04

1 answer

Set Connection Dynamically in Model Laravel 5.1 Query in JPQL for insertion of Data

score 1 · Accepted Answer

This is giving the error that jquery was not initialized, and I saw that you are also using prototype.forms.js which is another library.

2 Options

noConflict ();

In jquery you default is to access it by%% variable but exactly to avoid conflict with other libraries it has the $ method that "redirects" jquery to its variable, eg

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

Loading order

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script><scriptsrc="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: You are giving 404 error on this url link

Edited.

Solution

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

In your code you already have this: noConflict() so basically the var $JQuery = jQuery.noConflict() does not exist, hence the error. your code should 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 changed all $ to $ .