wp_footer() conflicting with jQuery

  • I whittled down to a conflict with a jQuery I am trying to use to load tabbed google maps on a page and the wordpress wp_footer(); call.

    It worked when I didn’t have wp_footer being called on a template (not sure why and would have been a different question if I did not call it itm cause it worked) but I realized that that template was missing that call, so I added it and then my map tabs stopped working.

    here is a page it works with (i am using a template that calls a different footer without the wp_footer(); call) https://stage.thatsbyers.com/about/service-area-works/

    and this one the wp_footer is being called like it should be, but the maps do not show. https://stage.thatsbyers.com/about/service-area/

    I know there is a conflict but do not know how to fix it, I have tried many suggestions from many sites to no success.

    I read on here to put some code in the functions.php file, but I want direction from the wp masters.

Viewing 7 replies - 1 through 7 (of 7 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Probably because you’re now loading 2 versions of jQuery, one of which is incorrect.

    Thread Starter ariapictures

    (@ariapictures)

    @andrew I even took that version off, i think i took the correct one off.

    and it still does not work.

    I am guess the one on the header (my template):

    this one: <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>

    is incorrect?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That looks right, so this would indicate that previously you were working on a version of jQuery other than the one bundled with WordPress. Which meant that you didn’t have to worry about using jQuery in noConflict mode. For example, the error you’re facing straight away is an issue with _not_ using jQuery in noConflict mode:

    <script type="text/javascript">
$(function(){
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers

    Thread Starter ariapictures

    (@ariapictures)

    Yeah, i get an unknown function error when I inspect the page.

    HA!!!

    I think it is working.

    i changed it to this:

    jQuery(function($){
  jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

    @andrew THANK YOU for bring that to light for me.

    Feel like a dunce not seeing that or remembering…

    kind of like this:
    Flip this switch if you use this, but flip these two if not, but if using this, flip this one but not that and put this before that.

    Thank you again!!!

    Thread Starter ariapictures

    (@ariapictures)

    well, i checked it just awhile ago and it is now not working again…

    inspecting i get this error

    refused to display (url)in a frame because it set ‘X-Frame-Options’ to ‘DENY’.

    huh?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    See https://stackoverflow.com/questions/6666423/overcoming-display-forbidden-by-x-frame-options#answer-7469997

    Thread Starter ariapictures

    (@ariapictures)

    Well, i figured out one of the reasons. the visitor has to be logged into a google account to view the maps.

    – Andrew thanks, I found that and tried those steps…

    I think the major thing is I need to get the person who created the maps to open them up.

    Thanks for your time. sorry for the annoyance.

    hopefully this will help someone else wanting to embed google maps on a wordpress site. ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘wp_footer() conflicting with jQuery’ is closed to new replies.