Develop Reference

Refresh specific HTML content that retrieves data from MySQL

So i have a form that that does a simple calculation, depending on the users input. If the results is a certain value then it stores that value in a database, then it displays that value on a page. But i have to refresh the whole page for it to retrieve the latest updated value from the the database and display on the page.
I know how to write code to refresh the whole page, but in this case i only need the section where the it displays to be refreshed.
The original form to calculate
<div class="formC">
<form action="" method="post">
<label>Base Amount</label>
<input type="text" name="base"</input>
<label>Select Currency</label>
<div class="custom-select">
<span></span>
<select name="cur_name">
<option value="" selected>Choose a Base Currency</option>
<option value="EUR">EUR</option>
<option value="USD">USD</option>
</select>
</div>
<button type="submit" value="Submit">SUBMIT</button>
</form>
</div>
The form that gets the new values from the database
<div class="formC">
<form action="test.php" method="post">
<label>Base Amount</label>
<input type="text" name="base" id="new_base" value="<?php
$results = mysqli_query($con, "SELECT * FROM contents_arr ORDER BY id DESC LIMIT 1");
while($row = mysqli_fetch_array($results)){
echo $row["new_base"];
}
?>">
<div id="load_data"></div>
<label>Select Currency</label>
<input type="text" name="cur_name" value="<?php
$results = mysqli_query($con, "SELECT * FROM gain_name_table ORDER BY id DESC LIMIT 1");
while($row = mysqli_fetch_array($results)){
echo $row["gain_name"];
}
?>">
<button id="btn_submit" type="submit" value="Submit">SUBMIT</button>
</form>
</div>
Calculation
<?php
$base = $_POST['base'];
$value = $_POST['val'];
$selected = $_POST['cur_name'];
if ($selected == 'EUR') {
$results_eur = $base * $value;
// USD
}elseif ($selected == 'USD') {
$results_usd = $base * $value;
}
if($selected == 'EUR'){
$sql = "INSERT INTO calculation(new_base) VALUES('".$results_eur."')";
mysqli_query($con,$sql);
}elseif($selected == 'USD'){
$sql = "INSERT INTO calculation(new_base) VALUES('".$results_usd"')";
mysqli_query($con,$sql);
}

I managed to find the solution for this code using Ajax and jQuery:
$(document).ready(function(){
$('#btn_submit').click(function(){
var get_data = $('#new_base').val();
if($.trim(get_data) != '')
{
$.ajax({
url:"db2.php",
method:"POST",
data:{new_base:get_data},
dataType:"text",
success:function(data)
{
$('#new_base').val("");
}
});
}
});
setInterval(function(){
$('#load_data').load("fetch.php").fadeIn("slow")
}, 1000);
});

This can be done by creating a seperate php file and replacing the content on your page with the content of that other php page using javascript. This is not a full description on how to do it, just a hint on how this is done. There are plenty of resources where it is described in detail.
One place to start could be here W3Schools Ajax & Php
getData.php
header('Content-Type: application/json; charset=utf-8');
// do your php database stuff here
$data = //...
$data = json_encode($data);
echo $data;
And in your main file, you can fetch() the content of your getData.php in javascript to get the latest result and then inject the results into your div using document.getElementById('content').innerHTML = ...
Using this method, only your div refreshed, not the whole page.

checkboxes are not working after ajax call

I am trying to load data using ajax, but the checkboxes are not working
This is the html am trying to load using ajax
<div class="mt-checkbox-list" >
<?php foreach($product_offerings as $row){
$check ='';?>
<label class="mt-checkbox mt-checkbox-outline">
<?php
if(isset($_GET['categories'])){
foreach(#$_GET['categories'] as $cat) {
if ($row['id']==$cat) {
$check = 'checked';
break;
}
}
}?>
<input type="checkbox" value="<?php echo $row['id']?>" name="categories[]" <?php echo $check;?>>
<?php echo $row['name']?>
</label>
</div>
<?php }?>
AJAX call:
$('#product_offering_id').change(function(e){
e.preventDefault();
var product_offering_id = $('#product_offering_id').val();
if(product_offering_id != '')
{
$.ajax({
url:"/organization/vendors/productOfferingsVendors",
type:"POST",
dataType: 'json',
cache: false,
data:{product_offering_id:product_offering_id},
success:function(json)
{
if (json['success']) {
$('#categories').html(json['html']);
}
}
});
}
am attaching a screenshot of the result am getting
Any help would appreciate, Thanks in advance

Checkboxes are working now, it was the issue with the classes i used for checkbox, after removing it, it worked

Show 'no more posts' when loaded all posts using ajax php

Below is the javascript part and load more button which I am using to load more posts from database it works fine I want to show a 'no more posts' message when all posts have been loaded but do not know how to do that exactly. Hope you guys can help.
<script>
$(document).ready(function(){
$(document).on('click','.show_more',function(){
var ID = $(this).attr('id');
$('.show_more').hide();
$('.loding').show();
$.ajax({
type:'POST',
url:'mload_more.php',
data:'id='+ID,
success:function(html){
$('#show_more_main'+ID).remove();
$('.posts').append(html);
}
});
});
});
</script>
<div class="show_more_main" id="show_more_main<?php echo $ID; ?>">
<span id="<?php echo $ID; ?>" class="show_more" title="Load more posts">
Show more
</span>
<span class="loding" style="display: none;">
<span class="loding_txt">Loading...</span>
</span>
</div>

Within mload_more.php file check the number of returned rows greater than zero. It would be as following code.
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
//display data
}
} else {
echo "No more posts to load";
}

