problem with panel in ui layout - jquery-ui

I am using a simple layout demo in my rails3 application
simple layout demo
in this demo there are 5 panel north,south,east,west,center
when I load my project this all panel show in each and every page.
instead of I want to some specific panel in different different page
give some idea how can i do that

Is the code from the simple layout demo all in your /app/views/layouts/application.html.rb? If so, rails will render everything from that file in every view. Since the jQuery code that does all of the stuff in that demo is in that same file, there may be no easy way to make that work with rails. The only thing I could think to do would be to have different .js files for different pages. each of these separate files would have jQuery code that creates the layout for that page, and is linked to that page using content_for and javascript_include_tag. I'm writing an app that uses jQuery UI and this is how I've had to do it. I created sub folders in my /public/javascripts directory that I named after my models to make it easier to keep all the .js files sorted.

Related

Rails load selective contents into view using jquery load function

Recently, I've found this template from codyhouse which I decided to play with it a little in a sample rails app.
Looking into the code, I found that the page transition from the side navigation bar is happening via jquery load function.
From what I understand, whenever view, say user/show, gets loaded in rails, the contents written in the specified url, which in this case would be the contents in my user/show.html.erb file, gets embedded in the application.html.erb file.
As this is the case, I was wondering if there would be a way to "swap" contents being embedded into the application.html.erb file perhaps via jquery load function. For instance, without having to reload the whole view, replace the user/show.html.erb contents loaded in the page with the contents of user/signup.html.erb. Or is it not possible as it deviates from the concept of the MVC model?

How to prevent full page refreshes with areas

We started a modular MVC project at the beginning of the as described in this thread.
MVC Ninject: How to add NinJect bindings from an MVC Area project
One thing we've yet to figure out a good solution for is prevent a full page refresh when loading views from different areas.
A brief history, we use different web projects for all our areas. When the projects build, we copy all the files to an Area folder in the main web app project.
The main web app project the header portion of the application contains a menu which allows users to open any plugin.
Right now when a user clicks on a menu item, the menu as well as everything refreshes.
We've been experimenting with partial views in the plugin projects but still getting the page refreshes and most of the time losing css causing page layout problems.
At the very least the _Layout template we use in the main website, we need to find a way to where that doesn't refresh when loading views from any area.
Any ideas would be greatly appreciated.
Thanks
This has been an off and off thing but finally we found something that looks promising without having to resort changing a lot of code to a javascript framework. We use jQuery for UI manipulation but try to keep what we write down for productivity and quality considerations.
Right now we're working with MVC built in ajax helpers so this ability is actually native to the Asp.Net MVC.
Basically, the div which contains #RenderBody, we gave an ID.
Then we define AjaxOptions to replace html in this div. Then we use Ajax.ActionLink.
The beauty of it so far is we define ajaxStart & complete functions which handle a loading div while loading in a single place.
<script>
$(document).ajaxStart(function () {
$("#loading_div").show();
});
$(document).ajaxError(function (result) {
$("#loading_div").hide();
alert('Exception: ' + result);
});
$(document).ajaxComplete(function () {
$("#loading_div").hide();
});
</script>
Then in all our plugin applications, all controllers return partial views. One thing I noticed is, in our plugin projects, in the _ViewStart template, it is important to comment the Layout.
If not we found the more you clicked on links, the more you'd have controller actions running repeated loops.
It's imperative to load the jquery-Unobtrusive-ajax script in layout. We do so in the head.
We have a solution with 41 projects, 7 which are plugin projects. So far watching the dom and network traffic, everything in the initial tests is running nicely.

ruby on rails, adding a partial to each html page in the system

I'm currently working on a project which has ROR in backend, I need to add a noscript tag to every page in the system to show a banner to the user.
Does ROR provide an easy way to add a piece of html to every page?
Add it to the application layout file /app/views/layouts/application.html.erb. That file gets loaded for every view unless you have disabled this layout or have used a different layout.
If you have multiple layouts then place the <noscript>...</noscript> in a partial and render the partial in all the layouts.

How to use multiple files with phonegap jquery mobile app

I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.

How can I find where actually is the theme file?

I am new to Symfony and I need to work to a large project with many themes to modify them. How can I find where actually is the theme file in which module, just looking at the HTML browser output? Or do I need to look somewhere else, routing for example?
What you want to do is use the Web Debug Toolbar.
Once you have that running on the page, using appname_dev.php, simple click the view link and it will show you which templates have been used. If you need to know which layout to use then use logs link, click none the sfPHPView.

Resources