Mobiscroll.popup is not a function

Page layout & navigation
1

Why is it when I have the following code:

$(function () {
    $('#report').mobiscroll.popup({
        scrollLock: false,
        display: 'modal'
    });
});

I get the error Uncaught TypeError: $(…).mobiscroll.popup is not a function

2

Hello @Vincent_Wansink :wave:

This error is usually occurring when the component was downloaded from the Download builder and the specific component wasn’t included into the downloaded package.
More information here: http://help.mobiscroll.com/articles/1892104-common-errors-and-how-to-fix-them (section number 4).
To solve this problem you will need to download the Mobiscroll package again and update your local Mobiscroll files.
Before download just make sure to select all the components which you want to use locally.
Here is an article about the download builder which might help you using it: http://help.mobiscroll.com/articles/974201-download-builder.
Let me know how it goes :wink:

3

I did as you suggested but that didn’t fix the issue. And I’ve confirmed that’s not the issue because I’m able to get the popup to work in another place in my app. So I’m wondering if it’s maybe a timing issue.

Here’s the code that works.

// *** This is at the bottom of stafftimesheet.php ***

$(function(){
    var activities = $('#activities').mobiscroll().popup({
           display: 'center',
           buttons: [],
           scrollLock: false
    }).mobiscroll('getInst')
});

// *** This is in staff.js which is included at the top of stafftimesheet.php ***

function staffInPrompt(activities){
  activities.show();
}

And that works.

The following does not work.

// *** This is at the bottom of content.php ***

$(function(){
       var reportobject = $('#report').mobiscroll().popup({
             display: 'center',
             buttons: [],
             scrollLock: false
       }).mobiscroll('getInst')
});

// *** This is in common.js which is included at the top of content.php ***

function report(reportname,reporttitle){
  var providerid = document.getElementById("providerid").value;

  $.ajax({
    url: 'reports/report-' + reportname + '.php',
    data: {
      cache: false,
      providerid: providerid
    },
    success: function(report) {

      $('#report').html(report);
      reportobject.show();  // <--- *** This is where it crashes ***

    },
    error: function(){
      popup("Error","Unable to generate report");
    },
    statusCode: {
      404: function() {
        popup("Error","Could not contact server.");
      },
      500: function() {
        popup("Error","A server-side error has occurred.");
      }
    }
  });
}
4

Well, I got it to work. After posting my code above I realized that in my working example I was passing in the popup object, but not in my second example.

I also had to change the way I’m calling my report function, so the following works.

 var reportobject = $('#report').mobiscroll().popup({
         display: 'center',
         buttons: [],
         scrollLock: false
     }).mobiscroll('getInst');
 
 $('.reportlink').click(function () {
     report($(this).prop('id'),reportobject);
     return false;
 });

And my HTML

<table>
<tr class=clickable><td colspan=2 id=providerearnings class=reportlink>Earnings Report</td></tr>
<tr class=clickable><td colspan=2 id=providerpayments class=reportlink>Payments Report</td></tr>
</table>

Although I’m still not sure why I don’t have access to “reportobject” elsewhere (like inside my report function) as it is global in scope.