CODEWITHSUNDEEP
jquery
MShack
MShack

Reputation: 652

jQuery popup overlay - get content

I'm using jQuery Popup Overlay - http://www.jqueryscript.net/demo/Responsive-Accessible-jQuery-Modal-Plugin-Popup-Overlay/

Instead of embedding the popup content in the html , i am wanting to get it from another page on click. I have it working to get the content on click , but the issue i have is that i am using 4 popup tablinks , and if i click one and then another i am getting duplicate results. I tried to use .one click and slice but neither worked.

here is the html and script

<li class="tablink rafters_btn_open"><a>RAFTER POPUP TAB</a></li>
<li class="tablink postseason_btn_open"><a>POSTSEASON POPUP TAB</a></li>
<li class="tablink alpha_btn_open"><a>ALPHA POPUP TAB</a></li>
<li class="tablink hof_btn_open"><a>HOF POPUP TAB</a></li>

$('.tablink').one('click',function(){
    $.get('http://mysite.page2.com', function (data) {
        $(data).find('#rafters').appendTo('#rafters_btn');
        $(data).find('#hof').appendTo('#hof_btn');
        $(data).find('#alphacup').appendTo('#alpha_btn');
        $(data).find('#postseason').appendTo('#postseason_btn');
    });
});

<div id="rafters_btn"></div>
<div id="hof_btn"></div>
<div id="alpha_btn"></div>
<div id="postseason_btn"></div>

If i click on tablink.rafters_btn_open , then click on any of the others , then reclick tablink.rafters_btn_open i begin to get 2,3,4 copies of the content. Any advice ?

Upvotes: 1

Views: 183

Answers (2)

Inpego
Inpego

Reputation: 2667

It's better to load data just once along with the page:

$(function ()
{
  $.get('http://mysite.page2.com', function (data) {
     $(data).find('#rafters').appendTo('#rafters_btn');
     $(data).find('#hof').appendTo('#hof_btn');
     $(data).find('#alphacup').appendTo('#alpha_btn');
     $(data).find('#postseason').appendTo('#postseason_btn');
  });
});

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

try to add class to clicked element

$('.tablink').on('click',function(){
     var Thisit = $(this);
     if(!Thisit.hasClass('clicked')){
      $.get('http://mysite.page2.com', function (data) {
         $(data).find('#rafters').appendTo('#rafters_btn');
         $(data).find('#hof').appendTo('#hof_btn');
         $(data).find('#alphacup').appendTo('#alpha_btn');
         $(data).find('#postseason').appendTo('#postseason_btn');
         $('.tablink').removeClass('clicked');
         $(this).addClass('clicked');
       });
     }
});

Upvotes: 1

Related Questions