[SOLVED] Can you use item-link to add a view to current view?

1

I have three pages in my web app: main-view, offers-view and chats-view connected through a tabbed nav bar. On offers and chats the user can click on a right menu and choose to see a list of offers that they created.

Currently this list of ‘posted offers’ gets added to the offer-view but I really want it to either (1) get added to the offer view and switch the user to that view OR (2) get added to whatever the current view is.

Here is my item-link currently:

  <li>
    <a href="/postoffers/" data-view="#view-offers" class="item-content item-link panel-close">
        <div class="item-inner">Posted Offers</div>
    </a>
  </li>

So as you can see the list will show up on my view-offers even if the user is still looking at the view-chats instead. That means the user wont see the posted-offers list unless they go choose the offers-view tab manually.

I tried adding a on pageMounted to force the router to jump to view-offers no matter what but it didnt get triggered.

I would prefer to have posted-offers load on top of the current view (view-offers or view-chats) but no idea how to set data-view to be the current view?

2

https://framework7.io/docs/tabs.html#tabs-app-methods

3

if app.tab.show() is the way to switch to the offers-view where exactly do you put that call?

I attempted to add it to the pageMounted event but it doesnt get triggered as far as I can tell.

on: {
  pageMounted: function (e, page) {
    app.tab.show("offer");
  },
},
4

If you need to do it on load just add tab-active class to required View-Tab in HTML or on load

5

Not exactly … I have two views (offer-view and chats-view) where the user can select a right side menu. In there they can choose to see all offers they have posted. When they select that option what I have been doing is loading /post-offers/ in the #offers-view (as you see in the HTML above).

The issue with this is that if the user selected the right side menu from the chats-view then they don’t see the new posted-offers view which is inside the offers-view and not visible.

Is there a way to do one of the following things?

Option 1: Force the #offer-view to become the main view after the user selects “Posted Offers”

Option 2: Be able to open /posted-offers/ in the current view which could be either offers-view or chat-view

If I was able to do something like:

  <li>
    <a href="/postoffers/" data-view="@current-view" class="item-content item-link panel-close">
        <div class="item-inner">Posted Offers</div>
    </a>
  </li>
6

Can you post more code to get better understanding. Didn’t really get

7

Sure thing …

in my index.html I define the right panel. The right panel lets you select seeing your Posted Offers or Create Offer which are new views:

    <div class="panel panel-right panel-cover">
      <div class="list">
        <ul>
          <li>
            <a href="/postoffers/" data-view="#view-offers" class="item-content item-link panel-close">
                <div class="item-inner">Posted Offers</div>
            </a>
          </li>
          <li>
            <a href="/createoffer/" data-view="#view-offers" class="item-content item-link panel-close">
                <div class="item-inner">Create Offer</div>
            </a>
          </li>
           <li>
            <a href="#" class="item-content item-link panel-close">
                <div id="sign-in" class="item-inner">Sign In</div>
                <div id="sign-out" class="item-inner">Sign Out</div>
            </a>
          </li>
        </ul>
      </div>
    </div>

In my offers.html I enable opening the panel by clicking on the users avatar in the top right:

        <div class="right">
          <div class="searchbar searchbar-inline" style="width:200px">
            <div class="searchbar-input-wrap">
              <input type="search" placeholder="Search">
              <i class="searchbar-icon"></i>
              <span class="input-clear-button"></span>
            </div>
          </div>
          <div id="avatar-out">
              <a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
                <i class="icon f7-icons ios-only" style="font-size:40px">person_round_fill</i>
                <i class="material-icons md-only" style="font-size:40px">account_circle</i>
              </a>
          </div>
          <div hidden id="avatar-in">
              <a href="#" class="link icon-only panel-open" style="margin-right:5px;" data-panel="right">
                <img id="user-pic" src="" style="width:40px;height:40px;border-radius:20px;">
              </a>
          </div>
        </div>
      </div>
    </div>

This same code exists in chats.html to allow the user to click on their avatar and activate the right panel menu.

The postoffers.html is a nav bar with a back button and then a scrollable list of Offer cards. The way it works currently is this view gets added to the offers-view.

  <div class="page" data-name="postoffers">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="left">
          <a href="#" class="back">
            <i class="icon f7-icons ios-only color-black" style="font-size:40px;vertical-align:middle;">chevron_left</i>
            <i class="material-icons md-only color-black" style="font-size:40px;vertical-align:middle;">chevron_left</i>
          </a>
          <div class="title">
            <div style="display:inline;vertical-align:middle;font-size:24px;margin-left:5px;">Posted Offers</div>
          </div>
        </div>
      </div>
    </div>

Hope the above helps clear up the structure. The user can get to the Posted Offers by either:

  1. clicking on the avatar image in the top right while on the Offers (offers-view) page, then clicking on Posted Offers and the list will become visible immediately

  2. clicking on the avatar image in the top right while on the Chats (chats-view) page, then clicking on Posted Offers and the list will NOT become visible but the user has to choose the Offers tab on the bottom nav to switch views to see the Posted Offers list.

8

You can just:

  1. add additional tab-link class to panel links
  2. add data-tab="#view-offers" attribute

And such panel link will switch View/Tab to offers and then load there offers page

1 Like
9

Fantastic! That works perfectly