New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fail in options.buttons.handler when selecting by "class" instead of "id" #316

Closed
shamank opened this Issue Jun 21, 2015 · 3 comments

Comments

Projects
None yet
2 participants
@shamank
Copy link

shamank commented Jun 21, 2015

Mobiscroll: 2.15.1
Platform: jQM 1.4.5 / jQ 1.11.1

If you are customizing buttons and their handlers (leaving the default handlers), like:

options = {
   buttons: [
      {
         text: "Today",
         handler: "now",
         cssClass: "ui-btn ui-corner-all ui-shadow ui-mini ui-btn-icon-left ui-icon-back"
      },
      {
         text: "Set",
         handler: "set",
         cssClass: "ui-btn ui-corner-all ui-shadow ui-mini ui-btn-icon-left ui-icon-check"
      }
   ]
}

and you use a selector by class instead of an ID, like:

$(".myClass").mobiscroll().calendar(options);

where you have more than 1 element with no ID, like:

<a href="#" class="myClass">Launch Calendar 1</a>
<a href="#" class="myClass">Launch Calendar 2</a>

it will bind ok but won't work as expected.
The first link will open and work perfectly (link 1 or link 2). After closing it, if you try to open the other one, it will work too (the modal will show), however buttons won't work anymore. They will still work for the modal you opened for the first time.

As a workaround, I had to iterate over those elements and bind the component 1 to 1:

$.each($(".myClass"), function () {
    $(this).mobiscroll().calendar(options);
});

Am I doing something wrong? I noticed that if the element hasn't an ID, mobiscroll generates one for it, so I assume this is a bug, specially because if I don't customize "options.buttons", they will work good with the same code provided before.

Thanks.

@shamank

This comment has been minimized.

Copy link

shamank commented Jun 21, 2015

I realized this is an object related issue. If I do a copy of the options object, it will work:

// it doesn't work
var options = { ... };
$(".myClass").mobiscroll().calendar(options);

// it doesn't work
var options = { ... };
$.each($(".myClass"), function () {
    $(this).mobiscroll().calendar(options);
});

// it works
var options = { ... };
$.each($(".myClass"), function () {
    $(this).mobiscroll().calendar($.extend(true, {}, options));
});

I think you are working directly over the options object, so if I'm passing the reference of an object instead of an object itself (like $...calendar({ buttons: [...] }) it will work only with the properties assigned the first time I launched the modal.

The reason it worked in my previous post was because I'm using an external function to assign default properties, so iterating outside this function will create a new options obect over each iteration ("options" is a local var in the function).

@dioslaska

This comment has been minimized.

Copy link
Contributor

dioslaska commented Jun 22, 2015

You're right, the problem is that the same buttons array is used for the different instances.

The workaround is, like you mentioned, to initialize the instances with a separate options object.

@dioslaska

This comment has been minimized.

Copy link
Contributor

dioslaska commented Jul 20, 2015

Fixed in 2.16.1

@dioslaska dioslaska closed this Jul 20, 2015

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment