Im unsure of how to approach this, should I have the html to be loaded hidden or load it from somewhere? I want to load a form in one page, and dynamic content on other pages.
The form can be saved to mongo db, and when the page loads should load the data into that form from mongo db.
Where does the html live for all the pages? I want to have a clean html5 document with lets say a content div. all content goes into that block.
Server running Django
Im want to use backbone.js for the app
any help would be appreciated
The initial page should include the basic layout of the application (header, content, sidebar, different placeholder for your views, etc.)
Then you load the application (usually with a controller) and render the different view that will replace the placeholders you had in your layout.
To render the views, I suggest to use a templating engine. With backbone.js there is already underscore.js on the page, so you can use the templating engine included (http://documentcloud.github.com/underscore/#template). You then have to load the template on the page. The easiest way is to create include a script element on the page with your template inside:
<script type="text/template" name="template1">
your template here...
</script>
And you can load it using this:
var template = _.template( jQuery("script[name=template1]").text() )
and execute with your data
var html = template(model)
You build your page with different backbone views using different template.
I hope that help!
Related
As you all know Vue js works in template. So it load the content the the page dynamically. so there is no way to change the meta tags manually. So there is a package called vue meta which is used to change the meta tags of the vue page dynamically. But the problem is when I change the meta tag dynamically It only changes in the inspect. But when I open the page source it isn't changing there.
you can see the meta tags in the inspector here
but there is no change in the page source
I even tried server side rendering for this. Is there any solutions??
Thanks in Advance
Within an article in Joomla, I have the following code:
(loadposition file_download)
This line of code loads more code, but I cannot access it from the Articles page. How do I access the loadposition code?
On the web you are always striving to separate content from display. Here you are just setting up the display so that when the page renders items in the file_download position will render. That is the html for whatever is in file_download will be generated dynamically when the user looks at the page in the browser. In the editor you are just creating html. If you save the article and view it in the rendered form (i.e. in the Joomla frontend) you will see that loadposition will do its work of rendering whatever it is that file_download asks it to render. That is loadposition is a way to dynamically include content (which might include text, javascript, whatever) into an article.
I'm trying to create embeddable content similar to how twitter allows websites to embed tweets.
For example, twitter allows the user to copy paste a stub blockquote and javascript that, upon running the js, replaces the blockquote with an iframe of content.
I've done something similar (I'm using django)
<blockquote class="embedded">
<p>placeholder text</p>
</blockquote>
<script async src="{% static 'widgets.js' %}" charset="utf-8"></script>
The widgets.js script then makes an ajax call to a django view method that calls render_to_string and loads the desire HTML for the iframe. If simple HTML is returned then everything works perfectly because it merely requires something like iframe.get()[0].contentWindow.document.write(content)
But here's my problem. The HTML I want to load requires DataTables and DataTables is supposed to init a table inside $(document).ready().
Because this is iframe content, document.ready() will never be called (as far as I'm aware). At the moment I've been able to init the DataTable by placing my javascript at the very end of the HTML but there's no guarantee that the html would be fully loaded when that init call is done.
Ultimately the issue is timing. I need the dynamically generated iframe content (loaded with ajax via a django template) to execute its javascript before it's then loaded into the iframe.
Is there a way to enforce this timing?
Leaving all the header/footer/nav parts of pages untouched,
refreshing only page's content with AJAX,
can't use base template extension's block mechanism to set content-corresponding styles, scripts, page title?
Wonder how to get .css and .js for updated content with AJAX?
In general, you will want to make all of your CSS and JS available in the header templates so that they are available when your dynamic content is loaded. The overhead is slight, and you will be following the "Django way."
Another option is to include inline CSS/JS in your dynamic content, but this approach is not recommended. It leads to messy code and can be difficult to troubleshoot.
Can't use full sentences?
Anyway, I have no idea why you think you need to get CSS and JS for partial pages. A set of HTML elements dynamically inserted via Ajax will simply use the existing CSS associated with the page.
I need to use a static html page as an MVC3 razor masterpage.
It needs to be able to inject the controller's razor-built view into a specified span tag on the static html page.
How do i go about:
Load the static html
Parse the static html string to the point where i need to inject the razor-view
Inject the razor view.
Here's the reason why-- a client of ours wants to be able to publish static html (daily) from their CMS and have the application pick up on the "template" and use it for they dynamic sections of their site. They do not have any understanding of .NET and MVC3 and I can not have them interacting in any way with .NET and such.
Any ideas?
Thanks.
Assuming you only need to inject your view into one part of the HTML, you can chop the HTML into "before" and "after" pieces. Create a Layout.cshtml that has "before", "middle", and "after" sections. before & after are the parts you parsed from the .html, and middle is the result from your Razor view.
Static pages aren't executed by the server, so if the requirement is to import a dynamic page into a static page, your best bet will be to use an iframe or javascript to place the generated html from the mvc3 site on the page.
You can do this using jQuery pretty easily:
$(function() {
$("#ContentFromMVCSite").load("http://mysite.com/url/to/mvc/view");
});
<div id="ContentFromMVCSite"></div>
This code will download the html output from the mvc site and place it inside the div. For more information see the documentation.