I have an requirement to display message like "processing" on click of link
Here's the scenario : My Page contains datas in that one of the data will be hyperlink when the user click the link it is passed to controller, from controller calls DAO to fetch data from DB and then forwards to Page2. Page2 takes considerable time to load since it retrieves lot of its content from the DB.
How can I implement something where once the user click the hyper link on Page1, a "Please wait processing..." message and then as soon as Page2 is ready it forwards to Page2?
I need to display message when the user clicks link.
Any body help an easy method .
My code is like below: Page 1 contains :
<td class='tblData'><%=installAtLocListBean.getWorkNumber()%></td>
Not good in function.Thanks Advance
You can use javascript to hide elements and ajax to display results from another page
Using AJAX and JSP
EDIT:
I'm not familiarized with JSP but I can give you a example of how to show/hide elements with Jquery and Html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<p>This is a paragraph. click the button to hide me </p>
<button>Toggle between hide() and show()</button>
</body>
</html>
JQuery Toogle Usage
In the same way you use toggle, you can use just the methods .hide and .show to hide the initial frame with a form for example and show a "Please wait processing..." Div, and when Ajax get the response from the data from jsp you can hide the "please wait proccessing.." div and show the form with the data again.
Related
I have multiple buttons which currently redirect to different pages for users to perform a single action and they would then need to click another button whilst on the confirmation page to go back where they were before. This is old school and inconvenient...
What I would like to do is create 1 single pop-up box which would get triggered (appear) when any of those buttons are clicked. Inside the box, I want the relevant .php file to appear so users can confirm their action and the page would then reload and display a confirmation message.
Example:
"Delete" button needs to trigger the confirmation-popup.php to appear with the delete.php file included in it so users can confirm the deletion.
"Cancel" button needs to trigger the confirmation-popup.php to appear with the cancel.php file included in it so users can confirm the cancellation.
Here's what I've done:
- Created the pop up and included it on their Account page (that's where all the buttons are).
- Added a JS which passes through the button ID to trigger the popup
When either of the buttons is clicked, the popup would appear fine.
I'm stuck at the stage where different "action".php files need to passed and included in the body of the popup. I know I could create multiple popups each for its relevant action, but we all know this isn't best practice and it's doubling up.
Any help would be appreciated!
Edit: Added code after the below comment
HTML:
<button class="button-small button-red" id="confirm-delete">Delete</button>
JS:
$(document).ready(function() {
$("#confirm-delete").click(function() {
if (!$(".confirm-popup").is(":visible")) {
$(".confirm-popup").fadeIn("slow");
return false;
}
});
});
PHP confirm_popup.php:
<div class="confirm-popup">
<?php include 'delete_auction.php'; ?>
</div>
You can open different iframes in the popup based on the button pressed. That will allow you to use one popup and you will just edit the iframe src attribute to the correct php page. For example you can add an HTML attribute to each button that holds the URL of the page that should be opened by the button. Then you will have some JS code that on the button press will read the attribute that holds the URL and puts it in the iframe src attribute inside the popup.
Something like this using jQuery:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"><iframe src=""></iframe></div>
<script type="text/javascript">
$('.myclass').click(function(){
$('.popup iframe').attr('src', $(this).attr('content-url'));
})
</script>
Or AJAX way:
<button class="myclass" cotent-url="delete.php">Delete</button>
<button class="myclass" cotent-url="save.php">Save</button>
<div class="popup"></div>
<script type="text/javascript">
$('.myclass').click(function(){
$.ajax({
url: $(this).attr('content-url'),
data: {},
success: function(response) {
$('.popup').html(response);
},
dataType: 'html'
});
})
</script>
i use django make a website .
i want to let people create group in my website .so i use html form to let them fill in the info and upload an image as the group logo.
as i want to let people preview the logo,so i use ajax upload the picture file first.i add 2 buttons in the page,button1 is for upload picture file in ajax way,button2 is for post the whole form to the server .for the ajax upload picture ,i use this plugin http://malsup.com/jquery/form/
ok here is the code
<!doctype html>
<html>
<head>
<script src="jquery-1.10.2.min.js"></script>
<script src="jquery.form.min.js"></script>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<form id="test" action="/accounts/signup/" method="post">
<input type="text" id="text" name="text" />
<input type="file" name="file" id ="file" /> <span >submitpicture</span>
<span>confirm</span>
</form>
<script language="javascript" type="text/javascript">
$("document").ready(function(){
$("#tnpicsubmit").click(function(){
$("#form").submit(function(){
var options={
url:"/article/nodetpic/",
type:"POST",
datatype:"json",
};
$("#form").ajaxSubmit(options);
return false;
}).submit();
});
$(".signup").click(function(){
$("#test").submit()
});
})
</script>
</body>
</html>
this code works,but not well.
because ,the first time i choose one picture,and click the button id #tnpicsubmit,yes the picture uploaded to my host,i through every thing is ok .then i test the 2nd time,and this time ,the same picture file ,upload 2 times,i find 2 same pictures in the host ,and i test 3rd time ,same picture upload 3 times.
now i know the problem where is .i think the problem is ,every time i click the button id #tnpicsubmit,it add the same function to the form submit event,that is why every time i get +1 times picture uploaded.
how to solve this problem ?i mean,just one click ,upload one picture one time for ajax file upload.
As i understand your question, try using one():
$("#form").one('submit', function(){...});
You are adding the submit handler inside the click event and then calling it. It is adding another handler every time you click the button. Solve the issue by moving the submit handler outside the click event.
<script language="javascript" type="text/javascript">
$("document").ready(function(){
$("#form").submit(function(){
var options={
url:"/article/nodetpic/",
type:"POST",
datatype:"json",
};
$(this).ajaxSubmit(options);
return false;
});
$("#tnpicsubmit").click(function(){
$("#form").submit();
});
$(".signup").click(function(){
$("#test").submit()
});
})
</script>
I don't see #tnpicsubmit in the html. But it could be an so you can use less JavaScript.
I have a form which is placed in an IFrame.I have added javascript function for validation. It will rise an error message when click submit button without filling mandatory fields.
The form contains more than 8 fields. The error message will be displayed in top of the page.
So when click the submit button, it stays the bottom of the page. So that, the error message is not visible.
For Scroll to up in an iframe, I have added the following code,
parent.parent.window.scroll(0,0);
It takes me to the top of the page in iframe.But , Skips the Javascript validation. It passes the request without validation.
Please help me on this one.
Thanks in advance
Set an id for the error's wrapping div, then use JavaScript's window.location move internally to this id, after - and depending- the mandatory field validation code (you can put it in a conditional statement).
An example on how to use it:
<!DOCTYPE html>
<html>
<head>
<script>
function scroll(){
window.location = '#error';
}
</script>
</head>
<body>
<div id='error'>
<p>Error: This is an error message.</p>
</div>
<iframe src="http://www.yahoo.com" width="400" height="800">
</iframe>
</br>
<input type="button" onclick="scroll()" value="Scroll"></input>
</body>
</html>
You can also use jQuery to scroll smoothly to it:
http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery
Ok my code is as follow:
<body>
<iframe>
<script>
$(function( {
$('form).submit();
});
</script>
<form>
<input type="file" name="myfile"/>
</form>
</iframe>
</body>
this is an iframe inside another page which has a form with upload files inside submitted via jQuery.
Now i'm wondering if it's possible to hide the page loading when the form is submitted, since i'm into another page and not into the iframe page directly.
^ remove this animation from browser when iframe form is submitted
Yes it can be done but instead you submit the form you should call post service from jquery to hide loding on page
Your script inside the iframe, should be:
$(function() {
$('form').submit();
});
That wouldn't have executed otherwise.
The way you are using text inside the frame, is for when Javascript is disabled on the client.
You can come across some problems also with frames. Can you not load the page contents into a DIV?
I have an address book widget that shows if there are contents.
If there are no contents, an add button will show up. Upon pressing the add button, it will redirect to another page which will show the form.
The initial design of my website is as follows:
When the user click the add button, it will direct to a page using javascript function:
document.location.href="address?addOnly=true";
The form will display.
If successful, there are $.post that will change the div only that will enable user to do CRUD in the address book.
The problem with the variable inside the url which is address?addOnly=true is that when the user refresh it, it will always shows the add form.
That's why i've decided to hide the implementation using $.post
$.post('address', {"listEmty":true}, function (data) {
window.location = "address";
});
The problem with this is that it can't pass the variable at all.
My questions are:
How to handle the page refresh if using the get method, which passes the paramater in the URL,
Are there anyways in javascript/jquery to pass the variable using post method then refresh the page?
Thank you.
<FORM method="post" action="address" id="refresh" style="display: none;">
<DIV>
<INPUT type="hidden" name="addOnly" value="true">
</DIV>
</FORM>
<SCRIPT type="text/javascript">
document.getElementById('refresh').submit();
</SCRIPT>
What this does is create an invisible form, then immediately submits it. You can of course call the submit from within your other javascript code.