The layout in my app has a menu on the left and content on the right. When a user selects a menu item on the left I open the correct Xpage. This is pretty standard.
I have transitioned to a Bootstrap menu on the left. Once loaded, state changes (menu selection, accordion drop downs) are handled via CSJS. So this gives me the opportunity (if possible) to refresh the content window on the right without having to submit the whole xpage again.
But I do not think you can do a partial refresh from one custom control to another.
Is there any way to do this or anyway to structure the app so I can do this?
May be you can do something with postMessage in CSJS. I have used it to do actions, like resize in a XPages when it is embedded inside a widget in IBM Connections. See the interaction in the OpenNTF project 'Generic HTML and XPages Widgets for IBM Connections', https://www.openntf.org/main.nsf/blog.xsp?permaLink=NHEF-8YRN3J
More details how to use postMessage. https://davidwalsh.name/window-postmessage
Probably the easiest way is to wrap your right side contents with a panel and give that panel an id. Then when the user changes something on the left menus do a partial refresh of the panel. You might need to type in the panel id as it will not be available on the id picker in partial refresh.
Howard
Related
I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.
I'm developing an NFL fantasy web app with bootstrap & jQuery. I originally was using Framework7 because of the easy native app-like interface but abandoned it to develop a fully responsive page instead.
I have a div with a list of matchups and would like for the user to be able to click on one and see the matchup detail. On Framework7, it would slide in an external ajax page, show a "back" button at the top which would easily slide that new div out and go back to the original one.
Is there an easy way to build this custom with jQuery? I already have been messing with $.load() but I'm not sure of how to:
1) slide/animate that external page into the div I need, and
2) add a "back" or "close" button that will animate/hide the div and show the original div instead.
Thanks in advance.
Sure, exactly as you said it...
$(divElement).load("newPage.html",function(){
$(divElement).slideIn();
});
Then on the click action of a back button element in that newPage.html
$(backButton).on("click",function(){
$(divElement).slideOut();
}
I have a website with Drupal 7. On one page, we have two quicktabs (using quicktabs module), under each quicktab we have expendable fields. Those fields are expandables thanks to this code:
jQuery(".ideas-content").hide();
jQuery(".ideas-title").click(function () {
jQuery(this).toggleClass('ideas-closed').toggleClass('ideas-open').next(".ideas-content").toggle();
});
The user can click links inside these expandable fields to go to another inside page. When the user goes to the previous page (the page with these expandable fields), quicktabs are back to default and the fields the user previously expanded are not expanded anymore.
How can I do to have the user coming back on the page with the right quicktab and fields expanded? I was thinking to create anchor links but I do not know more.
I googled the issue with no success.
Thank you for any input and help.
If you are able to access the exact HTML of your page, through template.php function overrides, .tpl.php overrides, or by writing the HTML yourself within the page.tpl, you can add IDs and classes around the elements you want, and then since you are using javascript, you can try using a library such as https://github.com/browserstate/history.js in order to get functionality to take the user back to the state they were in -- with open sections -- after going to another page.
I am developing a retail store website and am using an html page with JavaScript. I want to use iFrames. The main page (Page1) is made up of a banner, a menu on the top and an iFrame below. For clarity I will call this iFrame1. In iFrame1 I have an html page (Page2) that contains another iFrame. I will call this iFrame2.
Page 1 has a top level menu detailing departments for example curtains, cushions, clothes etc. Selecting one of these items brings up another page (Page2) with a 2nd level menu based upon the selection within the first menu and a ListView of relevant sub headings and images pulled from the database. Making a selection from the menu in Page2 will change the “Where~ clause in the Select SQL statement and bring up different items for example types of curtains, colours of cushions, sizes available etc.
What I am looking for is a way to automatically resize both iFrames depending on the number of items that are displayed in the ListView in Page2.
Im not exactly familiar with iframe's (except for all the people telling me not to use them). So might i suggest using ajax instead with div's? (please correct me if im wrong in suggesting this)
You could define a scrollbar to appear instead of trying to automatically resize an iframe. What you're describing sounds messy though, and iframes there are many reasons why not to use iframes (http://blondish.net/iframes-why-not-to-use-them/). Try divs, and dynamically including the content?
I have two dojo containers on page. The main container has three content panes (tabs), pane1, pane2 and pane3. Pane2 has another container which has two panes(tabs) again, pane2a and pane2b. What is the javascript code I write to make the last selected tabs remembered after refreshing/moving away and coming back to the same page. persist=true isn't working with my version of dojo. Please help.
You could use dojo.cookie() to set a cookie whenever a tab is selected, then read the cookie on page load and select the relevant tab.