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();
}
});
})
})

Load Data From Database PHP

I need to transfer data from my HTML table to my modal(I am not using bootstrap). As you can see from the image below, I displayed the data from my MySQL database into the table.
The problem is when I click the EDIT button of the 1st row the data will be transferred to my modal. However, when I click the EDIT button of the 2nd row the data transferred to my modal is still the data of the 1st row. Please help me in fixing this problem. I am still learning PHP and JavaScript.
Table Data Generation Here |
Modal Here
PHP Code:
while ($row = mysqli_fetch_array($result)) {
echo "<tr class='table-row'>
<td class='table-cell'>".$row['program']."</td>
<td class='table-cell'>".$row['project_name']."</td>
<td class='table-cell'>".$row['department']."</td>
<td class='table-cell'>".$row['start_date']."</td>
<td class='table-cell'>".$row['end_date']."</td>
<td class='table-cell'><span style='color:".$color."'><i class='fa fa-circle-o'></i></span> ".$row['priority']."</td>
<td class='table-cell'><span style='color:".$color_2."'><i class='fa fa-circle-o'></i></span> ".$row['status']."</td>
<td class='table-cell'><a id='edit-modal-show' class='btn btn-edit'>Edit</a>
<div class='editProject-modal' id='edit-project-modal'>
<div class='editProject-modal-dialog'>
<div class='editProject-modal-content'>
<div class='editProject-onboard'>
<header class='onboard-header'>
<h1 class='onboard-title'>Edit Project</h1>
<button class='onboard-close-2'>
<i class='fa fa-close'></i>
</button>
</header>
<div class='onboard-body'>
<form autocomplete='off' method='POST'>
<input type='hidden' id='".$row['project_id']."' name='p-id' value=".$row['project_id'].">
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Program</label>
<input type='text' placeholder='Program' name='program' id='pr-".$row['project_id']."' class='form-control' value='".$row['program']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Name</label>
<input type='text' placeholder='Project Name' name='pname' id='pn-".$row['project_id']."' class='form-control' value='".$row['project_name']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Project Description</label>
<textarea type='text' placeholder='Project Description' name='description' id='desc-".$row['project_id']."' class='form-control' required>".$row['description']."</textarea>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Lead Department</label>
<select class='form-control' name='department' required>
<option value=''>Department</option>";
if ($count_2> 0) {
while ($row_2 = mysqli_fetch_array($result_2)) {
if ($row_2['department'] == $row['department']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_2['department']."'".$selected.">".$row_2['department']."</option>";
}
}
echo"</select>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Start Date</label>
<input type='date' name='s-date' id='s-date-".$row['project_id']."' class='form-control' value='".$row['start_date']."' required>
</div>
</div>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>End Date</label>
<input type='date' name='e-date' id='e-date-".$row['project_id']."' class='form-control' value='".$row['end_date']."' required>
</div>
</div>
</div>
<div class='row'>
<div class='column-2'>
<div class='form-field'>
<label class='field-label'>Priority</label>
<select class='form-control' name='priority' id='priority' required>
<option value=''>Priority</option>";
if ($count_3 > 0) {
while ($row_3 = mysqli_fetch_array($result_3)) {
if ($row_3['priority'] == $row['priority']){
$selected = "selected";
}
else {
$selected = "";
}
echo "<option value='".$row_3['priority']."'".$selected.">".$row_3['priority']."</option>";
}
}
echo "</select>
</div>
</div>
<div class='column-2'>
<div class='onboard-btn'>
<button type='submit' class='btn btn-update' name='update'>Update</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</td>
<td class='table-cell'><a href='delete.php?del=".$row['project_id']."' class='btn btn-delete'>Delete</i></a></td>
</tr>";
}
Javascript:
/* Edit Project Modal Event */
var modal_edit = document.getElementById('edit-project-modal');
var span_edit = document.getElementsByClassName("onboard-close-2")[0];
$(document).on('click',".btn-edit",function(){
$(modal_edit).toggleClass("edit-modal-show");
});
span_edit.onclick = function() {
$(modal_edit).removeClass("edit-modal-show");
}

Because it does not know which edit button is related to witch modal.
use
var modal_edit;
$(document).on('click',".btn-edit",function(){
modal_edit = $(this).parent().find(".edit-project-modal");
$(modal_edit).toggleClass("edit-modal-show");
});
$(".onboard-close-2").click(function(){
$(modal_edit).removeClass("edit-modal-show");
});
An other thing I know this is not related to your request but it will give you wrong result when you fix this problem. The form in the model should have a unique name such as your record id so that when it submits it you know which form has been submitted.
P.S. - If you are using double quotes in echo() then rather than doing .." . $PHPVariable . ".. use can directly write echo "<p id='$PHPVariable'>" double quotes can parse PHP Variables, but beware of messing up the single and double quotes.

I think you have to do this in your listing page you have to call onClick method on the button taking the respecting id as an argument
<td onClick="editRow(<?php echo $value['id']; ?>);"><?php echo ($value['display_offer']); ?></td>
and then by using ajax in the function get the respective value according to the id and populate the model.

I think the problem is the same Id for every edit modal. ID must be unique on a page.
You can fix it in two ways:
Use a counter variable inside loop $counter and assign ids like ...id='edit-project-modal-".$counter."'> in this way you will get unique ids like edit-project-modal-1, edit-project-modal-1.
Make a single Modal and dynamically add content to it when edit button is clicked. In this way, you have a single modal with unique Id and also page size will be smaller. For adding content you can make good use of data attributes or jQuery's .closest() and .find() methods.
Some Suggestions:
Use <p id='$phpvariables'> directly if you are using echo() with double quotes. double quotes can parse PHP variables.
Use bootstrap's Modal only build see https://getbootstrap.com/docs/3.3/customize/ to avoid modal related bugs.

Yii2 - Using javascript to update a dynamic from element with wbraganca dynamicform

I have a dynamic form for Product Orders. I am setting the price based on company(select2) and product using onchange from the product dropDownList. Company is on the base form outside the dynamicform (easy to reference) but product is a list item within the dynamicform. My code is working for the first item but I cannot set the subsequent because I cannot figure out how to address the item # of the added dynamic form items.
dynamic form loop:
<?php foreach ($modelsOrderItem as $o => $modelOrderItem): ?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="clearfix"></div>
<div class="panel-body">
<?php
// necessary for update action.
if (! $modelOrderItem->isNewRecord) {
echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id");
}
?>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
<div class="col-md-5">
<?= $form->field($modelOrderItem, "[{$o}]idProduct")->
dropDownList
(
ArrayHelper::map(Product::find()->all(), 'id','ProductCodeWithName'),
['prompt' => 'Select a Product','style'=>'width:400px' ,
'onchange' => '$.post( "index.php?r=pricelist/pricelist&idProduct='.'"+$(this).val()+"'.'&idCompany='.'"+$("#order-idcompany").val(),
function(data)
{
$( "#orderitem-0-itemprice" ).val(data);
});']
)->label(false);
?>
</div>
<div class="col-md-3" >
<?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:150px'])->label(false) ?>
</div>
<div class="col-md-2">
<?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
I have now removed the onchange function and added Javascript that allows me to control which form element to change but, I cannot figure out how to do this with dynamically added elements. I have included script looking for a change in the added price element but the script does not get activated. So it works for the zero(0) element but will not respond with orderitem1, etc. Here is my updated code and the Javascript.
<div class="container-items"><!-- widgetContainer -->
<?php foreach ($modelsOrderItem as $o => $modelOrderItem):?>
<div class="item panel panel-default"><!-- widgetBody -->
<div class="clearfix"></div>
<div class="panel-body">
<?php
// necessary for update action.
if (! $modelOrderItem->isNewRecord)
{
echo Html::activeHiddenInput($modelOrderItem, "[{$o}]id");
}
?>
<div class="form-group kv-fieldset-inline">
<div class="col-sm-4">
<?= $form->field($modelOrderItem, "[{$o}]idProduct")->dropDownList
(
ArrayHelper::map(Product::find()->orderBy('productCode')->all(), 'id','ProductCodeWithName'),
['prompt' => 'Select a Product','style'=>'width:360px' ,]
)->label(false);
?>
</div>
<div class="col-sm-2" >
<?= $form->field($modelOrderItem, "[{$o}]itemQuantity")->textInput(['style'=>'width:100px','padding'=>'100px'])->label(false) ?>
</div>
<div class="col-sm-2" >
<?= $form->field($modelOrderItem, "[{$o}]quantityType")->DropdownList(['Cartons'=>'Cartons','Bags'=>'Bags','Kilograms'=>'Kilograms',
'Tubs'=>'Tubs', 'Pieces' => 'Pieces'],['style'=>'width:150px'])->label(false) ?>
</div>
<div class="col-sm-2">
<?= $form->field($modelOrderItem, "[{$o}]itemPrice")->textInput(['style'=>'width:200px'])->label(false) ?>
</div>
<div class="pull-right">
<button type="button" class="add-item btn btn-success btn-xs"><i class="glyphicon glyphicon-plus"></i></button>
<button type="button" class="remove-item btn btn-danger btn-xs"><i class="glyphicon glyphicon-minus"></i></button>
</div>
</div>
</div><!-- .row -->
</div>
</div>
<?php endforeach; ?>
</div>
<?php DynamicFormWidget::end(); ?>
</div>
Javascript:
<?php
$script = "$('#orderitem-0-idproduct').change(function()
{
var idProduct = $(this).val();
$.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct, idCompany:$model->idCompany },
function(data)
{
$('#orderitem-0-itemprice').val(data);
});
});
$('#orderitem-1-idproduct').change(function()
{
var idProduct1 = $(this).val(data);
alert();
$.get( 'index.php?r=pricelist/getpricelist&idProduct',{ idProduct:idProduct1, idCompany:$model->idCompany },
function(data)
{
$('#orderitem-1-itemprice').val(data);
});
});";
$this->registerJs($script);
?>

