I was hoping someone had any insight on this basic approach. Sample scenario:
I have a dashboard template with menu links a(href "/page") and I want to click the links to render a different section/view on the template. I used block content...but does it need a specific route?
If I understand correctly, you want to update the content of the page on click of the link without the page getting refreshed.
In that case, no you can't do it using block content.
The purpose of block content is to apply inheritance in your templates.
The typical use of block content would be creating a layout and then creating more specific page from the layout. This is what the official documentation says.
The reason why you cannot do it because, jade is server side templating library. This resolves the block content on server. Once rendered in client, the html looses all the information that was specific to jade (which is obvious because its an html afterall).
What you can do here is
Create a /page.jade and make a ajax call to a service. That service should return an already compiled html string. Since you are using jade, you can easily use jade.compile(source, options) to template / generate html.
Jade API documentation here
Related
I am building a react blog app, I am using a functional component where I will be using some internal and external links both. For the internal links I am using Link from react-router-domwhich is working fine but for the external link I am not able to decide will an Link from react-router-dom works, which directs to the path of the external URL or an <a> tag should be fine.
The purpose of using react-router-dom is to navigate to application routes by making changes in the DOM and not reloading the whole page. This scenario is applicable to internal links.
When coming towards external links. It is something that is not the part of our application. We cannot render it our application context. So, a solution to that is using an a tag for external links.
Link is basically a wrapper of an tag with a lot of upside functionalities like,
A can know when the route it links to is active and
automatically apply an activeClassName and/or activeStyle when given
either prop.
The will be active if the current route is either the linked
route or any descendant of the linked route.
To have the link be active only on the exact linked route, use
instead or set the onlyActiveOnIndex prop.
Read the rest at https://knowbody.github.io/react-router-docs/api/Link.html
You can use the anchor tag if you plain something plain. use Link for ease of use.
How do I navigate to another page within my Elm application?
Specifically, I am trying to navigate from the Home page to the Contributor page.
The Contributor page is located under my Domain folder.
The file structure is below:
- Home.elm
- Domain
- Contributor.elm
I thought I could do something like this:
a [href "Domain/Contributor.elm"] [text "click me!"]
or this:
a [href "Domain/Contributor.html"] [text "click me!"]
However, neither of these paths work.
Note:
The app that I'm working on is NOT a SPA.
You are using elm-live, which is a development server. It targets a single Elm source file as its entry point, so unless your Elm code is built as a single page application, you won't be able to do any navigation to another file (though there is nothing wrong with hard-coding href links that link elsewhere).
elm-live is also only for development. You wouldn't want to run it on a production server.
If you are trying to avoid a SPA and would rather have each Elm file represent the complete functionality for a single page, perhaps you could go with the default functionality of elm make, which generates an HTML file that contains inline javascript compiled from Elm code. This is, in essence, what drives the elm-lang.org website. If you look at the source code, you'll see the html generated by the default elm make command, compiled against each Elm file "page" of the application.
On the other hand, if you are trying to build a SPA, #Bill's answer is a good starting point.
I don't believe you can do the sort of navigation you are trying to do within an Elm app without building a SPA. You are attempting to use the HTML href attribute to navigate. That attribute needs to be a real URL. Without using something like the Elm navigation package, you wont's have support for multiple routes.
Simple navigation in Elm is fairly straightforward. I wrote a blog post on this subject.
Also, here is the github repo that demonstrates the work in this post.
I want to invoke a procedure in one page and use it in another page, and the response is only used by the next page, so I think JsonStore is not suit for that. Should I define a global var?
Is there any code sample to do such things? Thanks for your help.
I presume by pages you mean different HTML files. If so, that is not recommended, Worklight is intended for single page applications. There are no code samples that show how to do that.
I would recommended having a single HTML page and using something like jQuery.load to inject new HTML / DOM elements. By dynamically injecting new HTML your single/main HTML file shouldn't be too big and you can destroy (i.e. remove from memory / the DOM) unused DOM elements. Searching on Google for page fragments and html templates could help you find examples. The idea is that you don't lose the JavaScript context.
Maybe you can get away with doing a new init to re-initialize JSONStore (it won't delete any the data, just give you access) on every new HTML page and use get to get access to the JSONStore collections to perform operations such as find.
I'm building a website with very small amounts of Javascript, just to add things to the page (like a contact form) without having to go to a new page.
I understand that I should build the contact page anyways (just in case the user doesn't have javascript turned on) and then use javascript if they've got it.
So where do I store the HTML for the form if I don't want to have it in two places?
(Normally I'm not so picky, but I'm curious on this one.)
If you have access to a server-side language, you can keep a separate snippet of the form in an external page. Then, you can include the snippet into the HTML content page with an appropriate include call. This has the added benefit that, for your JavaScript, you can pull the contact form from this snippet file using AJAX. In fact, many plugins allow you to display DHTML windows with HTML content. For example, check out ThickBox.
Without a server-side language, you can do something similar with frames. Just display the form snippet in a frame when you need to reference it. Personally, I don't like frames very much, so this isn't a very attractive solution for me, but you can use it if you choose (and style the frames appropriately).
Just put your HTML for the contact form in a .html file. Assuming you're using PHP or something, just include the file in your contact page and include it in the section for your dynamic contact form. The form should still submit to the same server-side page and have the same look and feel..
e.g. contactForm.html
<div class="contact-form">
<input ....>
</div>
I need to find a way to write a program (in any language) that will connect to a website and read dynamically generated data from the website.
Note that it's dynamically generated--it's not enough to get the source html, because the data I'm interested in is generated via javascript that references back-end code. So when i view the webpage source, I can't see the data. (For example, go to google, and do a search. Check the source code on the search results page. Very little of the data your browser is displaying is reflected in the source--most of it is dynamically generated. I need some way to access this data.)
Pick a language and environment that includes an HTML renderer (e.g. .NET and the WebBrowser control). Use the HTML renderer to get the URL and produce an HTML DOM in memory (making sure that scripting is enabled). Read the contents of the HTML DOM after the renderer has done its work.
Example (you'll need to do this inside a System.Windows.Form derived class):
WebBrowser browser = new WebBrowser();
browser.Navigate("http://www.google.com");
HtmlDocument document = browser.Document;
// extract what you want from the document
I used to have a Perl program to access Mapguide.com to get the drive direction from one location to another location. I parsed the returned page and save to database. If the source never change their format, it is OK. the problem is the source format often change, your parser also need change.
A simple thought: if we're talking about AJAX, you can rather look up the urls for the dynamic data. Then you can use the javascript on the page you're talking about to reformat this.
If you have Firefox/greasemonkey making a DOM dumper should be a simple matter.