Conflict bootstrap and jquery

Question

Conflict bootstrap and jquery

Navigation

0

I have a Wordpress site and am having trouble displaying two elements on different pages. In the Home page I have a Select menu with a few options, when selecting one of the options and clicking on the button next, a modal window is shown, which was done based on the bootstrap.

$( document ).ready(function() {
    $('select').change(function () {

       $('[id^="modal"]').modal('hide');

       var targetBotao = "#modal"+$(this).val();

       jQuery('#testButton').attr('data-target',targetBotao);

    });
});

<div id="sintomas">
	<div class="options">
		<select class="custom-select custom-sintomas">
			<option selected>Selecione um sintoma aparente</option>
			<option value="1">One</option>
			<option value="2">Two</option>
			<option value="3">Three</option>
		</select>
<!-- Button trigger modal -->
<button type="button" id="testButton" class="btn btn-primary" data-toggle="modal" data-target="">
  Launch demo modal
</button>
	</div>
</div>

<!-- Modal 1-->
<div class="modal fade" id="modal1" 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 111111</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
      1111111111
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

<!-- Modal 2-->

<div class="modal fade" id="modal2" 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 222222</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        2222222222
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
      
    </div>
  </div>
</div>

 <!-- Modal 3-->

<div class="modal fade" id="modal3" 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 333333</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        3333333333
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
         
    </div>
  </div>
</div>

On another page, called "Specialties" I have a sequence of buttons that show a list and each item in this list follows a respective content, as you can see in the image below.

<div class="list-group" id="myList" role="tablist">
  <a class="list-group-item list-group-item-action active" data-toggle="list" href="#home" role="tab">Home</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#profile" role="tab">Profile</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#messages" role="tab">Messages</a>
  <a class="list-group-item list-group-item-action" data-toggle="list" href="#settings" role="tab">Settings</a>
</div>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">..a.</div>
  <div class="tab-pane" id="profile" role="tabpanel">...b</div>
  <div class="tab-pane" id="messages" role="tabpanel">...</div>
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

The problem is that if I use bootstrap.min.js, only the modal works and if I use bootstrap.js, only the specialty buttons work. I've tried everything, changed the libraries, changed the Jquery library, put the src of the script everywhere (body, head, footer), but still without success. the Jquery library is called directly by wordpress, I believe that for some plugin, I changed the version in the folder that is also calling, I got the location in the source code of the page, I used the most recent and old ones.

THIS IS THE SOURCE CODE, as you can see, the two scripts are being called. On line 71 script type = 'text / javascript' src = ' link '. And in line 131 script type="text / javascript" src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/bootstrap/dist/js/bootstrap.js".

Jquery says it is from version 1.12.4, but I changed the file from the folder and if you enter the source code and check the file, the version is newer.

<!doctype html>
<html lang="pt-BR" class="no-js">