I was able to use Javascript to find out which element was being clicked. This avoided the problem of being able to run code on dynamic elements that had not been initiated.
<?php $js = <<<JS
$('body').change(function(e)
{
var element = '#'+$(e.target).attr('id');
var field = element.substring(element.length - number_of_chars_in_your_fieldname, element.length); //stripping the string to identify the field you are looking
if(field === "field_you_are_looking_for") //element usually looks like #formID-row-field
{
var dropdownID = $(element).val();
if (element.length === 22) //single digit row numbers
{
var row = element.substring(11,12); //extract the current row number
} else //row numbers higher than 9
{
var row = element.substring(11,13);
}
//Do whatever you need to do
$('#formID-'+row+'-field_you_want_to_change').val(data); //set the field to change on current row
}
});
JS;
$this->registerJs($js);
?>

Hide div if value inside is set to 0

I have code like below:
<div class="col-md-6 col-xs-6 StockNumber">
In Stock:
<span class="NumberOfStock">
<?php echo $this->product->product_in_stock ?>
</span>
</div>
Here is example how it works: http://www.avanti-studio.pl/index.php/kolekcje/kardigany/sweter-pudrowy-5-detail ("W magazynie: 0").
What I want to do is to hide all "StockNumber" div if value in "NumberOfStock" span is "0". How it can be done?
Thx for any help.

