We Keep Coding

How to pass the id from url in php function without refreshing the page?

I have a div which contains a button(Book it).When I press the button I want to add to the current url the id of the item I clicked on.Then get that id to pop up a box with clicked item data without refreshing the page, because I need to pop up in the current page.
Here it gets the treatments Id
<div class="treatments">
<ul>
<?php
global $treatments;
foreach($treatments as $treatment){
echo ' <li>'.$treatment['name'].'</li>';
};
?>
</ul>
<div class="line"></div>
</div>
<div class="treatment-items">
<?php
global $iController;
$items;
if(isset($_GET['treatmentID'])){
$items = $iController->getItemByTreatmentId($_GET['treatmentID']);
}else{
$items = $iController->getItemByTreatmentId(4);
}
foreach($items as $item){
echo '
<div class="col-30 items">
<div>
<p>'.$item['id'].'</p>
<img src="'.$item['img_url'].'" alt="'.$item['name'].'" />
<h3>'.$item['name'].'</h3>
<p>'.$item['time'].' min</p>
<p>'.$item['price'].'$</p>
<input type="hidden" id="hidden_input" name="id_item" value="'.$item['id'].'">
<a class="bookBtn" id="btn"><button>BOOK IT</button></a> // when I press this button I want that box to pop up
</div>
</div>
';
}
?>
</div>
Pop up box
<div class="bookDetails">
<div class="details">
<?php
global $iController;
$itemm;
if(isset($_GET['id_item'])){
$itemm = $iController->getItemById($_GET['id_item']);
}
echo'
<h1>Book your treatment</h1>
<p>Treatment Name : '.$itemm['name'].'</p>
<p>Treatment Time :'.$itemm['time'].' </p>
<p>Treatment Price : '.$itemm['price'].'</p>
';
?>
<form action="" method="POST">
<label for="date">Choose your date:</label>
<input type="date" for="date" name="date"><br>
<input type="submit" value="Cancel" id="cancel">
<input type="submit" value="Book Now">
</form>
Jquery code
$(".bookBtn").click(function(){
$(".bookDetails").show();
})
getItemById function
public function getItemById($id){
$sql="SELECT * FROM treatments_item WHERE id=$id";
echo $id;
$items = mysqli_query($this->connection,$sql);
$returnArray = array();
if($items){
while($row = mysqli_fetch_assoc($items)){
array_push($returnArray, $row);
}
return $returnArray[0];
}else{
echo'It doesn't work';
}
}

You can use ajax or mix php and javascript like this:
<script>
$(document).ready(function() {
<?php session_start(); ?>//Remove session_start
if (!<?php $_GET(['id'])?'true':'false'; ?>) {
alert something
} else {
something ..
}
});
</script>
hope this was helpful. :)

<div class="treatment-items">
<?php
global $iController;
$items;
if(isset($_GET['treatmentID'])){
$items = $iController->getItemByTreatmentId($_GET['treatmentID']);
}else{
$items = $iController->getItemByTreatmentId(4);
}
foreach($items as $item){
echo '
<div class="col-30 items">
<div>
<p>'.$item['id'].'</p>
<img src="'.$item['img_url'].'" alt="'.$item['name'].'" />
<h3>'.$item['name'].'</h3>
<p>'.$item['time'].' min</p>
<p>'.$item['price'].'$</p>
<input type="hidden" class="id_item" value="'.$item['id'].'">
<div class="bookBtn"><button>BOOK IT</button></div> // when I press this button I want that box to pop up
</div>
</div>
';
}
?>
Note: Never use id same name in one Page i.e., id="hidden_input" // In for loop same name will be generated. It will create bug down the line. Same goes for Input name, instead use class.
$(document).ready(function(){
$('body').on('click','.bookBtn',function(){
var treatmentID = $(this).siblings('.id_item').val();
// $(this) --> it will read the data of the property you have clicked
// .siblings --> adjacent class with name ('.id_item')
$.ajax({
url: 'treatments.php',
type: "get", //send it through get method
data: {
treatmentID: treatmentID
},
success: function(response) {
//operation to show the data in div
//e.g., $('#divId').html(data.name);
$(".bookDetails").show();
}
});
})
})

Prevent (non-bootstrap) Modal Popup from immediately closing after button submit, and display messages

