I'm building a single page application using AngularJS. I want it to have a master detail appearance. Where there is a list on the side and a main view on the rest of the page showing the information for that list element.
I was wondering whether the correct way to approach this would be to use ng-route? Using ng-route I presume that I would have a url such as '/:elem' and a template url which then would display the information for that element using routeParams.
I'm having a bit of trouble just working out how all the server calls work. I have separate services for the API and the UI. So are the server calls like this:
The user navigates to my webpage and all the .html files are returned, including the template html files, but with no data apart from just the list of elements.
When the user clicks one of the elements, then another call is done to the server to retrieve the data for that element.
Thank you.
Related
I have been reviewing the Rest Admin API to try to figure out the answer to this question and I may be simply be looking at the wrong documentation.
We're trying to develop an application that will add custom data-driven pages to the site that will take product(s) from multiple selected categories and display them all on a single page, with checkout forms for each. This is done already by other apps, but we have to do a custom implementation so we can match the client's specific functionality needs. An example of an app that does something similar is the Bundle Builder app, which appears to modify the output of {{ content_for_layout }} in the theme.liquid file. It outputs some JSON gathered from the Shopify database (which can be done with the Shopify REST API) and an empty div. Getting the data isn't my concern, but I can't find anywhere in the docs I've looked at where it describes how to modify storefront HTML output.
I suspect it may do this by adding a template (but it has not added that template to the theme files) and associating it with the page URL, or by modifying the output of an existing template, or by adding a section and somehow integrating it with a page, or otherwise, but I have been unable to find documentation for how to do any of those tasks in the docs I've looked at. Other apps appear to add HTML to the storefront as well, such as Privy (which adds pop-ups), Easy Contact Form, and User Photos
What am I missing?
If you want to fill in an empty element with content, one easy way is to use an App Proxy. Shopify will make a secure callback to your endpoint of choice, and you can return data. You could also return Liquid and Shopify will render it along side the rest of the page chrome, ensuring your Liquid becomes the page.
I am trying to have node red go to my router IP and search through the HTML code to see whether a certain device is on the list. When I right click - inspect I can hover over the list I am interested in and see the HTML information I am looking for. When I use the HTML node it seems to only look through the view page source information, which does not have what I am looking for. I there a way to point the HTML node at a more specific element instead of the page source as a whole?
It sounds like the data in the page on your router might be dynamically generated using JavaScript.
This means that when the page is loaded it only has the outline and the rest is filled in by the code using XHResquests to a different URL that supplies the information.
In order for Node-RED to be able to extract the information from the page it would need to load the outline, then effectively run all the JavaScript. Libraries like PhantomJS
There is a contrib node that might be able to help node-red-contrib-nbrowser but the better approach would probably be to work out what URL the JavaScript is calling and calling that directly as the data is most likely to be in a format that is easier to process (e.g. JSON)
I am trying to have a single GAS project that changes its UI by serving up different HTML pages based on what the user clicks. I cannot figure out how to serve up different HTML from the script, replace the current browser page and retain state. Any help appreciated. Thank you.
I use two options:
Have a main page which has buttons or text areas with onchange set to a function which calls back to the server side and gets new page data, then replace the current page or a portion of the page, with the new page.
Pass parameters in the URL and have the server side doGet() parse the parameters and branch to load a given page based on these values.
I have used a combination of both of these effectively. Basically I have a div which has my "menu" and a div which is the section to be replaced. My menu changes and then data is sent back to the server to get the dynamic body. The HTML is returned and then I replace using innerHTML.
In the same code I offer the ability to pass menu values via the published URL. This allows me to go directly to some values if I so choose as I have a Google Site where we embed the script into pages and the menu selections may be specific to that page. It allows us to use an iFrame to show the web app and go directly to the pertinent interface.
With google.script.run you can run any script on the server from the html page. By communicating with the server you have access to PropertiesService which gives you the capability to store information between pages. Personally I like the HTML Service createHtmlOutput(html) because I can edit the html without having to edit a separate page.
I decided to answer your question here so that I could use the code section.
Question:
I am actually looking to avoid manipulating the HTML and serve up a
completely different HTML file stored in the project. How do I make
the page call the script again and replace itself with the new
content?
We I'm guessing that completely replacing the page is not really what you want because the user will suffer a page refresh. But you could create divs like this:
<style>#R01{display:none;}</style>
<div class="replaceable" id="R01"></div>
If you put all your replaceable content in divs like that then you can request content from the server via calls like this:
google.script.run
.withSuccessHandler(updateConversation)
.withFailureHandler(showStatus)
.getConversation();
and put the new content into the appropriate divs and then change the css with another pair and turn the old content off and the new content on. Thereby avoiding a page refresh. Don't forget to save the old data into the PropertiesService first. So I don't think changing the entire page is the way to go but I could be wrong. I think just changing some of the internal content will avoid the need for a total page refresh. If you want to change images you can avoid another download by using CSS Sprites
I've an app, which loads data from database. In a table I'm storing some URLs EX: https://facebook.com. Remember these URLs are dynamic and are controlled in admin panel.
Now, I need to get contents of these URLs and display it inside iFrame or inside a div within my app. Idea here is user should not go away from my app.
When I tried to load https://facebook.com it never loads because they've (X-Frame-Options) enabled.
Is there any solution for this?
You cannot tell the browser to ignore the security instructions provided by the third party site. That would defeat the object of having them in the first place.
If you want to display the content on your site, then you will have to display it from your own server (e.g. by using a server side process to read the data from the third party site and serve it from your own). Obviously, this will mean that you cannot (for example) load Facebook using the user's own credentials.
Can I refresh a HTML component in JSP? I have two dropdowns. On selection of a value in the first dropdown the values in the dropdown box are to be fetched from the database. Is this possible using JSP?
First, JSP is just a view technology which provides a template to write HTML/CSS/JS in and offers facilities to interact with backend Java code using taglibs (like JSTL) and expression language (those ${} things). JSP runs at the server machine, produces a HTML page and sends it to the client side (if you rightclick page and view source in webbrowser, then you should not see any line of Java/JSP code if it has done its work right). JSP does not run at the client machine and can therefore not be directly used to do partial updates in the HTML page.
To achieve what you want, you need to use JavaScript to fire an asynchronous HTTP request (also known as the Ajax technique) to retrieve the data and manipulate the HTML DOM tree accordingly to add the new elements. Since methods to fire Ajax requests and manipulate the HTML DOM may differ among webbrowsers, I strongly recommend to pick the jQuery JavaScript library to keep it concise and simple without any worries about functioning in different webbrowsers.
I've posted an answer in detail about this before, check solution #3 in this answer.