Gayan just gave me a start and rest was not much difficult.
<?php
if ($query->rowCount() > 0) {
while($row = $result->fetch_assoc()) {
}
}
else {
echo $er = "No more posts to load";
}
?>
<script type="text/javascript">
var er = "<?php echo $er; ?>";
if(er!=''){
$("er").show();
$('.show_more').hide();
}
</script>

How to pass selected value in dropdown list without submit data using php?

I'm using codeigniter.I have controller call feature.php and view call feature.php in view php i have drop-down list.
I need to save my packages id in session when the user selected the drop-down.how can i do this without refreshing and submit data in my from ?
this is my HTML code in view php page
<div class="form-group">
<label for="lastname" class="control-label">Your Packages</label>
<?php if(isset($tourbuddy_packages)){?>
<select id="itemType_id" class="form-control input-sm" name="tripbuddy_PackageTitle" onChange="disp_text()">
<?php foreach ($tourbuddy_packages as $packages) {?>
<option value="<?php echo $packages['PackageID'] ?>">
<?php echo $packages[ 'PackageTitle']?>
</option>
<?php } ?>
</select>
<input type="hidden" name="PackageID" id="country_hidden">
<?php } else { ?>
<select class="form-control input-sm" name="tripbuddy_PackageTitle">
<option>Add Packages</option>
</select>
<?php } ?>
</div>
need quick help thanx

You can create a php file called save_package_to_session.php;
<?php
if (!isset($_SESSION)) {
session_start();
}
$package_id = $_POST["id"];
$_SESSION["pkg_id"] = $package_id;
echo $_SESSION["pkg_id"];
?>
and js,
$("#itemType_id").change(function() {
$.ajax({
url : "save_package_to_session.php",
method: "POST",
data: "id=" + $(this).val(),
success: function(response) {
// handle
}
})
});

I don't have more idea about php code but you make ajax request
$("#itemType_id").change(function() {
$.ajax({
url : controller_action_url,
method: "POST" /* use get or post*/,
data: "package_id=" + $(this).val(),
success: function(response) {
}
})
});
simply, now you can get package_id params on controller and you can store in session.

button to display result of sum values of json file

I need help to display result a sum of values of a json file that's like this:
http://www.base.gov.pt/base2/rest/contratos?&sort(-publicationDate)
I have this code in php to do that:
(name of this file: estat.php)
<?php
//include "sum.php";
$x="active";
$y='';
if(isset($_GET['tabsoft'])){
$y="active";
$x="";
}
?>
<html>
<?php include 'cab.php'; ?>
<body>
<?php include 'menu.php'; ?>
<div class="container">
<div calss="row">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="<?php echo $x ?>">Valor Total Gasto</li>
<li class="<?php echo $y ?>">Número de Empresas Envolvidas</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane <?php echo $x ?> " id="val">
<p>
<form>
<h2>Dinheiro gasto nos contratos</h2>
<input type="submit" name="soma" value="Somar Valores" class="btn btn-primary" formaction="action_sum.php"/>
<!-- <p><?php echo $total; ?></p> -->
</form>
</p>
</div>
<div class="tab-pane <?php echo $y ?> " id="emp">
</div>
</div>
</div>
</div>
<?php include 'rodape.php';?>
</body>
</html>
And i need to display the sum value of 'initialContractualPrice' from the json file, to do this i write this code in other file that i name sum.php:
<?php
// Get json from url
$json = file_get_contents("file.json");
// Decode json into an array
//$json = json_decode($content, true);
$data = json_decode($json, TRUE);
// Set default
global $total;
// Loop through the array created when decoding json
foreach ($data as $key)
{
// remove symbol from the end leaving only digits
$value = substr(utf8_decode($key['initialContractualPrice']), 0, -1);
// remove the decimal point
$value = str_replace('.', '', $value);
// replace the comma with a decimal point
$value = str_replace(',', '.', $value);
// add this number to the total value
$total += $value;
}
//echo $total;
?>
My question is how can i do for the page do the sum without redirect to the sum.php but do it and print the result in estat.php
I can change the type of sum.php to js or jquery if are more easy to do that.
Thank you very much.

as you did, include your sum.php at the beggining of your file estat.php. Hide the sum value with css.
<input id="sum-btn" type="submit" name="soma" value="Somar Valores" class="btn btn-primary" formaction="action_sum.php"/>
<p id="sum"><?php echo $total; ?></p>
css:
#sum {
display:none;
}
and with jQuery (as you tag it) put a click handler on your button:
<script>
$(document).ready(function() {
$('#sum-btn').click(function() {
$('#sum').show();
});
});
</script>
FIDDLE DEMO
Alternative, if you dont want to calculate the sum when the page is loaded, you can call your sum.php with an AJAX call when the button is clicked.
<script>
$(document).ready(function() {
$('#sum-btn').click(function() {
var request = $.ajax({
url: "sum.php",
type: "GET"
});
request.done(function( value ) {
$('#sum').text( value );
$('#sum').show();
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
});
});
</script>
and in sum.php, echo $total; at the end.