I'm not sure if this question is being asked, but I can't find any related post about this.
I actually created at pop out box after pressing a submit button so that I can create a user, however the pop out box looks like this
This is the code of it
<g:actionSubmit value="Submit" action="createUser" class="btn_gray_large" type="button" role="button" aria-disabled="false" onclick="return confirm('${message(code: 'default.button.cancel.confirm.message', default: 'Are you sure?')}');"/>
I want to change the "The page at localhost:8080 says:" part into something else.
Is there anyway i can change that? By the way I'm using gsp grails and groovy to do this.
Thanks in advance!
You can't change it (for security reasons), but you can make your own using something like jQuery dialog or jQuery Alert Dialogs if you use jQuery, or the Javascript confirm dialog for vanilla js.
Related
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
I have created a Chrome Extension to which I've added a Donate Button using bootstrap to create the button.
<button type="button" class="btn btn-default" id="donate">Donate</button>
Through the extension, I have it open a new tab when clicking on the button
$('#donate').click(function () {
chrome.tabs.create({
url: 'https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=MY_EMAIL'
});
});
Yet I am stuck on how to implement the following bit of code. When I click my button using the link above it opens up a gibberish page meanwhile the bottom set of code takes me to the donation page. How would I use the code underneath to tweak to my set? Thanks
<script src="https://www.paypalobjects.com/js/external/paypal-button.min.js?merchant=MY_EMAIL"
data-button="donate"
data-name="Spot-A-Voice"
></script>
Well the working code you've shown is a script tag not an 'a href' so its not the same thing (it's probably using JSONP that is executed in the context of your page). So unless paypal has a html button option and provide you with the related javascript (which they probably might), I would suggest you use the script tag in your html page.
#{Response.Redirect("Index","Home")};
The above code does not work please help me.
Response.Redirect is a server-side operation and makes little sense to use in a view. You are after an appropriate client-side operation.
You can simply change window.location.href in Javascript (client-side) to redirect the browser and use Url.Action to generate (server-side) an appropriate client-side URL in your JavaScript.
e.g. something like:
<input type="button" onclick="function(){window.location.href=#(Url.Action("Index", Home"))}" value="Press Me!"/>
Quite frankly though, you probably just want a link to your home-page that looks like a button as there is no advantage to using a location.href redirect in this situation.
When I add a HTML link to a specific part of the page:
test
I noticed that it changes the URL at the address bar. Although I have come across websites where they link that way without the address bar being updated. How is this possible?
EDIT: It might be an AJAX solution were they make it work without URL change, as if I remember correctly, the page didn't reload, it went directly to the destination...
You may wish to look at the jquery plugin, scrollTo.
http://jquery.com
And a couple of links for scrollTo
http://demos.flesler.com/jquery/scrollTo/
http://flesler.blogspot.com/2007/10/jqueryscrollto.html
You can do something like this:
The HTML
click me to scroll
<div class="gap">a big gap</div>
<h1 id="scrollToMe">I should scroll to here without a # in the URL</h1>
The javascript (jquery and the scrollto plugin)
$(document).ready(function() {
$(".scrollLink").click(function(e) {
$.scrollTo($(this).attr("href"));
e.preventDefault();
});
});
What the javascript does, is when ever a link is clicked that has the class ".scrollLink", scroll the page down to the element that has the same ID, as the href for the particular link clicked. Then the e.preventDefault() stops it working like the normal hash link and stops it appearing in the URL bar.
Here is a working example for you: http://jsfiddle.net/alexkey/c3jsY/7/
And a version not in a frameset, so you can see that the URL doesn't change:
http://fiddle.jshell.net/alexkey/c3jsY/7/show/light/
This approach has a couple of good points
Simply apply the scrollLink class to links you want to stop the hash appearing (nice and easy)
It uses the normal href, which also means the links will still work even if javascript is disabled - good for accessibility and probably search engine optimisation to.
It's possible to use javascript to intercept the click event, perform your own custom logic, then cancel the navigation event so the URL never changes
Maybe you can try something like: window.scroll(0,150);
instead of "(0,150)" put the cooridnate of your target.
You'll have to experiment with the number (shown here as 200) to get the window to align properly.
test
You could use inline the next code:
link text
<div id="bookmark">Jump to here</div>
I am not a big web programmer, and have a friend who wants me to help him with something.
He wants to be able to have a form that once it is submitted changes to say something like "Thanks for submitting" and have the form info disappear. He wants it to be easy for anyone to use, so he can give it to various people to use on their sites.
I was thinking I could use javascript to do it, but not really 100% sure. I want to avoid anything that isn't HTML as much as possible so that it will be usable by as many people as possible.
Thanks.
What is supposed to happen to the information in the form? Doesn't matter?
If you want it to be pure HTML there's only one good solution: Write one HTML page with the form, and another almost identical one with the success message in place and the form data hidden. Simple.
On the submitting side:
<h1>Email Subscription:</h1>
<form action="successForm.html">
<input type="text" name="emailAddress" />
<button type="submit">Send Info</button>
</form>
On the receiving side (successForm.html)
<h1>Email Subscription:</h1>
<p>Great job, you submitted!</p>
However, if you need something to change on the very same page, you're going to have to use something non-HTML. HTML just won't make any decisions about what to display. It is dumb... it just displays.
It's very easy to use JavaScript to detect when the form was submitted, and then hide the elements you need to hide, and show the success message:
<!-- Goes in the <head> or in a seperate script -->
<script type="text/javascript">
var theSubmitButton = document.getElementById('formSubmit');
theSubmitButton.onclick = function() {
var theFormItself =
document.getElementById('theForm');
theFormItself.style.display = 'none';
var theSuccessMessage =
document.getElementById('successMessage');
theSuccessMessage.style.display = 'block';
}
</script>
<!-- Goes in the body -->
<h1>Email Subscription:</h1>
<p id="successMessage">You submitted the form, good job!</p>
<form id="theForm" action="successForm.html">
<input type="text" name="emailAddress" />
<button id="formSubmit" type="submit">Send Info</button>
</form>
Of course, this example is oversimplified. It doesn't do anything with the data, and it doesn't follow best practices, or check that the data is valid in any way. I'm just trying to give a basic idea of how to use JavaScript for this purpose. If you're not a programmer, then coming up with a small, distributable piece of software might be a good job for someone else.
However, you still need some mechanism to store, email or otherwise DO something with the form. Add an edit to your question and I'll be happy to clarify my answer with a specific example.
(Another note, I didn't try to run that Javascript, so if you see an error, please just note and I'll fix it)
Try the jquery form plugin. This will achieve what you're after in an elegant way with minimal coding. In addition to this you'll need to download jquery.
This is a javascript solution, however it's safe to assume that everyone is using a javascript capable browser.
The standard way to do this is to submit the form to a different page (submit.php, for example), which provides a new page with the thankyou message. No javascript, no DHTML.
You could use javascript to replace the innerHTML of a huge div containing everything, or remove all the elements, but I'd advise against it.
There's 2 options:
Old school forms:
Person clicks submit and form data gets sent server side via GET or POST,
the page loads again and displays "Thanks for submitting"
New school javascript AJAX
Person clicks submit and javascript submits form data to server side via AJAX and removes the form elements to then add "Thanks for submitting"
Anything else is some hybrid of both these techniques.
I know you want to avoid anything other than html but this simple php code may help. You could use php within the page
fill out form and press submit to send data to form handler
In form handler, have data processed and then redirect back to the form page with a header('Location: yourwebaddresshere?form=submited');
Then in the original form page, add a php IF statement above the form code:
$url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
if(strpos($url, 'form=submited')) {
echo 'Your thank you message here';
exit(); // Use this to stop code after this statement from loading
}