How to show jsp content in ExtJs window? - javascript

I have a jsp with ExtJs application. I click a button new Ext.Window appers . In this window i want to show forms from another jsp. Its mean that i want:
1 Send parametrs to jsp.
2 Fill a forms according to these parameters.
3 Show froms in window.
4 After send parametrs to first jsp.
Another way its send a parameters in second jsp and create window and forms in this jsp and show it.
Which way is more correct and how to realize it?

Second way might be easier. The Ext Window (or it's parent Panel) component has contentEl property that can be specified. What this does is load the html of the element into the Panel component as html property. So you can take an existing JSP with all of its rendered html on the server side and show it as is inside a Window panel.
The first way might be achieved through a component loader . What this does is lets you load content of a remote page (JSP in your case) into your Ext component. I have not used this so I am not sure what limitations you might face with this. There are however some interesting possibilities described in the docs: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentLoader

Related

Is it possible to change some content of a view without completely re-render it in express.js

I am currently making a calendar where users can click on dates, and a popup window then shows the events of the date that user clicked at. However, we don't know which date the user will be clicked at before rendering, the content of the window cannot be determined. Is there any way I can dynamically change the content of an element after a user action ("click" or "hover") in Express.js?
Yeah, make a separate API route that returns JSON and fetch it using client side JS and integrate it into the page without a reload.
This is a very common pattern in React.
Also this method is called AJAX, so you might look that up too!
Is there any way I can dynamically change the content of an element after a user action ("click" or "hover")
That would be the responsibility of client-side javascript. It seems like you need a in the html file your express code is serving.

Moving an HTML+javascript page to iFrame

I have an existing website composed of individual pages (each page is a different tool that requires some user input (ie forms), and each with it's own set of javascript functions to populate dropdown lists, etc on that page). Each of the tools is accessed from the main index.html.
Instead of each tool being its own "stand-alone" page that is invoked from index.html, I'd like each tool to be displayed in an iFrame instead on the main page. This way the main page remains static, while only updating the iframe with whatever tool the user selects. So say on the main index page, I have a 3 tools menu (collect logs, collect KPIs, collect status), along with an iFrame. If the user selects collect logs for example, the menu containing "collect logs" stays there, but the "collect logs" page is displayed in the iFrame.
My problem is that all the HTML content works fine, but none of the javascript code in the selected tool page works (ie none of the drop downs get populated since it's the javascript code in the page that does that by reading a file on the server).
Is there an easy way to port each tool page (html+javascript) to an iFrame without having to re-write tons of code (in my naivety I thought simply invoking the page inside an iFrame using target='' in the href would work)? Or is there a better method of accomplishing what I'm trying to do? Maybe iFrame isn't the solution.
Content in iframes remain autonomous from the wrapper app, so it makes sense that it's not working correctly. Other than building a listener for a click event associated with the div wrapped around the iframe, the iframe document isn't accessible if it points to a different origin. (See [same-origin policy]
(https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy))
To stay with simple html/css/js solution:
You can use a regular div to wrap each 'stand-alone' content and then just use whatever button/navigation target you have display that div and hide the previous by changing their css display style with the onClick event.
More invasive option:
You may want to consider using a more modular JS approach, like React JS, to build components vs pages and utilize React's structure to toggle components.
With react you can render each 'tool' when the user selects it . You would be able to utilize React component state as well to help in storing data and such for the life-cycle of the component.

Is it possible to make changes to a page source content variable through Ajax

Is it possible to make changes to the page source content through Ajax loaded by a jsp include in the main jsp ?
If not is it possible to reload that portion of the page alone (the jsp that loads some of the content) and to have a portion of the content in the page source changed ?
Details:
I've a variable called page this var gets its content from a java controller as a map of <String key,map<String key,String value>then it performs multiple actions and adds different params to the map, convert it to JSON and sends it to a jsp.
Recently I wanted to do something different,I want to add a param to the 'page' variable called contentOfThePage this variable gets its content dynamically when the document is fully loaded, after that I perform an Ajax request to the controller to add the new param, but the problem is that the new changes never makes it to the page source unless i reload the page or i navigate to another page and this is causing a lot of trouble as the page source may contain the page content of the previous page!
Any idea on how to avoid this and make changes to the page source (NOT DOM) directly ?
keep in mind that the contents are added dynamically but i need a way to change the page source without impacting the performance by requesting a reload after the ajax request succeeded
First You want to update some data that is already there after page load
you already have a json so a rest call i assume
you call it using ajax
now you added something else that you want to change
Yes it can be done actually
but not with the present set
i assume you have a single jsp and trying to change that jsp
well fit whatever you want to change in a panel like a graph or anything else
Add a button to top of the panel and on click the button url must be to the rest call so then data will be updated
I too have faced a similar problem with graphs,
i needed the graph to give updated data without refreshing the whole page,
so i put it inside a panel and wrote a rest controller that gives data for the graph and put a refresh button that calls this rest controller. This let me then update the graph without refreshing the rest of page

How to create a modal form on html static pages to store users in rails

I'm trying to show a modal form window into some static html pages to request a users information and connect this with a Rails application.
I have a dynamic Rails application that save the user's information with a gem Devise in the side of my server.
The creation of modal windows in Rails with Bootstrap seems simple but I do not know if that view can be embedded as javascript into the static pages or if should create the modal form directly in the static page for later send user data to my application rails.
Any ideas would be greatly appreciated. Thanks in advance.
You've got three options:
A) render the html for the form out in advance in a hidden div, then just copy that into the modal.
B) construct the form in javascript, perhaps using a sort of "blank" form with a few missing details, then render the result into the modal
C) use javascript to make a call to the rails back end (which supplies the form html), and when you get it, load it into the modal.
Which choice you use depends on how much dynamic content is in your form. C is the slowest option but simplest in a way since your form will always be built from scratch in rails, which can use the appropriate data. This is suited to a situation where you are looking at lots of records on the page, each of which has a lot of data, and you want to click on one to edit some of the data.
If, for any given page, the form can be generated in rails on initial page render, then you could do A as all of the dynamic elements will be available in your controller in the first place. This is well suited to a page where you are looking at a single record, and want to show an edit form in the modal: because there is only one record to choose between, you always know in advance how to make the form for it.
B is sort of a half-way stage: if you don't know in advance what you will need to load into the form, but the difference between the form "options" is very small then you could fill in the blanks with JS. This is probably the most complicated solution as you'll need to write the JS yourself, but it's more efficient than C.

Programmatically load usercontrol to a div in masterpage

There are different user controls to be included in the master page dynamically.
Only some of the pages inheriting the master page will be required to display some of the user controls. I need to know what are the best options for displaying these user controls. Can we decide which user control is to be loaded and do it programmatically through code? Or is there a way in javascript or jquery to do this?
I wanted to know how to load the user control programatically to a div in master page from a content page.
You can load UserControls dynamically by using the LoadControl method available on all TemplateControl based classes (such as Page, UserControl and MasterPage). See this MSDN article for an expanded explanation.
var userControl = (TheTypeOfMyUserControl)LoadControl("~/MyUserControl.ascx");
var div = TheNameOfMyRunAtServerDiv;
div.Controls.Add(userControl);
Edit: The above is required to be placed in the MasterPage. If you want to invoke it from a content page you can create a public method on the MasterPage that the page can call (taking the user control path as a parameter).
following code will work for you,
UserControl uc = (UserControl)LoadControl("controlPath");
div.Controls.Add(uc);
reference:
http://msdn.microsoft.com/en-us/library/c0az2h86(v=VS.90).aspx

Categories

Resources