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>
Related
As you all know we can print a text on the same webpage by this code on the HTML:
<body>
<button onclick="myFunction()">Click me</button>
<h1 id="myHeader"></h1>
<script>
function myFunction()
{
document.getElementById("myHeader").innerHTML = "hi";
}
</script>
</body>
In my code the button is on the popup on the Folium map which looks like this:
So, I would like to write "hi" on the h1 tag, onclick function for this button "More info!" on the same page:
in HTML file:
<h1 id="myHeader">SSSSSS</h1>
<div>
<form name="AAA" >
<center>
{{ map| safe }}
</center>
</form>
</div>
<script>
function showsth()
{
document.getElementById("myHeader").innerHTML = "hi";
}
</script>
And I am using Django, so, the I predefined the popup like this:
In views.py:
popup_t = (...
+ '<button onclick="showsth()">More info!</button>'
)
test = folium.Html(popup_t, script=True)
popup = folium.Popup(test, min_width=150, max_width=500)
So, when I click on the button, I didn't get any response just like I showed in the first HTML code.
Do you have any idea about the problem?
UPDATE
I tested the AJAX JQUERY as well.
the button outside the folium's popup will work onclick, but when the button is transferred to the popup, it would not work.
It came to my mind that maybe I can work with "link", instead of "button".
The question is that: is it possible to have a link (href) that direct user to the same page without reloading? just like what AJAX does for buttons!
After a lot of research, I concluded that it is impossible to get a response from the Folium map click. For me, I used Leaflet and Ajax jQuery. I defined the map on the HTML file and used a function on-clicking the geo points. The function returned the point data to the views.py, some works were done, and the response was sent back to the HTML file in jQuery's success function. You can follow my code lines in my other qs:
How to send a simple data by Ajax jQuery to views.py in Django?
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.
I'm using the history API to push a new URL to the web page without reloading it. I have multiple buttons that all have different functionality.
My script now works almost without problems. When I press the button something happens, and when I go back the script fires event listener without reloading the page.
However, when I now press the forward button, I want to go forward. The URL is changed correctly to the next one, but the event listener still fires as if the back button was pressed
Example:
index1.html
button press → index2.html
button press → index3.html
back button pressed → index2.html
forward button pressed → URL is now index3.html, but the content is index1.html
I guess this is because I have a listener, that listens for popstate which happens for back button and forward button pressed. How can I differ what kind of button was pressed?
This is the part that binds the listener:
if (window.history && window.history.pushState) {
$(window).unbind('popstate');
$(window).bind('popstate', function (e) {
clearOverlays();
var url = URL
$.ajax ( {
url : url
}).done ( function ( data ) {
console.log(data);
});
});
}
Here is a way to simplify your code:
You can use the built-in <a> tag with a nested <input> tag in order to navigate between pages. Window.open() will create a popup, and window.location.replace() will disable the history API, neither of which would help you, so a nested <input> tag (inside of the <a> tag) is the most logical solution.
As for distinguishing the buttons, you could use the HTML onclick attribute in each button to specify the JS function to execute, in your case window.history.back() and window.history.forward().
For instance, you could use the following.
<!DOCTYPE html>
<!-- Example of code for your first page -->
<html lang="en">
<head>
<!-- Metadata -->
</head>
<body>
<h1>Page 1.html</h1>
<!-- The <a> tag below is what transitions between pages. The <input> tag is just for the appearance of a button. -->
<input type="button" value="page2">
<!-- Input tags below are required, unless you want to use 'javascript:(function)' in an <a> tag -->
<input type="button" onclick="window.history.back()" value="Go back">
<input type="button" onclick="window.history.forward()" value="Go forward">
</body>
</html>
I have a live search bar where if the user types in "M" only results that have an M are shown and so on, i've made each result into a link so when the user clicks it, it'll load to a different page.
Now, I can make it load to another page, however I'm trying to do it on the same page but it just wont work.
The search code is simply a form that takes text, then im using the xmlhttp method to make it live.
Now, displaying it is as follows: (I have given it a class to use in the ajax)
echo "<a href = 'display.php' class='display'>" . $row['carName'] . "</a>";
Ajax:
$(document).ready(function() {
$(".display").each(function(){
var btn = $(this);
btn.on("click",function(){
$("#displayDiv").empty();
$.post("display.php",function(data) {
$("#displayDiv").append(data);
Any help? Currently, clicking it just loads test.php on which I have some text to see its working. I'm trying to get it to load dynamically on the right.
Thanks.
EDIT: it loads test.php which is:
<html>
<body>
<div id="displayDiv">
<h2> Test </h2>
</div>
</body>
</html>
EDIT2: div id which is in the same page as script:
<html>
<div id="displayDiv" style="width: 40%; float:right">
</div>
It's just following the link when you click on it. To stop this you need to change the event handler to:
btn.on("click",function(e){
e.preventDefault();
// rest of your code
});
$(document).ready(function() {
$(".display").on("click", function(e) {
$("#displayDiv").empty();
$.post("display.php", function(data) {
$("#displayDiv").append(data);
}
);
e.preventDefault();
});
});
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.