I know how to show a submit after submitting a form. But I would like a loading div to appear after ANY submit on the page. The same that happens on PHPMyAdmin.
Can anyone please help? How do I trigger to load a div after a submit?
You can do something like this just call the function from an onclick event in your submit button.
<!DOCTYPE html>
<html>
<body>
<form method="post" onsubmit="myFunction()">
<div id="showDiv"></div>
<script>
function myFunction() {
document.getElementById("showDiv").innerHTML = "Here is my div.";
}
</script>
</body>
</html>
Related
I've built a simple application and now I'm trying to host attach it to a web server. I'm attempting to have a HTML form (using Thymeleaf) that the user enters their location in as text, and then my server will take and produce a result using that string. So to get started, I'm attempting to make a simple spark application that makes a home page with a "enter your location" form, that then gets the users input and does something with it. I can get the "entryMessage" displayed, as tutorials show, but how to get user data is proving difficult.
However, there is very little documentation on how this can be done with these two framworks. My attempt at what the code should look like is as follows. Note the middle post is just me trying to find ways to get the form data - none proved succesful
ThymeleafTemplateEngine engine = new ThymeleafTemplateEngine();
HashMap<String, String> userLocationMap = new HashMap<>();
get("/home", (request, response) -> {
userLocationMap.put("entryMessage", "Please enter your location");
return new ModelAndView(userLocationMap, "home");
}, engine);
post("/home", (request, response) -> {
System.out.println(request.toString());
//System.out.println(request.body());
//System.out.println(userResponse.location);
//response.redirect("/locationAccepted");
return userLocationMap.get("userLocation");
});
get("/locationAccepted", (request, response) -> {
String location = request.queryParams("userLocation");
return new ModelAndView(userLocationMap, "locationAccepted");
}, engine);
with the following thymeleaf templates
home.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p> <span th:text="${entryMessage}"> default message </span> </p>
<form action="/locationAccepted" method="post">
<input type="text" th:field="userLocation"/>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
</body>
</html>
and locationAccepted.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p> <span th:text="${userLocation}"> default message </span> </p>
</form>
</body>
</html>
You have two bugs in your code, both in the HTML form:
In your Java code you're defining the route "/locationAccepted" as GET, but your form method attribute is POST => Change your form to GET.
If you want to get the form's input data it should have a name with value userLocation. th:field isn't translated to name (it's translated to field attribute which I'm not sure what it means).
So your form (after Thymeleaf) should look like this:
<form action="/locationAccepted" method="GET">
<input type="text" name="userLocation"/>
<div class="button">
<button type="submit">Send your message</button>
</div>
</form>
And then request.queryParams("userLocation") will work like you wanted.
I'm having a few issues initializing events on my JQuery Mobile site and I just want to see if I'm going about it the right way. Here is what my code kinda looks like:
<!DOCTYPE html>
<html>
<head>
<title>My page</title>
<link rel="stylesheet" href="jquery.mobile-1.3.0-beta.1.css" />
<script src="jquery-1.9.0.js"></script>
<script src="jquery.mobile-1.3.0-beta.1.js"></script>
<script text/javascript>
function myFunction()
{
//do some code
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header">
<h1>Home</h1>
</div>
<div data-role="content" data-theme="f">
<p>2nd page</p>
</div>
</div>
<div data-role="page" id="next-page">
<div data-role="header">
<h1>2nd page</h1>
</div>
<div data-role="content" data-theme="f">
<script text/javascript>
$("#next-page").on("pageinit", function() {
myFunction();
});
</script>
</div>
</div>
</body>
</html>
For some reason, when I load the 2nd page, I just get the AJAX loading icon and it does not stop loading.
The other thing is, I don't want myFunction() to be called until the 2nd page is loaded which is why I have the script inside the 2nd page.
Any help is much appreciated :)
Javascript is key sensitive, if you are calling function myfuncion() then same function must exist.
In your case your function has a large F in its name: myFunction(), because called function myfuncion() don't exist browser will report an error and jQuery Mobile will stop the execution.
On the other hand this code:
$("#next-page").on("pageinit", function() {
});
is ok if you want to execute this function during the second page initialization. Jzst a little advice, change it to this:
$(document).on("pageinit", "#next-page",function() {
});
EDIT :
To solve your problem replace your pageinit event with pageshow event. jQuery Mobile has a problem with dealing with other "graphic" frameworks (maps, carousels)
they will usually work only in pageshow event.
$(document).on("pageshow", "#next-page",function() {
});
i have an issue with a form on a jquery mobile site with two or more pages.
one page contains a form and when clicking the submit button of this form, i want to submit the form data and then stay right on this page. so i added the id of that page to the form's action attribute. (<form action="#two">).
but unfortunately this doesn't seem to work. when submitting the form data, always the first page of the actual file is loaded, even if the browser's url seems right (the correct id was appended to it).
and it's getting even worse. because i added the id to the form's action attribute, jqm loads the first page of the file but apparently thinks to be on the second page, so the link pointing to the page with the form won't work anymore.
one thing resolved this issue: adding data-ajax="false" to the form element forces jqm to stop ajax-based page handling for this form and when clicking the submit button i end up on the right page, but i do not want to reload the entire page so that's no solution.
does anyone know what's going on here and has encountered the same issue? feel free to try the appended example, i hope someone can solve this.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="one">
<div data-role="header">
<h1>First page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Hello world</p>
<p>Link to second page</p>
</div><!-- /content -->
</div><!-- /page -->
<div data-role="page" id="two">
<div data-role="header">
<h1>Second page</h1>
</div><!-- /header -->
<div data-role="content">
<form action="#two">
<button type="submit">Submit</button>
</form>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
Change your input submit tag to call a function.
<input type="submit" onclick="submitThis()" />
Add this logic to your submit function which will call the submit url through ajax and return false to avoid physically submitting form.
var submitThis = function() {
// get form data using jQuery, and call the link using $.ajax()
return false; // This will avoid submitting the page
}
--EDIT--
Instead or returning false, you can also use preventDefault() method
$("#submit").submit( function (e) {
e.preventDefault();
// do your task
});
I looked through all the similar questions that showed up before typing this, but I can't find an answer for my issue.
I'm using jQuery Mobile (1.1) and jQuery (1.7.1) to develop a small portal. As such, I have it all on one page, and use data-role="page" to handle the process transitions.
The flow is currently like this:
User visits main URL
User clicks on an action ("do this" or "do that")
When a user clicks on the action (both are just tags with a href to another file with data-role="button"), it takes them to that page just fine.
However, when first visiting the page (either by manually typing in the URL or clicking on the action button/link), the form is empty and clicking the submit button does nothing. After refreshing the page though everything works as it should.
So, say for example someone clicks on action link #1 ("make a payment"):
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<title>Credit Card Payments</title>
<style>
.ui-dialog .ui-header a[data-icon=delete] { display: none; }
</style>
<script>
$(document).bind("mobileinit", function(){
});
</script>
</head>
<body>
<div data-role="dialog" id="popup">
<div data-role="header" data-theme="b" data-content-theme="b">
<h1>Destination</h1>
</div>
<div data-role="content" data-theme="b" data-content-theme="b">
Please choose what you would like to do:
Make A Payment
Add Credit Card To Account
</div>
</div>
</body>
</html>
It takes them to "payment.php" and displays page id "step1", which is a simple log in form:
<div data-role="page" id="step1">
<div data-role="header">
<h2>Log In</h2>
</div>
<form id="step1frm">
<div data-role="fieldcontain">
<label for="mail">Blesta e-mail: </label>
<input type="text" name="mail" id="mail" />
</div>
<div data-role="fieldcontain">
<label for="pw">Blesta password: </label>
<input type="password" name="pw" id="pw" />
</div>
<input type="button" id="step1frmsub" value="Log In" />
</form>
</div>
The log in form page also has a lot of jQM stuff but after I commented all the code out it didn't change anything so that isn't the cause. I also verified the HTML via W3.org and it came back valid.
A better representation of what's going on can be found in the screen shots I took of Chrome's Inspector:
First Visit - after clicking "make a payment"
After Refreshing Page - after refreshing the login for "make a payment"
Edit - As a small follow up, I noticed "data-external-page="true"" is being set on the div page on load, and then on refresh it's not there anymore. From my understanding of what I've read this is done because it's coming from a dialog basically, but I'm not sure if there's a way to disable that from being set.
Answer - Well, the solution to this, after initially thinking it wasn't what I was looking for, was actually to add this to my links:
rel="external"
So that they look like this:
Make A Payment
Well, the solution to this, after initially thinking it wasn't what I was looking for, was actually to add this to my links:
rel="external"
So that they look like this:
Make A Payment
I have searched high and low but I cannot get this simple thing to work.
All I want to do is have a dialogue popup open when the homepage loads.
Can someone please point me in the right direction?
Check this out Dialog and this
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog").dialog();
});
</script>
</head>
<body style="font-size:62.5%;">
<!--<div id="dialog" title="Dialog Title">Test Dialog Box</div>-->
<div id="dialog" title="Google">
<IFRAME id="frame" style="border: 0px;" SRC="www.google.com" width="100%" height = "100%" >
</div>
</body>
Different solution
try this..if this ok..
Different solution
Try the Modal Dialog..Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link.
$(document).delegate('div[data-role=dialog]', 'pageinit', function() {})