multipage in iframe possible?

[kevzettler]

Hi I"m writing a tour that opens a same domain iframe modal and continues the tour in the iframe. I'm trying to use multipage: true for this functionality. Seeing an error from the iframe.

Uncaught TypeError: Cannot read property 'length' of undefined hopscotch-0.1.1.js?body=1:1821

the error is stemming from startTour line 1821

        if (stepNum >= currTour.steps.length) {
          throw 'Specified step number out of bounds.';
        }

Heres the tour code, The onNext calls a click handler that opens the modal:

$(function(){
  hopscotch.add_widget_tour = {
    id: "add_widget_tour",
    steps:[
      {
        "target": "add_widget_link",
        "placement": "left",
        "title": "You can add a new Widget",
        "content": "Add a new widget to build a new Table, Chart or Graph.",
        "multipage": true,
        "yOffset": "-20",
        "onNext": function(){
          $('#add_widget_link').click();
        }
      },

      {
        "target": document.querySelector("h3 .page-title"),
        "placement": "right",
        "title": "adding a widget",
        "content": "This is the Add Widget Screen"
      }
    ]
  };
});

I'm trying to continue the tour in the iframe with this code:

  if(hopscotch.getState()){
    var tour = hopscotch.getState().split(':');
    $(function(){
      hopscotch.startTour(tour[0], tour[1]);
    });
  }

[kevzettler]

My mistake I was referencing the tour incorrectly

[ltulib]

@kevzettler we are working on hopscotch and iframes.. basically we have this setup:

index file:

		<div class="container_left" id="resizable">	
			<div class="container_publications">	
				<iframe name="list_publications" id="list_publications"></iframe>
				<iframe name="media_timeline" id="media_timeline"></iframe>
			</div>
		</div>

We load the hopscotch.js and tour.js in the index file.

In iframe "list_publications" we have a DOM object with ID "readPublication1".
Please let us know how to reference it in the tour.js..

The following does not work

var tour = {
  id: "introduction_tour",
  steps: [
	{
	  title: "Guided tour",
	  content: "This starts a guided tour of the application.",
	  target: "startTourBtn",
	  placement: "bottom"
	},
	{
	  title: "Searching the system",
	  content: "This is where you enter a search",
	  target: "list_publications.q",
	  placement: "right"
	},
	{
	  title: "The publications",
	  content: "Here are the publications. Click on the thumbnail to read/watch/listen. Click on text under thumbnail to read publication data.",
	  target: "list_publications.readPublication1",
	  placement: "bottom"
	}
  ]
};

Thanks for any assistance.