Try This Code it will work
$(".StockNumber span:contains('0')").parent('div').hide();

This only outputs the div if there is stock.
<?php if($this->product->product_in_stock>0){ ?>
<div class="col-md-6 col-xs-6 StockNumber">
In Stock:
<span class="NumberOfStock">
<?php echo $this->product->product_in_stock ?>
</span>
</div>
<?php } ?>

Toggling php generated div elements

I am fetching data from using mysql to generate div tags in a sort of hierarchy structure. There are div tags inside div tags which are inside div tags. This is created using nested while loops. The output is like this where the ids are uniquely made through php:
<div class="holder">
<label class="toggle" id=$courseCategory>Category 1</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 1</label>
<div class="content" id=$courseTopic>
</div>
</div>
<label class="toggle" id=$courseCategpry>Category 2</label>
</div>
And that is the basic structure of the generated content.
The PHP that is creating the structure is this:
<?php
include "connect.php";
global $con;
$qryCat=mysqli_query($con, "SELECT DISTINCT CourseCategory FROM tblCourse");
while($row=mysqli_fetch_array($qryCat, MYSQL_ASSOC)){
$courseCat = $row['CourseCategory'];
//print $courseCat
echo "<label class ='toggle' id='".$courseCat."'>".$courseCat."</label>";
echo "<div class ='content' style = 'display:none;' id='div".$courseCat."'>";
$qryTop=mysqli_query($con, "SELECT DISTINCT CourseTopic FROM tblCourse WHERE CourseCategory = '$courseCat'");
while($row=mysqli_fetch_array($qryTop, MYSQL_ASSOC)){
$courseTop = $row['CourseTopic'];
//print $courseTop;
echo "<label class ='toggle' id='".$courseTop."'>".$courseTop."</label><br/>";
echo "<div class ='content' style = 'display:none;' id='div".$courseTop."'>";
$qryLevel=mysqli_query($con, "SELECT DISTINCT CourseLevel FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop'");
while($row=mysqli_fetch_array($qryLevel, MYSQL_ASSOC)){
$courseLevel = $row['CourseLevel'];
//print $courseLevel;
echo "<label class ='toggle' id='".$courseTop.$courseLevel."'>".$courseLevel."</label><br/>";
echo "<div class ='content' style = 'display:none;' id='div'".$courseTop.$courseLevel."'>";
$qryCourse=mysqli_query($con, "SELECT DISTINCT CourseCode, CourseName FROM tblCourse WHERE CourseCategory = '$courseCat' AND CourseTopic = '$courseTop' AND CourseLevel = '$courseLevel'");
while($row=mysqli_fetch_array($qryCourse, MYSQL_ASSOC)){
$courseCode =$row['CourseCode'];
$courseName = $row['CourseName'];
//print $courseName;
echo "<label id='".$courseCode."'>".$courseName."</label><br/>";
echo "<div id='div".$courseCode."'></div>";
}
echo "</div>";
}
echo "</div>";
}
echo "</div><br/>";
}
?>
I want to use jQuery to toggle each section like a menu. So when I press Category 1, All the topics under Category 1 are show, which I can then click on the topics to show the next level of the menu.
I have tried a couple of different things in trying to get this to work. The below code works for the first level. I can toggle the categories, however nothing happens when clicking on the topics that are shown.
$(document).ready(function(){
$(".toggle").click(function() {
$(this).next(".content").toggle("slow");
});
});
I have also tried this code which allows the entire "tree" to expand, however it toggles all siblings.
$(document).ready(function(){
$(".toggle").click(function() {
$(this).siblings(".content").toggle("slow");
});
});
Both have aspects that I want for the final result but I can't figure out how to navigate the tree in order to do what I want.
Any help would be greatly appreciated.
EDIT: After looking through the PHP to see if that was the issue I still can't get it working. I have added the PHP to see if someone with sharper eyes can see if that is the problem.

