multiview icon indicating copy to clipboard operation
multiview copied to clipboard

Loading data dynamically into panels.

Open Nulon opened this issue 12 years ago • 1 comments

Hi Frequent,

First of all, great work with multiview!

This is more of a query rather than an issue. It is actually quite an easy answer,.,.

basically I want to have the main panel to dynamically load data from the selected list item from the menu panel So far I have a menu that contains list like so...

<li><a href='#main_model?make=Honda" data-panel='main'>Honda</a></li> <li><a href='#main_model?make=Toyota" data-panel='main'>Toyota</a></li> <li><a href='#main_model?make=Suzuki" data-panel='main'>Suzuki</a></li> etc.

I would like it so whenever a person clicks on one of these links, it would update the main panel.

So far I can get the page to load the first time... however whenever a person would click on another item on the menu, the script doesn't detect a page change as it's calling the same id "main-model".

So my question is how can I detect if a user has clicked on a menu item to trigger a page change?

and would it be better to parse the data through something like data-id <li><a href='#main_model" data-id="Honda" data-panel='main'>Honda</a></li> <li><a href='#main_model" data-id="Toyota" data-panel='main'>Toyota</a></li> <li><a href='#main_model" data-id="Suzuki" data-panel='main'>Suzuki</a></li>

thanks

Nulon avatar Jun 13 '12 04:06 Nulon

Parameters again :-)

The questions is what should happen when your content updates?

  • Should the page load again, so it's in the DOM twice (default JQM, I believe)?
  • Should the current main page be replaced with a new main?make=some page?
  • Should the current page stay where it is and you just update contents with AJAX (similar to what Github does when you browse code)

I think I know why the panel is not updating on changePage. I'm only changing

  data.toPage
  data.options.fromPage
  data.options.pageContainer

from regular JQM changePage calls and links, so either of these three does not take parameters into account or they do and JQM doesn't, which takes over again after I'm done tweaking.

I'll have a look.

In the meantime, if you want to detect clicks, just

$(document).on('click', 'a.give_your_links_a_class', function(e, data){
   console.log("clicked");
   // get the href from the link clicked
   // use $.mobile.path.parseUrl( href ) to get the parameter ("search") component
   })

I'll write back on parameters.

PS: your second example using data-id... not sure if that works. Since the page is in the DOM already, JQM by default does nothing. PSS: also have a look here on dynamic page creation in JQM. PSSS: Pageparam plugin

frequent avatar Jun 13 '12 07:06 frequent