Add an error message if [object Object] appears?

Ask the community
,
1

My site appears to be working on all platforms (so far) except the mobile version of Chrome – there, my iframes are displaying [object Object] instead of the postmessage. Hopefully I’ll be able to figure out how to fix the problem (and if you have any suggestions about how to troubleshoot it I’d love to hear them – I’ve had no luck so far) but in case I can’t (or until I can), is there a way for the site to recognize when the problem is occurring and then display a message telling the user that the site is not currently compatible with their browser?

Here’s part of my code, if it helps:

import wixWindow from 'wix-window';

$w.onReady(function () {

let item = $w('#zipcodeset').getCurrentItem();

$w("#c1").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") {
    $w("#c1").postMessage(item.chart1Mobile);
     } else {
         $w("#c1").postMessage(item.chart1); }
});

Thank you so much for your help – it’s always greatly appreciated!

2

The call to getCurrentItem() should be inside of a dataset.onReady() event handler to ensure that the dataset is ready before trying to access it. Otherwise nothing will be returned and item will be undefined . You should have something like this:

$w("#myDataset").onReady( () => {
   let item = $w('#zipcodeset').getCurrentItem();
} );

Or you could just put it inside of the onMessage() function:

$w("#c1").onMessage((event) => {
  let item = $w('#zipcodeset').getCurrentItem();
  if (wixWindow.formFactor === "Mobile") {
    $w("#c1").postMessage(item.chart1Mobile);
  } else {
    $w("#c1").postMessage(item.chart1);
  }
}

BTW - I think your code is missing a closing bracket for the onMessage function.

3

Thank you so much for your reply! I’m still getting the error (only on Chrome for mobile) – this is the way my code looks now, in case I did something else wrong and you want to take a look (it’s the whole code this time, in case that helps at all – I adjusted the brackets, etc. until the red warning squiggles disappeared):

import wixWindow from 'wix-window';

$w.onReady(function () {

$w("#zipcodeset").onReady( () => {
   let item = $w('#zipcodeset').getCurrentItem();

$w("#c1").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c1").postMessage(item.chart1Mobile);
     } else {
         $w("#c1").postMessage(item.chart1); }
});
$w("#c2").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c2").postMessage(item.chart2Mobile);
     } else {
         $w("#c2").postMessage(item.chart2); }
});
$w("#c3").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c3").postMessage(item.chart3Mobile);
     } else {
         $w("#c3").postMessage(item.chart3); }
});
$w("#c4").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c4").postMessage(item.chart4Mobile);
     } else {
         $w("#c4").postMessage(item.chart4); }
});
$w("#c5").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c5").postMessage(item.chart5Mobile);
     } else {
         $w("#c5").postMessage(item.chart5); }
});
$w("#c6").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c6").postMessage(item.chart6Mobile);
     } else {
         $w("#c6").postMessage(item.chart6); }
});
$w("#c7").onMessage((event) => {
     if(wixWindow.formFactor === "Mobile") { 
    $w("#c7").postMessage(item.chart7Mobile);
     } else {
         $w("#c7").postMessage(item.chart7); }
});
});

$w('#howToButton').onClick(() => {
    toggleBox($w('#howToStripCollapse'), $w('#plus'), $w('#minus'));
});


function toggleBox(howToStripCollapse, plus, minus) {
    const isCollapsed = howToStripCollapse.collapsed;
    if (isCollapsed) {
        plus.hide();
        minus.show();
        howToStripCollapse.expand();
    } else {
        minus.hide();
        plus.show();
        howToStripCollapse.collapse();
    }
}})

Or if you don’t see anything obvious (or if my code’s just too laughably amateurish and it’s obvious I’m in way over my head here), is there a way to get an error message to the user when the page doesn’t load as intended?

4

@cdov21 Before we go any further, you don’t say where the error is showing up. What line of code? What do you mean by “my iframes are displaying [object Object]”? Perhaps the code in your iFrames is not browser compatible. Make sure that you are using a Supported Browser .

The onMessage() functions do not go inside the dataset onReady() . However, then you need to declare the variable item outside of the dataset onReady() , something like this:

let item;
$w("#myDataset").onReady( () => {
    item = $w('#zipcodeset').getCurrentItem();
} );

Did you try getCurrentItem inside of each onMessage()? Like this:

    $w("#c1").onMessage((event) => {
      item = $w('#zipcodeset').getCurrentItem();
      if (wixWindow.formFactor === "Mobile") {
        $w("#c1").postMessage(item.chart1Mobile);
      } else {
        $w("#c1").postMessage(item.chart1);
      }
    });

This seems to be an issue with browser timing and compatibility, and it’s sometimes difficult to track down what’s happening. You can add console.log() statements at various points to inspect what’s happening and (maybe most importantly) when. For example, see if an item is being returned, like this:

item = $w('#zipcodeset').getCurrentItem();
console.log('current item', item);

You will see the contents of the current dataset item (or the dreaded undefined) displayed in the console.

Use console.log() statements at different points of your code to see what’s happening. You can display values of variables, or just display information such as “got a message from c1”. See Testing and Debugging Your Code for more information on finding problems.

5

@yisrael-wix When viewing the site on the mobile version of Chrome, the iframes show “[object Object]” instead of the actual iframe codes that are in my dataset. It actually looks like the intended content shows up for a split second before that error comes up.

I tried getCurrentItem inside of each onMessage() but unfortunately that didn’t solve it. Adding console.log() statements at different points is an excellent idea – I’ll give that a shot next.

Thanks again for your help – you’re awesome and so very appreciated!