I want to pass button ID values into a Modal popup window when user click that particular button. Later from that passed ID I can query DB values and view in that opened modal popup window.
This is the code portion for button. Id will be assigned form DB. It is working fine.
<td>
<input type="submit" name="button" id="<?php echo $row["id"];?>" value="Details" onClick="popupwindow(this.id)">
</td>
Modal Window: Here I need to get the value form popupwindow function and query DB and view:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
</div>
</div>
JavaScript Function for Passing values to Modal Popup Window
function popupwindow(id) {
// code for Pass the value to modal window
window.location="#openModal"
}
I need a code sample for popupwindow function to pass my button ID values into Modal Window. Please help me on this. I'm very new to this topic.
I think you should use AJAX to query your DB and retrieve data from it, the basic template of your popupwindow can be like this:
function popupwindow(id) {
$("#openModal .content").load("yourscript.php?id=" + escape(id), function(){
$("#openModal").show();
})
}
And your HTML:
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
<!-- From the retrieved values I can query and view data here.-->
<div class="content"></div>
</div>
</div>
Instead of using onClick(), use jQuery click function. Here's how:
$("[input[name = 'button']").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Alternatively, I'd suggest you to add a class to the buttons you want to have a modal displayed on. Here's how:
<td><input type="button" class="modalBtn" name="button" id="<?php echo $row["id"];?>" value="Details"></td>
Now, in JQuery, do the following
$(".modalBtn").click(function(){
$(this).attr('id'); // This will give the ID of the button clicked.
});
Hope it answers your question.
use window.location.hash for replace hash
function popupwindow(id) {
window.location.hash = '#openModal'
}
You can use the following script for loading and unloading pop up box,
<script type="text/javascript">
$(document).ready( function() {
loadPopupBox();
$("#popupBoxClose").click( function() {
unloadPopupBox();
});
function unloadPopupBox() { // TO Unload the Popupbox
$("#popup_box").fadeOut("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.8"
});
}
function loadPopupBox() { // To Load the Popupbox
$("#popup_box").fadeIn("slow");
$("#mainWrapper").css({ // this is just for style
"opacity": "0.2"
});
}
});
</script>
Other than that you dont need to send values through the JS , JS is a client side , u cannot play with server side language , using client side.
one solution is you can use something like,
window.location="#openModal?id=<?php echo json_encode($row['id']); ?>;"
and change the method of the form to GET instead of post.
After doing that you can write a php code , for excepting the value from $_GET and echo the modal pop-up using php.
Related
I have a PHP page(main) and would like to call another PHP page(printpage) on mouse click. I need to pass a large text.
I do not want to pass it as a url parameter as it will be too big.
I guess I want to pass it as an ajax but I want to open the printpage so I can print it in the browser.
I started with this but the paramater will be too big
$('#MyModal .print').click(function() {
var run = "../js/print.php?ref="+ref;
win = window.open(run, '_blank');
win.focus();
});
I am familar with the ajax statement but have not used to open a new page.
You can use an invisible form with a target="_blank" and method="post" and submit it, thereby sending a POST request in a new window:
<form name="printForm" style="display: none;" action="../js/print.php" method="post" target="_blank">
<input type="hidden" name="ref">
</form>
$('#MyModal .print').click(function() {
document.forms.printForm.ref.value = ref
document.forms.printForm.submit()
})
Then you get the ref value in PHP as $_POST['ref']
I am prototyping a way for a user to view all the data behind a visualization. Basically they would click on a point, a modal would pop up, and the table within modal would be dynamically filtered by a string submission. I've got almost everything working perfectly so far, but I can't get the filter to submit on value change.
The tables library I am using is DataTables, so I have been trying to test this with a small jquery script and some html buttons.
Currently my script is triggered on click of a specific button, it then opens the modal, finds the table's unique id and then the closest child that is an input element, and then it writes a string as that input's value.
Example Sript:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
})
</script>
Relevant HTML:
<div class="modal fade" id="x-data-modal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="moday-body">
<div class='row'>
Search:<input type="search" class="form-control form-control-sm" placeholder=""
aria-controls="x-data-table">
</div>
<table id='x-data-table'>table stuff</table>
</div>
</div>
</div>
</div>
I cannot access the input directly as it is created by the DataTables library without a unique id, but this does the trick. Upon clicking the button the modal is opened and the relevant input is changed to the included string. But for some reason it doesn't submit. So basically the table opens with a canned search when I wanted to open with that canned search either executed or in the process of executing.
I've tried:
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('May 16, 2018');
search_input.submit();
})
</script>
And similarly (using the built in DataTables search module):
<script>
$('#test-button-2').on('click', function () {
var search_input = $("#x-data-modal").find('input:first');
search_input.val('Apr 27, 2018');
var table = $('#x-data-table').DataTable();
search_input.on('change', function () {
table.search(this.value).draw();
console.log(('This was the search') + this.value);
});
console.log('Ran Whole Function');
});
</script>
You need to call the .submit() function on the form element, not the input element.
Solved this by watching the Event listener for the search and piggy-backing off the DataTables function. Ended up being much eaiser to locate the search with this as well.
<script>
$('#test-button-2').on('click', function () {
var table = $('#x-data-table').DataTable();
table.search('Jun 10, 2018').draw();
})
</script>
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've created a shopping cart which works well.
Im having a problem clearing the cart, i want to use javascript to do this.
I want to use a button so when pressed it asks the user to confirm if they want to clear it, and if ok is pressed it is cleared.
So i have created the php code to clear my cart:
if (isset($_GET['cmd']) && $_GET['cmd'] == "emptycart") {
unset($_SESSION["cart_array"]);
And when this is assigned to a link it clears the cart.
For example:
Empty Cart
However i want to change this to a button.
So far i have the following javascript code to give the validation but does not clear the cart.
<script language="javascript">
function clear_cart(){
if(confirm('Shopping cart will be cleared. Continue?')){
document.form1.command.value='emptycart';
document.form1.submit();
}
}
</script>
The button:
<input type="button" value="Clear Cart" onclick="clear_cart()">
So my question is how do i get this to clear using this button and with the use of javascript or AJAX.
Thanks!
This can easily be done with jQuery and AJAX.
function clear_cart( ) {
if( confirm( 'Shopping cart will be cleared. Continue?' ) ) {
$.get( "cart.php?cmd=emptycart", function( data ) {
alert( "Cart has been cleared!" );
});
}
}
More information on .get() is here: https://api.jquery.com/jQuery.get/
If you prefer to not use jQuery, this might help: http://blog.mgechev.com/2011/07/21/ajax-jquery-beginners/
You are over complicating things.
<form method="get" action="">
<input type="hidden" name="cmd" value="emptycart" />
<input type="submit" name="empty_cart_submit" value="Empty Cart" onclick="return confirm('are you sure?');" />
</form>
For a solution without a page reload:
From your main page you want to call a script to unset the $_SESSION, but rather than reload the page you can use ajax to reload only the cart itself.
Say you have a file which is a sub-view just for the contents of the cart, called in your main page like
<div id="cart-contents">
//with a function
<?php echo get_cart_sub_view(); ?>
//or with an inlude
<?php include('cart_sub_view.php'); ?>
</div>
You can ajax in your new cart contents using jQuery load.
You need a script to generate the html that goes inside the cart, which you can call via ajax (i.e cart_sub_view.php).
After the $_SESSION unset call, call
$("#cart-contents").load(
'cart_sub_view.php'
);
Which will ajax to the sub view page, and then copy its contents into the cart-contents div.
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();
});
});