I have created a modal popup to login (and also retrieve password) picking on some hints from other posts. It works fine except that when I submit the login button it immediately closes the modal, even if there is a message displayed. One can see that the message was displayed by opening the popup again:
The intention is obviously not to have the popup close immediately when there is any kind of message, otherwise the client doesn't have the chance to see it.
I have searched for this problem in this website and others but only saw solutions that seem to imply bootstrap modals and other solutions that do not fit my case. Any help is highly appreciated.
My code below:
//JAVASCRIPT
// Get the modal
var modal2 = document.getElementById('myModal2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_login_popup");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close2")[0];
var pasw = document.getElementById("retrieve_pasw");
var pasw_form = document.getElementById("modal-body_b");
// When the user clicks on the button, open the modal
if (btn2) {
btn2.onclick = function() {
modal2.style.display = "block";
}
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function(event) {
modal2.style.display = "none";
}
pasw.onclick = function(event) {
pasw_form.style.display = "block";
}
<!-- HTML
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content2">
<div class="modal-header_a">
<?php echo '<h2>' . $header_content . '</h2>';?>
<span class="close2"></span>
</div>
<?php wc_print_notices(); ?>
<div class="modal-body_a">
<form action="" class="woocommerce-form woocommerce-form-login login" method="post">
<?php echo __('Please insert your username/email and your password to login:', 'woocommerce_php'); ?>
<?php do_action( 'woocommerce_login_form_start' ); ?>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide"
<label for="username"><?php _e( 'Username or email address', 'woocommerce' ); ?> <span class="required">*</span></label>
<input type="text" class="woocommerce-Input woocommerce-Input--text input-text" name="username" id="username"
value="<?php echo ( ! empty( $_POST['username'] ) ) ? esc_attr( $_POST['username'] ) : ''; ?>" autofocus required />
</p>
<p class="woocommerce-form-row woocommerce-form-row--wide form-row form-row-wide">
<label for="password"><?php _e( 'Password', 'woocommerce' ); ?> <span class="required">*</span></label>
<input class="woocommerce-Input woocommerce-Input--text input-text" type="password" name="password" id="password" required />
</p>
<?php do_action( 'woocommerce_login_form' ); ?>
<p class="form-row">
<?php wp_nonce_field( 'woocommerce-login', 'woocommerce-login-nonce' ); ?>
<input type="submit" class="woocommerce-Button button" name="login" value="<?php esc_attr_e( 'Login', 'woocommerce' ); ?>" />
<label class="woocommerce-form__label woocommerce-form__label-for-checkbox inline">
<input class="woocommerce-form__input woocommerce-form__input-checkbox" name="rememberme" type="checkbox" id="rememberme" value="forever" />
<span><?php _e( 'Remember me', 'woocommerce' ); ?></span>
</label>
</p>
<p class="woocommerce-LostPassword lost_password">
<button type="button" id="retrieve_pasw" class="retrieve_pasw" href=""><?php _e( 'Forgot password?', 'woocommerce' ); ?></button>
</p>
<?php do_action( 'woocommerce_login_form_end' ); ?>
</form>
</div>
</div>
</div>

Well I got it !! After looking a lot around and thinking about it.
First we must include a variable to check whether there are (error) messages in the buffer to be displayed. If so, then just let them print to screen and force the reopening of the modal.
So in the first step, it will suffice to replace the line where I had
<?php wc_print_notices(); ?>
with the following php:
<?php
ob_start();
wc_print_notices();
$messages = ob_get_contents();
?>
The second step implies some javascript to make sure that when the variable $messages is not empty, we force the modal to stay open.
var messages_bool = "<?php echo !empty($messages); ?>";
if (messages_bool) {
modal2.style.display = "block";
}
Finally, we must make sure that if the user closes the modal and then reopens it, that the message is no longer there ...
var elements = document.getElementsByClassName("woocommerce-error");
for(var i = 0, length = elements.length; i < length; i++) {
elements[i].style.display = 'none';
}
This is working fine in my website.

Filling form with Jquery click function

I'm trying to create a GUI to let the user edit any row that is displayed in my table. I've manage to create a form that pops up when the user clicks an image which symbolize an edit icon. Now I like to use Jquery (if possible) to fill this form with data from my DB. The error code is down bellow and I can't seem to get any results at all
Script
<script type="text/javascript">
$(document).ready(function(){
$('#edit').click(function() {
$.ajax({
url: 'edit.php?itemid=$itemid',
success: function(response) {
$('#itemid').val($itemid);
......
$('#status').val($status);
}
});
});
});
</script>
Edit.php
<?php
$DB = new mysqli("localhost", "root", "", "book1");
$result2 = mysqli_query($DB, "SELECT * FROM booking WHERE itemID='$itemid'");
while($row = mysqli_fetch_array($result2)){
$itemid = $row['itemID'];
......
$status = $row['status'];
}
echo (array($itemid, $userid, $description, $manufacturer, $model, $caldate, $duedate, $shelf, $status);
?>
Form
<div id="light1" class="white_content">
<form id="editform" name="myForm" action="checkout.php" method="POST">
<h2>Edit Instrument</h2>
<label>ItemID:</label>
<input type="text" id="itemid"/>
<br>
......
<a>Status: </a>
<input type="text" id="status"/>
<br>
<input type="submit" value="Accept">
<input href = "javascript:void(1)" onclick = "document.getElementById('light1').style.display='none';document.getElementById('fade').style.display='none'" type="reset" value="Close">
<br>
</form>
</div>
Error
ReferenceError: $itemid is not defined
$('#itemid').val($itemid);

change
$('#itemid').val($itemid);
to
$('#itemid').val('<?php echo $itemid; ?>');

using jquery in php post method

I am not very experienced in jquery and ajax but I need the following. After users have successfully logged in they can download pdf files from the page. The site has a collapse div from where they can choose which file to download. Everything is done in php and works ok. However, if the file is not found the collapse div is closed back. In other words the web page gets reloaded. So the user has to make a new selection newly which is inconvenient. So I would the following. If the file is not found then the div should stay collapsed and the previous value in the input field 's' on the form. I know this should be done via jquery or javascript. I have tried the following but it does not work.
//PHP
<?php
//if download is clicked
if (isset($_POST["download"])) {
$data = $_POST["s"];
//if file is found
if (fileexists($data){
// We'll be outputting a PDF
header('Content-type: application/pdf');
// It will be called downloaded.pdf
header('Content-Disposition: attachment; filename="downloaded.pdf"');
// The PDF source is in original.pdf
readfile($data);
}
//else the div should remain open
else{
echo "<script> if ($('#collapseOne').is(':hidden')) {
$('#collapseOne').show();
}</script>";
}
}
?>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<form id='searchForm' method="post" action=''>
<p><label>Select Month</label></p>
<input id='s' name = 's' type='text' required><br><br>
<button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
<span class='glyphicon glyphicon-download-alt'></span> Download
</button>
<br> <br>
<button id='download1' name = 'download1' class='btn btn-default btn-lg'>
<span class='glyphicon glyphicon-download-alt'></span> Download All
</button>
</form>
</div>
</div>

In short, you echo PHP into Javascript
<script>
$(document).ready(function(){
var hasDownload = "<?php echo $_POST['download']; ?>";
var oldInput = "<?php echo $_POST['s']; ?>";
if(hasDownload == false) {
$('#collapseOne').show();
$('input#s').val(oldInput);
}
})
</script>
When the server serves your file, those values will be present for your Javascript. Place you're jQuery at the bottom in another if statement & a doc ready block so that the dom is loaded first and echo your PHP variables into Javascript variables to perform your jQuery logic.
<?php
if (isset($_POST["download"]) && fileexists($_POST["s"]) {
header('Content-type: application/pdf');
header('Content-Disposition: attachment; filename="downloaded.pdf"');
readfile($_POST["s"]);
}
?>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<form id='searchForm' method="post" action=''>
<p><label>Select Month</label></p>
<input id='s' name = 's' type='text' required><br><br>
<button type="submit" id='download' name='download' class='btn btn-default btn-lg'>
<span class='glyphicon glyphicon-download-alt'></span> Download
</button>
<br> <br>
<button id='download1' name = 'download1' class='btn btn-default btn-lg'>
<span class='glyphicon glyphicon-download-alt'></span> Download All
</button>
</form>
</div>
</div>
<?php if(isset($_POST["download"]) == false && fileexists($_POST["s"] == false) : ?>
<script>
$(document).ready(function(){
var hasDownload = "<?php echo $_POST['download']; ?>";
var oldInput = "<?php echo $_POST['s']; ?>";
if(hasDownload == false) {
$('#collapseOne').show();
$('input#s').val(oldInput);
}
})
</script>
<?php endif; ?>

Try using this!
$.ajax({
url:"/path/to/your/script/",
type: "post",
data: //fetch the data which you want to pass
}).done(function(status){
//status is the data returned from the script called
});

the jquery unbind events makes the function work once but event is repeated

this is my main page where i have radio button which when clicked a value will be passed via ajax and the result is checked by ajax and the corresponding output is displayed for each question correct/Incorrect. And the problem is my unbind event is working fine once i click on radio button answer is checked and result is displayed and nothing happens when i click again but the problem is click event is not removed i can click again and again thought the function is working fine and only once.
So how do i make it not click able once clicked ,where is the problem
<!doctype html>
<head>
<link href="<?php echo base_url('css/style.css');?>" type="text/css" rel="stylesheet"/>
<script src="<?php echo base_url('javascript/jquery.js');?>" rel="javascript" type="text/javascript"></script>
</head>
<body>
<div id="wrapper">
<div id="main-content">
<?php foreach($result as $rows):?>
<form>
<div class="question-box">
<?php echo '<h1 class="Qbanner">Q.</h1>'.'<h2>'.$rows->question.'</h2></br>';?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="a"><?php echo $rows->option1;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="b"><?php echo $rows->option2;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="c"><?php echo $rows->option3;?>
<input type="radio" name="<?php echo $rows->question_id;?>" value="d"><?php echo $rows->option4;?>
<h5 class="result"></h5>
</div>
</form>
<?php endforeach;?>
</div>
</div>
<!-- wrapper div ends -->
<script>
$(document).ready(function(){
var clickedval,qid;
$("input:radio").bind('click',function(e){
clickedval=$(this).val();
qid=$(this).attr('name');
var siteurl='<?php echo site_url();?>' + '/site/checkAnswer';
$this=$(this).parent("div.question-box");
$allradio=$(this).parent("div.question-box").children();
$.ajax({
url:siteurl,
dataType:'json',
type:'post', data:{'answer':clickedval,'questionid':qid},
success:function(data){
$this.find('.result').html(data.resultstatus);
$allradio.unbind('click');
}
});
});
});
</script>
</body>
</html>

You can disable it by adding $(this).prop('disabled', true) to your click event function.