I was wondering if anyone can help me with the following problem:
I have a external (and normal) html page that uses javascript to display other html
files in an object tag. These files are in the same directory, so theres no problem there.
How can I link and display my Ruby on Rails application/pages in this same object tag and
html file? i.e. How do I integrate the two?
Thanx
These are the elements which send the data over and the object that displays the page:
<div id = "leftBar">
<div>
<nav>
<ul type="square">
<li>
<a id = "menuLink" href = "Page.html" onclick="loadPage(this); return false;">Solar Flare
</a>
</li>
</nav>
</div>
</div>
<div id = "mainPage">
<object id = "obj" type = "text/html" data= "Main.html"> </object>
</div>
This is the JavaScript function that displays the page in the object tag:
function loadPage(link)
{
document.getElementById("obj").data = link.href;
}
Ruby on Rails can only be run at a server. Before you can access the pages inside a Rails project, you need to start such a server on localhost or deploy your application to a webserver. For example, in a Rails 3 project, you can start a server with:
rails server
To access the pages inside a Rails project, just point to http://localhost:3000:
<a id="menuLink" href="http://localhost:3000" onclick="loadPage(this); return false;">Your Rails project</a>
This seems weird to me. Maybe you can explain a little more what you want to achieve.
In the meantime: if your Rails application is up an running anywhere on a server then you can access it like any other link. And if you want to embedd any page (no matter if Rails, PHP or a plain HTML page) you could use for example the iframe tag.
Related
I'm not sure I understand what's possible with multi-page templates in JQM so I need a bit of help. I'm using version 1.4.5.
Let's say my app has only two pages (Page A and B) generated by a multi-page template. It takes the server several seconds to generate each page because they require many database calls and data processing. Currently, this multi-page template is generated by a single script on the server, index.pl.
Both pages are accessed by the user through a navbar. Page A is the first page in the template so it's visible to the user first.
To speed up the app, I want the HTML for Page B to get generated and fetched from the server only after the user taps the navbar menu item for Page B.
After Page B loads, the user should now be able to switch between pages instantly since the content for both pages are loaded into the DOM.
What is the proper way of accomplishing this desired result?
Do I tie the navbar tap on Page B to an ajax call and inject the server response into Page B? This seems kludgy.
I'm thinking I'm missing something fundamental about JQM but I'm not sure what. Can someone help?
SERVER-SIDE SCRIPT PSEUDOCODE:
<!-- PAGE A -->
output <div data-role="page" id="page_a">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_a();
output </div>
output </div>
<!-- PAGE B -->
output <div data-role="page" id="page_b">
output <div data-role="navbar">
output <ul><li>Page A</li>Page B<li></ul>
output </div>
output <div role="main" class="ui-content">
generate_html_page_b();
output </div>
output </div>
For your architecture the best approach is single page template but you can use the pagecontainer API to load any page programmatically.
$(":mobile-pagecontainer").pagecontainer("load", "about.html", { role: "dialog" });
Check the jQM docs for more information.
I have a Ruby on Rails app that loads a single page Angular JS Web App when the user is logged in, and serves static info pages via RoR views when the user is not logged in.
The angular templates are in 'app/assets/templates/' and the rails files are in 'app/views'.
I have a text heavy html page that I would like re-use with both rails and angular. I've tried accessing the rails view from my angular $routeProvider, setting templateURL to the path of the view. This causes more than one instance of angular to load and it gets stuck in a loop.
app.config ($routeProvider) ->
$routeProvider.when('/features/',
templateUrl: '/views/features.html'
)
I've tried rendering the file in my assets/templates folder through a rails view. That doesn't work either since rails can't find the partial.
= render 'assets/templates/features.html'
Does anyone know how I might be able to use a single template for both?
I'm mot sure what exactly you mean by text heavy page. But what about other solution - extract all text to JSON file with keys (some sort of translation file). For example:
{ "title1": "Title", "paragraph1": "lore up sum. .." }
Then you can load this JSON in your rails controller and pass it to view that render text parts from it.
<h1><%= #text ['title1'] %></h1>
<p><%= #text['paragraph1'] %></p>
And as well load JSON as resource in your angular app and pass it to view.
<h1>{{ text.title1 }}</h1>
<p>{{ text.paragraph1 }}</p>
If your text is somehow structured you can make use if it and automate the view with loops, conditions etc and so save repeated parts even more.
I'm trying to implement simple ajax by using jquery in mvc. I'm just trying to load some contents from another page in the current page. My code is looks like this:
<div>
<ul id="biographies">
<li> Ajax</li>
<li> Index </li>
</ul>
<div id="biography">
The ajax content will appear here...
</div>
<script type="text/javascript">
$('#biographies html.ActionLink').click(function (e) {
var url = $(this).attr('href');
$('#biography').load(url);
e.preventDefault();
});
</script>
</div>
But having some problem as follows:
When I keep the ajax.cshtml file in Home folder under view, its showing content not found, I need to know how to link internal resource in mvc using simple anchor tag not html.actionlink method.
When I keep the ajax.cshtml file in the root directory, it just move to that page rather than loading the contents in first page,which is expected.
Please help. Thanks in advance.
Replace
$('#biographies html.ActionLink')
with
$('#biographies a')
I'm very new to Rails (and web) programming, so I'm not even sure what technology I should be looking for for this.
I've downloaded and run through the first five chapters of the Rails tutorial, but now have a very simple request.
On the left hand side of a web page, I will have a table. If the user clicks on an element in that table, I want to have the right hand side of the page show something new.
I already have a page to display the table, viz:
<div class="center hero-unit">
<div class="container">
<h2>2012 Yearly Report</h2>
<div class="row-fluid">
<div class="span12">
<div class="span4">
<table border="1">
</table>
</div>
<div class="span6">
<!-- load stuff here based on what someone clicks on in the table -->
</div>
</div>
</div>
</div>
</div>
And I'm using bootstrap layouts to display everything. I just don't understand how to change the contents of the 'span6' div based on user behavior in 'span4'.
This is a difficult question to answer. It really depends on what kind of data you're trying to display and what sort of interactivity you're looking for.
You don't really provide much information about what you're trying to accomplish, but if I had to guess, you're trying to load data from your database and insert it into an element without leaving the current page. This is what AJAX is for (your tutorial goes into it a bit in chapter 11) and involves a good deal of javascript, which is generally beyond the scope of a server side language like Ruby. Luckily, rails includes helpers for making it easy to include AJAX features into your web application without having to write a lot of javascript (although you'll have to write some).
As an example, suppose your table has a list of articles, and you want to display the contents of an article in a div when its link is clicked on.
First the link:
<%= link_to article.name, article_url(article), :remote => true %>
The remote option tells Rails that it's an AJAX link.
Next, you need to render a javascript template for your article's show action. You'll name it show.js.erb.
Supposing the div you want the data to be loaded into looks like this,
<div id='article-content'></div>
you'll want your show.js.erb to contain the following:
$('#article-content').html("<%=javascript_escape #article.content %>");
This javascript (with embedded ruby) code will be evaluated when one of your remote links is clicked and will replace the content of your div with the article's content.
There is plenty of resources online to give you more information. It looks like railscasts just released an episode on this topic just a week ago. It requires a subscription to view, but is well worth it (especially if you're just starting out).
I want to add a link to a page named "Prueba_jQMobile", that is saved in a local folder with the others html page and jquery libraries. This is the code:
<ul data-role="listview" data-theme="b">
<li>Vacunas</li> <!-- is working well -->
<li>Test</li> <!-- is working well -->
<li>jQueryTest</li> <!-- isn't working -->
</ul>
Thanks.
Update: I executed the html page with firefox (before was using chrome) and the link was opened, but in plain text without the design. I'm going to continue testing it.
Try : JQueryTest
So it doesn't open, when you click on the Link?
try:
jQueryTest
try /Prueba_jQMobile.html or if it's in a higher directory ../Prueba_jQMobile.html
Use the hash befor the URI.
It should be jQueryTest