Can you try it? Is this you are looking or
you are looking like "ACCORDION MENU"?
Your Code is working fine. The Problem may be there is no content in Category 2.
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".toggle").click(function() {
$(this).next(".content").toggle("slow");
});
});
</script>
CSS
<style>
label + .content{
display:none;
}
label + .open{
display:block;
}
</style>
HTML
<div class="holder">
<label class="toggle" id=$courseCategory>Category 1</label>
<div class="content open" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 1</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<label class="toggle" id=$courseCategpry>Category 2</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 2</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<label class="toggle" id=$courseCategpry>Category 3</label>
<div class="content" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic 3</label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
</div>
Attempt #2 In php
<div class="holder">
<?php
$count=0;
for($i=0;$i<5;$i++){
$count=$count+1;
?>
<label class="toggle" id=$courseCategory>Category <?php echo $count; ?></label>
<div class="content open" id=$courseCategory>
<label class="toggle" id=$courseTopic>Topic <?php echo $count; ?></label>
<div class="content" id=$courseTopic>
</div>
</div><br/>
<?php } ?>
</div>

Your are binding click event that are being generated dynamically. So may be the click function is not binded with elements at that moment.
Check below link
http://jsfiddle.net/23yxj3ny/1/
$(".holder").on('click','.toggle',function() {
$(this).siblings(".content").toggle("slow");
});

For future reference, the problem was with the PHP. I guess when the was being echo'd after the it was changing the structure of the . After removing the it works perfect!