<head>
    <meta charset="UTF-8">
    <title>
        HOME |
        Hospital do iPhone    </title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Assistência técnica em dispositivos Apple">
    <meta name="robots" content="index,follow">
    <meta name="author" content="Agência Goup">

    <link rel="stylesheet" href="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/css/bootstrap.min.css">
    <link rel="stylesheet" href="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/css/animate.min.css">
    <link rel="stylesheet" href="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/css/custom.css">
    <link rel="stylesheet" href="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/css/font.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500" rel="stylesheet">


    <link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.4\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/localhost\/hospital-iphone\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.9.4"}};
			!function(a,b,c){function d(a,b){var c=String.fromCharCode;l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,a),0,0);var d=k.toDataURL();l.clearRect(0,0,k.width,k.height),l.fillText(c.apply(this,b),0,0);var e=k.toDataURL();return d===e}function e(a){var b;if(!l||!l.fillText)return!1;switch(l.textBaseline="top",l.font="600 32px Arial",a){case"flag":return!(b=d([55356,56826,55356,56819],[55356,56826,8203,55356,56819]))&&(b=d([55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447],[55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447]),!b);case"emoji":return b=d([55357,56692,8205,9792,65039],[55357,56692,8203,9792,65039]),!b}return!1}function f(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var g,h,i,j,k=b.createElement("canvas"),l=k.getContext&&k.getContext("2d");for(j=Array("flag","emoji"),c.supports={everything:!0,everythingExceptFlag:!0},i=0;i<j.length;i++)c.supports[j[i]]=e(j[i]),c.supports.everything=c.supports.everything&&c.supports[j[i]],"flag"!==j[i]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[j[i]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(h=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",h,!1),a.addEventListener("load",h,!1)):(a.attachEvent("onload",h),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),g=c.source||{},g.concatemoji?f(g.concatemoji):g.wpemoji&&g.twemoji&&(f(g.twemoji),f(g.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='layerslider-css'  href='http://localhost/hospital-iphone/wp-content/plugins/LayerSlider/static/css/layerslider.css?ver=5.6.2' media='all' />
<link rel='stylesheet' id='ls-google-fonts-css'  href='http://fonts.googleapis.com/css?family=Lato:100,300,regular,700,900%7COpen+Sans:300%7CIndie+Flower:regular%7COswald:300,regular,700&#038;subset=latin%2Clatin-ext' media='all' />
<link rel='stylesheet' id='edsanimate-animo-css-css'  href='http://localhost/hospital-iphone/wp-content/plugins/animate-it/assets/css/animate-animo.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='post_grid_style-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/css/style-new.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='owl.carousel-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/css/owl.carousel.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/css/font-awesome.min.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='style-woocommerce-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/css/style-woocommerce.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='style.skins-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/global/css/style.skins.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='style.layout-css'  href='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/global/css/style.layout.css?ver=4.9.4' media='all' />
<link rel='stylesheet' id='siteorigin-panels-front-css'  href='http://localhost/hospital-iphone/wp-content/plugins/siteorigin-panels/css/front-flex.css?ver=2.6.2' media='all' />
<link rel='stylesheet' id='html5blank-css'  href='http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/style.css?ver=1.0' media='all' />
<link rel='stylesheet' id='__EPYT__style-css'  href='http://localhost/hospital-iphone/wp-content/plugins/youtube-embed-plus/styles/ytprefs.min.css?ver=4.9.4' media='all' />
<style id='__EPYT__style-inline-css' type='text/css'>

                .epyt-gallery-thumb {
                        width: 33.333%;
                }
                
</style>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/lib/conditionizr-4.3.0.min.js?ver=4.3.0'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/lib/modernizr-2.7.1.min.js?ver=2.7.1'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var _EPYT_ = {"ajaxurl":"http:\/\/localhost\/hospital-iphone\/wp-admin\/admin-ajax.php","security":"4012848490","gallery_scrolloffset":"20","eppathtoscripts":"http:\/\/localhost\/hospital-iphone\/wp-content\/plugins\/youtube-embed-plus\/scripts\/","epresponsiveselector":"[\"iframe.__youtube_prefs_widget__\"]","epdovol":"1","version":"11.8.5","evselector":"iframe.__youtube_prefs__[src], iframe[src*=\"youtube.com\/embed\/\"], iframe[src*=\"youtube-nocookie.com\/embed\/\"]","ajax_compat":"","stopMobileBuffer":"1"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/scripts.js?ver=1.0.0'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/LayerSlider/static/js/greensock.js?ver=1.11.8'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/LayerSlider/static/js/layerslider.kreaturamedia.jquery.js?ver=5.6.2'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/LayerSlider/static/js/layerslider.transitions.js?ver=5.6.2'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var post_grid_ajax = {"post_grid_ajaxurl":"http:\/\/localhost\/hospital-iphone\/wp-admin\/admin-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/js/scripts.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/js/masonry.pkgd.min.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/js/owl.carousel.min.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/post-grid/assets/frontend/js/imagesloaded.pkgd.js?ver=4.9.4'></script>
<script type='text/javascript' src='http://localhost/hospital-iphone/wp-content/plugins/youtube-embed-plus/scripts/ytprefs.min.js?ver=4.9.4'></script>
<link rel='https://api.w.org/' href='http://localhost/hospital-iphone/wp-json/' />
<link rel="alternate" type="application/json+oembed" href="http://localhost/hospital-iphone/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fhospital-iphone%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://localhost/hospital-iphone/wp-json/oembed/1.0/embed?url=http%3A%2F%2Flocalhost%2Fhospital-iphone%2F&#038;format=xml" />
                <style type="text/css" media="all"
                       id="siteorigin-panels-layouts-head">/* Layout 4 */ #pgc-4-0-0 , #pgc-4-1-0 , #pgc-4-2-0 , #pgc-4-3-0 , #pgc-4-4-0 { width:100%;width:calc(100% - ( 0 * 30px ) ) } #pg-4-0 , #pg-4-3 , #pl-4 .so-panel { margin-bottom:30px } #pg-4-1 , #pg-4-2 , #pl-4 .so-panel:last-child { margin-bottom:0px } #pg-4-1> .panel-row-style { background-image:url(http://localhost/hospital-iphone/wp-content/uploads/2018/03/quem-somos.jpg);background-repeat:repeat;height:480px;width:100% } #pg-4-1.panel-no-style, #pg-4-1.panel-has-style > .panel-row-style , #pg-4-2.panel-no-style, #pg-4-2.panel-has-style > .panel-row-style , #pg-4-3.panel-no-style, #pg-4-3.panel-has-style > .panel-row-style , #pg-4-4.panel-no-style, #pg-4-4.panel-has-style > .panel-row-style { -webkit-align-items:flex-start;align-items:flex-start } #panel-4-1-0-0> .panel-widget-style { color:#ffffff;padding:30px 0px 0px 0px;font-size:50px;text-align:center;font-weight: 300 } #panel-4-1-0-1> .panel-widget-style { color:#ffffff;text-align:center;font-size:22px;font-weight:300;margin-bottom:48px !important } #panel-4-1-0-2> .panel-widget-style { text-align:center } #pg-4-2> .panel-row-style { background-color:#f1f2f2;height:385px;width:auto } #panel-4-2-0-0> .panel-widget-style { padding:50px 0px 0px 0px;text-align:center;line-height:1.2;margin-bottom:45px } #pg-4-3> .panel-row-style { padding:0px 0px 0px 0px } #panel-4-3-0-0> .panel-widget-style { padding:50px 0px 0px 0px;text-align:center;line-height:1.2 } #pg-4-4> .panel-row-style { background-color:#23b9d7 } #panel-4-4-0-0> .panel-widget-style { padding:50px 0px 0px 0px;text-align:center } #panel-4-4-0-1> .panel-widget-style { padding:0px 0px 30px 0px } @media (max-width:780px){ #pg-4-0.panel-no-style, #pg-4-0.panel-has-style > .panel-row-style , #pg-4-1.panel-no-style, #pg-4-1.panel-has-style > .panel-row-style , #pg-4-2.panel-no-style, #pg-4-2.panel-has-style > .panel-row-style , #pg-4-3.panel-no-style, #pg-4-3.panel-has-style > .panel-row-style , #pg-4-4.panel-no-style, #pg-4-4.panel-has-style > .panel-row-style { -webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } #pg-4-0 .panel-grid-cell , #pg-4-1 .panel-grid-cell , #pg-4-2 .panel-grid-cell , #pg-4-3 .panel-grid-cell , #pg-4-4 .panel-grid-cell { margin-right:0 } #pg-4-0 .panel-grid-cell , #pg-4-1 .panel-grid-cell , #pg-4-2 .panel-grid-cell , #pg-4-3 .panel-grid-cell , #pg-4-4 .panel-grid-cell { width:100% } #pl-4 .panel-grid-cell { padding:0 } #pl-4 .panel-grid .panel-grid-cell-empty { display:none } #pl-4 .panel-grid .panel-grid-cell-mobile-last { margin-bottom:0px }  } </style><link rel="icon" href="http://localhost/hospital-iphone/wp-content/uploads/2018/03/cropped-logo-32x32.png" sizes="32x32" />
<link rel="icon" href="http://localhost/hospital-iphone/wp-content/uploads/2018/03/cropped-logo-192x192.png" sizes="192x192" />
<link rel="apple-touch-icon-precomposed" href="http://localhost/hospital-iphone/wp-content/uploads/2018/03/cropped-logo-180x180.png" />
<meta name="msapplication-TileImage" content="http://localhost/hospital-iphone/wp-content/uploads/2018/03/cropped-logo-270x270.png" />
</head>

<body class="home page-template-default page page-id-4 logged-in siteorigin-panels siteorigin-panels-before-js siteorigin-panels-home">
    <header id="fixed" class="top">
        <div class="container-content margin-top">
            <div class="logo">
                <a href="http://localhost/hospital-iphone">
                    <img src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/img/logo1.png"alt="Logo" class="logo-img animated fadeInLeftBig duration2"/>
                    <img src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/img/logo2.png"alt="Logo" class="logo-img-1"/>
                </a>
            </div>
            <div class="lojas">
                <button type="button" class="btn btn-lojas"><img src="http://localhost/hospital-iphone/wp-content\themes\hospitaldoiphone\img\icon-lojas.png"/>LOJAS</button></div><divclass="franqueado">
                <button type="button" class="btn btn-franqueado"><a href="http://localhost/hospital-iphone/seja-um-franqueado/">SEJA UM FRANQUEADO</a></button>
            </div>
            <nav class="nav" role="navigation">
                <ul><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-4 current_page_item menu-item-25"><a href="http://localhost/hospital-iphone/">HOME</a></li>
<li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost/hospital-iphone/empresa/">EMPRESA</a></li>
<li id="menu-item-721" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-721"><a href="/hospital-iphone/iphone/">SERVIÇOS</a>
<ul class="sub-menu">
	<li id="menu-item-556" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-556"><a href="http://localhost/hospital-iphone/iphone/">IPHONE</a></li>
	<li id="menu-item-555" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-555"><a href="http://localhost/hospital-iphone/ipad/">IPAD</a></li>
	<li id="menu-item-554" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-554"><a href="http://localhost/hospital-iphone/macbook/">MACBOOK</a></li>
	<li id="menu-item-553" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-553"><a href="http://localhost/hospital-iphone/imac/">IMAC</a></li>
	<li id="menu-item-552" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-552"><a href="http://localhost/hospital-iphone/apple-watch/">APPLE WATCH</a></li>
</ul>
</li>
<li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost/hospital-iphone/desbloqueio/">DESBLOQUEIO</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://localhost/hospital-iphone/blog/">BLOG</a></li>
<li id="menu-item-20" class="menu-last menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="http://localhost/hospital-iphone/contato/">CONTATO</a></li>
</ul>            </nav>
        </div>
    </header>
    
    <script type="text/javascript" src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/bootstrap/dist/js/bootstrap.min.js"></script><scripttype="text/javascript" src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/main.js"></script><scripttype="text/javascript" src="http://localhost/hospital-iphone/wp-content/themes/hospitaldoiphone/js/lojas.js"></script>
</html>

How can I proceed? I'm totally lost, because I've tried everything I imagine to be right, thanks for the help!

javascript html jquery

asked by anonymous 14.03.2018 / 20:35

Conflict bootstrap and jquery

0 answers