Grails Project - Open dialog box - html

In my application, when I hit Run button which is scripted in gsp page as:
<input type="button" value="Run" onClick="submitJob()"></input>
submitJob() function is defined in a ExtJs JavaScript file which does some operations and calls the controller code which renders a different gsp output page as:
render(template: "/plugin/jobPlot_out", model:[jobName:jobName], contextPath:pluginContextPath)
In my application in web browser it displays the output in the same web page. How to display the same output in a dialog box and not in the same page?

I am new to JavaScript so I posted this question. What I did:
I had to search for the div id of the Run button and had to search for the URL where the div id gets loaded. Upon finding this, I had to write a jQUERY code to open a dialog box and the resulting output was rendered there.

I'm not pretty sure I got you right but have you tried to use a redirect instruction?
http://grails.github.io/grails-doc/3.0.x/ref/Controllers/redirect.html

Related

How can you click an href link but block the linked page from displaying

It was hard to encapsulate my question in the title.
I've rewritten a personal web page that made extensive use of javascript. I'm simplifying matters (or so I hope).
I use a home automation server that has a REST interface. I can send commands such as 'http://192.168.0.111/rest/nodes/7%2032%20CD%201/cmd/DON to turn on a light. I'm putting links on my simplified web page using an href tag. The problem is that it opens the rest interface page and displays the XML result. I'd like to avoid having that page show up. ie when you click on the link it 'goes' to the link but doesn't change the page.
This seems like it should/would not be possible but I've learned not to underestimate the community.
Any thoughts?
You can use the fetch function if your browser is modern enough:
document.querySelector(lightSelector).addEventListener('click', e => {
e.preventDefault(); // prevent the REST page from opening
fetch(lightURL).then // put promises here
})
The variables lightSelector and lightURL are expected to be defined somewhere.
The code listens for clicks on the link, and when one comes, we prevent the REST page from opening (your intention) then we send a request to your light URL with fetch. You can add some promises to deal with the response (e.g. print "light on" or "light off" for example) using then but that's another matter.
If you make the "link" a button, you can get rid of e.preventDefault(); which is the part preventing the REST page from opening.

Automatically translate a site

I have a site and have the need to automatically translate it in many supported language (english,spanish,french) to my user.
User (a few selected people) access the site through a link i provide, so is not an issue distribute an ad-hoc link.
I have tried to use Google Translate and all work fine, unless some piece of the site use javascript and received encoded resources from third party.
So for example think i have a static site that i can't translate by translating files on web server (i need to translate them on the fly).
We can say the site the is the following :
<html>
<script>
function show()
{
// Will produce a messagebox with say "test"
eval(String.fromCharCode(97,108,101,114,116,40,39,116,101,115,116,39,41,59));
}
</script>
<button onclick="show()">
Show me
</button>
</html>
If i try to google translate it the 'Show me' label correctly translate but message box does not (in my scenario there are no messages box but the concept is the same, a third party send me encoded data on some event, and display it).
Is there a way to automatically translate such kind of page in my scenario?

What would be the correct approach for a light AngularJS web-app

I am building a very light Web-App using AngularJS, and i can't seem to find the correct approach as to how to organize it.
To explain it briefly, the App loads a list of objects after the user logs in, and when he choses an object it loads all the detail from that object.
The app (as I am currently building it) will only have to load short JSON text data, so I thought I could have a single page app in a single HTLM file, directed by a single controller who will handle all the data received from the server, and the different views would have been handled by using HTML snippets and AngularJS directives ng-show and ng-includ, like so :
<div ng-show="correctView" ng-include="login_snippet.html >
</div>
<div ng-show="correctView" ng-include="table-view_snippet.html >
</div>
<div ng-show="correctView" ng-include="detail_view_snippet.html >
</div>
The correctView string is changed by the controller to decide which view is to be showned.
Is this a reasonable approach ? I can't seem to find whick one would suit my App best; it doesn't seem to be the right thing to do because the previous button doesnt work with this method, which can't do.
So,
Is there a way to make it so the previous page button would work ?
If not, what would be the correct thing to do ?Is it possible to have several HTML files sharing the same controller ? Or can some controller send data to another ?
I only found examples of single page applications where only parts of the page is changed when the user interacts with it, and this can't do for mine.

Is it possible to change the value of an HTML button by passing URL parameters?

The issue
I am setting up an IQY query to access data with Excel from the web. This is normally pretty straightforward and done by just providing the URL to the data and then select what to download. But the the data I am interested in is located in a table that can switch between different time-spans by clicking an HTML button.
What I think I need to know is if I can manipulate HTML buttons using parameters passed in the URL. Lets say that I want to access "www.datasource.org/data". At this page there is a table that can be altered by clicking a button with the following code:
<button class="ctt ctt_Text ctt-default" value="2" type="button">Button Text</button>
The default value of the button seem to be "1" (which is the table shown when visiting www.datasource.org/data), but can I change the value to 2 by passing a parameter in the URL instead of clicking the button that changes it? Or is there perhaps someone who can suggest a different solution?
You can get url by JavaScript:
window.location.href
Or PHP:
$_GET['Variable Name'];

How to submit data from an html page forcing the browser keeps the page unchanged

First let me set the situation.
I am writing a simple client html page and a simple server side program.
In detail, the page has a submit button to POST some data to the server program.
The problem is that any time I test the page to push the submit button ,the browser displays the new page which displays only the return message my server program returned.
How can I modify the html or the server side program so that the browser keeps the page unchanged before after the submit button is pushed.
I know an easiest way ; letting the sever program returns the same string as the client html page.
Thank you in advance.
In a regular form submission, your page will be whatever the server sends back. The form's action might be the same page, and then your server-side code can read the value of any input fields, and set the values in the response back to what they were in the request. This should result in the page looking the same as it did before the submit button was pressed. However, the page has "changed" in the sense that it was reloaded.
Alternatively, your form can make an Ajax request, which means that you'd need to use Javascript to intercept and stop the form submission, and then use additional coding to send the Ajax request, and then receive and process the response.
What you want is probably a postback:
http://en.wikipedia.org/wiki/Postback
1.) AJAX
You could use JavaScript and AJAX to POST the data.
2.) IFrame (not recommended)
You could also create a hidden IFrame and set the target attribute of the form to it.
What you want to do doesn't seem to be very clear.
If you want to submit your POST data without loading a new web page, you can use Ajax. It may be simple to do it in jQuery, and even simpler if you serialize your form data.
$('form').submit(function() {
$.post('your-post-url',$(this).serialize(),function(data) {
alert('Data posted!');
});
return false;
});