Login popup after AJAX call

[solokco]

I have a custom plugin where I call some functions via AJAX.

After the AJAX Function is called, it loads a calendar to make reservations but if the user is not login I want to show a LOGIN BUTTON using Show the popup

If I used this code at the first load (before ajax) of the page everything works perfect, but when added to the AJAX call, and loads AFTER the first page load, it stops working.

Is there a way to fix this?

[sharmstr]

Can I see it?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[solokco]

Sure.

You can visit this URL:
http://staging4.estilotu.com/servicios/test/

There you will see a link that says THIS LINK WILL WORK and other, after you select a DAY on the CALENDAR, the same link THIS LINK WONT WORK

Any ideas?

[sharmstr]

I think it has something to do with jquery finding all elements with that class on page load. It doesnt know about the additional class since it happens after. I vaguely remember having this issue a few years back on a different project. Let me do so googling. I’ll get back to you.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Yep – I was right: http://stackoverflow.com/questions/17715274/jquery-click-function-doesnt-work-after-ajax-call

The problem is that the jquery isnt using click, its using magnificPopup, but the same principal applies. I dont have time to look at it right now, but google “magnificPopup not working after ajax” or similar to see if there is a solution.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Just found this. http://stackoverflow.com/questions/16777041/magnific-popup-cant-fire-function-on-ajax-content-after-callback It might be helpful

If you want to try the second suggestion here’s the code.

COPY CODE

$('.kleo-show-login, .bp-menu.bp-login-nav a, .must-log-in > a').magnificPopup({
          items: {
            src: '#kleo-login-modal',
            type: 'inline',
            focus: '#username'
          },
          preloader: false,
          mainClass: 'kleo-mfp-zoom',

          // When element is focused, some mobile browsers in some cases zoom in
          // It looks not nice, so we disable it:
          callbacks: {
            beforeOpen: function() {
              if($(window).width() < 700) {
                this.st.focus = false;
              } else {
                this.st.focus = '#username';
              }
            }
          }
        });

But I’d change .kleo-show-login to .kleo-show-login2 and delete the other selectors. Like this
$(‘.kleo-show-login2’).magnificPopup({

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts