Javascript to fill a div - javascript

I use a button to fill a div with data that i get from an another php file.
I use the div display with "col-md-12".
When I call my php file, to fill the div, if there is no reservation, it will correctly displayed using the " 12 " wide.
When there is a reservation, I use 4 div of " 3 " each, but they dont display themself side by side to fill the " 12 " length. ( Sorry if it's not thath clear ^^').
Here my html code :
<div class="send-message">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="section-heading">
<h2 style="text-align: center;">Réservations</h2>
</div>
</div>
<div class="col-sm-2"style="text-align: center;"></div>
<div class="col-sm-8"style="text-align: center;">
<ul class="nav nav-pills nav-fill " style="text-align: center;">
<li class="nav-item active black">
<button id="btnResPas">Réservations passées</button></li>
<li class="nav-item "><button id="btnResAct">Réservations actives</button></li>
</ul>
</div>
<div class="col-sm-2"style="text-align: center;"></div>
<div class="col-md-12" id="divResPas">
</div>
</div>
</div>
The javascript :
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#btnResPas").on("click",function(){
$("#divResPas").load("resPas.php?refClient=<?php echo $refClient?>");
});
});
</script>
And the php file :
<?php
include("connection.php");
$refClient = $_GET['refClient'];
$reservationClient = "SELECT * from tblreservation where idClient ='".$refClient."'";
$result = mysqli_query($con,$reservationClient);
if (mysqli_num_rows($result) == 0)
{
echo '<div class="col-sm-12" style="text-align:center;"> Pas de réservation </div>';
}
else
{
while ($row = mysqli_fetch_array($result))
{
$id = $row['idTblReservation'];
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Date de réservation : </b></u></br>';
echo $row["dateReservation"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Heure : </b></u></br>';
echo $row["heure"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><b><u>Nombre de personnes : </b></u></br>';
echo $row["nombreClient"];
echo '</div>';
echo '<div class="col-sm-3" style="text-align:center;"><a href=';
echo 'modifierResClient.php?id=';
echo $id;
echo '></br>Modifier</a></div>';
echo '<div class="col-sm-12" style="text-align:center; margin-top : 20px;"></div>';
}
}
?>
Here is what it look like :
When I change the class to row :
Thanks guys !

try to change
<div class="col-md-12" id="divResPas"></div>
to
<div class="row" id="divResPas"></div>

Related

Bootstrap modal getting disappeared Immediately Wordpress

I have added bootstrap modal to show entries information in it, but I am facing an issue, the modal is getting disappeared within a second, I don't know what's wrong, as I checked the same question on different forums, many developers suggest to remove the JS files, but I am using WordPress and not sure which .js file making issue and how to remove it for specific pages.
More Info: It was working fine before activating the UsersWP plugin, that plugin is not useful on the profile page where I am facing this issue, but it is useful on other parts of the site, can anyone help to remove js files added by that specific plugin from profile pages only.
Modal Code:
<?php
$table_name = $wpdb->prefix . "offers";
$author = get_the_author( 'ID' );
// this will get the data from your table
$retrieve_data = $wpdb->get_results( "SELECT * FROM $table_name" . " WHERE author=" . "'" . $author . "'");
foreach($retrieve_data as $list){
echo "<tr>";
echo "<td>" . $list->first_name . " " . $list->last_name . "</td>";
echo "<td>" . $list->email . "</td>";
echo "<td>" . $list->post_title . "</td>";
echo "<td>" . $list->purchase_price . "</td>";
echo "<td>" . $list->purchase_type . "</td>";
echo "<td>" . $list->closing_date . "</td>";
echo "<td><a href='#' class='btn btn-primary' data-toggle='modal' data-target='#exampleModal" . esc_html($list->id) . "'" . " data-whatever='#getbootstrap'>View Details</a></td>"; ?>
<div class="modal fade" id="exampleModal<?php echo esc_html($list->id);?>" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Offer Details Submitted by: <?php echo esc_html($list->first_name . " " . $list->last_name);?></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h4 class="col-md-12">
Propery: <?php echo $list->post_title; ?>
</h4>
<h3 class="col-md-12">
Contact Information:
</h3>
<div class="col-md-12">
<span class="font-weight-bold">Agent's Full Name:</span> <?php echo $list->first_name . " " . $list->last_name; ?>
</div>
<div class="col-md-12">
<span class="font-weight-bold">Agent Email:</span> <?php echo $list->email; ?>
</div>
<div class="col-md-12">
Agent Cell Phone Number: <?php echo $list->phone; ?>
</div>
<div class="col-md-12">
Agent's Brokerage Name: <?php echo $list->brokerage_name; ?>
</div><div class="mt-1">
</div>
<h3 class="col-md-12 head-mar">
Offer Details:
</h3>
<div class="col-md-12">
Purchase Price: <?php echo "$" . $list->purchase_price; ?>
</div>
<div class="col-md-12">
Purchase Type: <?php echo $list->purchase_type; ?>
</div>
<div class="col-md-12">
Lender Name: <?php echo $list->lender_name; ?>
</div>
<div class="col-md-12">
Name of Loan Officer: <?php echo $list->name_loan_officer; ?>
</div>
<div class="col-md-12">
Name of Loan Officer: <?php echo $list->phone_loan_officer; ?>
</div>
<div class="col-md-12">
Email of Loan Officer: <?php echo $list->email_loan_officer; ?>
</div>
<div class="col-md-12">
Closing Date: <?php echo $list->closing_date; ?>
</div>
<div class="col-md-12">
Concessions Amount: <?php echo "$" . $list->concessions_amount; ?>
</div>
<div class="col-md-12">
Inspection Period: <?php echo $list->inspection_period; ?>
</div>
<div class="col-md-12">
Occupany: <?php echo $list->seller_occupancy; ?>
</div>
<div class="col-md-12">
Earnest Money Deposit: <?php echo "$" . $list->emd; ?>
</div>
<div class="col-md-12">
Home Warranty: <?php echo $list->home_warranty; ?>
</div>
<div class="col-md-12">
Additional Terms: <?php echo $list->additional_terms; ?>
</div>
<div class="col-md-12">
<ul>
<?php
$table_name = $wpdb->prefix . "offers_attachment";
$author = get_the_author( 'ID' );
$offer_id = $list->id;
// this will get the data from your table
$attach_data = $wpdb->get_results( "SELECT * FROM $table_name" . " WHERE author=" . "'" . $author . "'" . " AND offer_id=" . $offer_id);
foreach($attach_data as $attach){
echo "<li>" . $attach->url . "</li>";
}
?>
</ul>
</div>
</div></div></div></div>
<script>
$( '#exampleModal<?php echo esc_html($list->id);?>' ).click( function(e) {
e.preventDefault();
$( 'exampleModal<?php echo esc_html($list->id);?>' ).modal();
)};
</script>
<?php } ?>
I checked source code and found this:
<script src='https://example.com/wp-content/plugins/userswp/vendor/ayecode/wp-ayecode-ui/assets/js/bootstrap.bundle.min.js'></script>
I try to remove it for a specific page by reading some StackOverflow questions but it's still there.
Code putted in child theme's functions.php:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );
function my_deregister_javascript()
{
if ( is_page('my-account') )
{
wp_deregister_script( 'bootstrap.bundle.min.js' );
}
}

PHP Number Increment undefined

I have the code below and it's returning undefined on the countingNumbers variable. I need to implement the class name numbered so I can loop over in JavaScript and give them separate "Read More" tags.
<?php $countingNumbers = 0 ?>
<?php
function custom_echo($x, $length){
if(strlen($x)<=$length)
{
echo $x;
}
else
{
$y=substr($x,0,$length) . '...';
echo $y;
echo '<div class="service-about__link' . $countingNumbers . '">
READ MORE
</div>';
}
}
?>
#foreach($services as $service)
<?php $countingNumbers++ ?>
<div class="service-about movement{{$countingNumbers}} row row-margin">
<div class="col-lg-6">
<h3 class="service-about__title">
{!!$service->title!!}
</h3>
<div class="service-about__content-small">
<?php
custom_echo($service->content, 200); ?>
</div>
<div class="service-about__content-large">
{!!$service->content!!}
</div>
</div>
<div class="col-md-6">
<div class="service-about__image">
<img src="{{url('')}}/img/services/{{$service->image}}">
</div>
</div>
#endforeach
As #N69S pointed out, $countingNumbers is not in custom_echo()'s scope. To make that happen, you can pass it in via use():
<?php $countingNumbers = 0 ?>
<?php
function custom_echo($x, $length) use($countingNumbers) {
if(strlen($x)<=$length)
{
echo $x;
}
else
{
$y=substr($x,0,$length) . '...';
echo $y;
echo '<div class="service-about__link' . $countingNumbers . '">
READ MORE
</div>';
}
}
?>
#foreach($services as $service)
<?php $countingNumbers++ ?>
<div class="service-about movement{{$countingNumbers}} row row-margin">
<div class="col-lg-6">
<h3 class="service-about__title">
{!!$service->title!!}
</h3>
<div class="service-about__content-small">
<?php
custom_echo($service->content, 200); ?>
</div>
<div class="service-about__content-large">
{!!$service->content!!}
</div>
</div>
<div class="col-md-6">
<div class="service-about__image">
<img src="{{url('')}}/img/services/{{$service->image}}">
</div>
</div>
#endforeach
If your array has numeric, incremental indexes, you can do this (if not, you can use the loop variable as #brombeer pointed out):
<?php
function custom_echo($index, $x, $length){
if(strlen($x)<=$length)
{
echo $x;
}
else
{
$y=substr($x,0,$length) . '...';
echo $y;
echo '<div class="service-about__link' . $index . '">
READ MORE
</div>';
}
}
?>
#foreach($services as $index => $service)
<div class="service-about movement{{$index}} row row-margin">
<div class="col-lg-6">
<h3 class="service-about__title">
{!!$service->title!!}
</h3>
<div class="service-about__content-small">
<?php
custom_echo($index, $service->content, 200); ?>
</div>
<div class="service-about__content-large">
{!!$service->content!!}
</div>
</div>
<div class="col-md-6">
<div class="service-about__image">
<img src="{{url('')}}/img/services/{{$service->image}}">
</div>
</div>
#endforeach
You could also get rid of the remaining PHP code block as #AlbertoSinigaglia pointed out.
your view:
#foreach($services as $index => $service)
<div class="service-about movement{{$index}} row row-margin">
<div class="col-lg-6">
<h3 class="service-about__title">
{!!$service->title!!}
</h3>
<div class="service-about__content-small">
#include('custom_echo', [
'index' => $index,
'x' => $service->content,
'length' => 200
])
</div>
<div class="service-about__content-large">
{!!$service->content!!}
</div>
</div>
<div class="col-md-6">
<div class="service-about__image">
<img src="{{url('')}}/img/services/{{$service->image}}">
</div>
</div>
#endforeach
custom_echo.blade.php
#if (strlen($x)<=$length)
{{ $x }}
#else
{{ substr($x,0,$length) }}…
<div class="service-about__link{{ $index }}">
READ MORE
</div>
#endif

can't download wordpress posts using javascript

hello i have a list of posts and i use javascript to download a post as pdf
but i have a problem because the download button works just on the first post and not in the others and when i inspect the button in the browser i can see the description below but the button not working
this is a part of my code if some one could help :
ps: the download button is : Imprimer l'offre
<li style=" border: 1px solid black; padding: 20px; margin-bottom: 30px;" <?php job_listing_class(); ?> data-longitude="<?php echo esc_attr($post->geolocation_long); ?>" data-latitude="<?php echo esc_attr($post->geolocation_lat); ?>">
<!-- <a href="<?php the_job_permalink(); ?>">
-->
<!-- <?php the_company_logo(); ?> -->
<div class="work-section">
<h3><?php wpjm_the_job_title(); ?> <?php echo "Job ID: " . $post->ID ?> </h3>
<!-- <div class="company">
<?php the_company_name('<strong>', '</strong> '); ?>
<?php the_company_tagline('<span class="tagline">', '</span>'); ?>
</div> -->
</div>
<!-- <div class="location">
<?php the_job_location(false); ?>
</div> -->
<div id="tblCustomers">
<div id="collapseExample<?php echo $post->ID ?>" class=" collapse job_description">
<?php wpjm_the_job_description(); ?>
</div>
<div id="print-btn"></div>
</div>
<center>
<div class="vc_btn3-container red-btn vc_btn3-inline" style="margin-top: 20px">
<button id="pdfview" data-target="<?php echo $post->ID ?>" style="text-align: center;">
Imprimer l’offre
</button>
<div id="pdfdiv" style="display: none;">
<?php wpjm_the_job_description(); ?>
</div>
<div id="editor"></div>
<script type="text/javascript">
var $ = jQuery.noConflict();
$(window).on('load', function() {
var doc = new jsPDF();
var specialElementHandlers = {
'#editor': function(element, renderer) {
return true;
}
};
$('#pdfview').click(function() {
doc.fromHTML($('#pdfdiv').html(), 15, 15, {
'width': 700,
'elementHandlers': specialElementHandlers
});
doc.save('file.pdf');
});
});
</script>
</div>

How to hide siblings elements

How would I hide rest of the categories when I click on one, and if I click again rest of the categories would appear again.
<?php if($slide1_row_cnt > 0){ ?>
<div class="item active">
<h4>Groups</h4>
<?php while ($row = mysqli_fetch_assoc($slide1_result)) { ?>
<div class="row">
<div class="col-xs-2">
<p class="groups-list"><button type="button" class="btn btn-primary groups-button" rel="/tasks/stock/stock-category-list.php?filter=<?php echo $row['id_stc']; ?>"><?php echo $row['description_stc']; ?></button></p>
</div>
</div>
<?php } ?>
</div>
<!-- /Slide1 -->
Javascript:
$('.groups-button').click(function() {
$(this).parent('p').siblings().toggle();
});
Thanks
Based on your code shared
<?php while ($row = mysqli_fetch_assoc($slide1_result)) {
You are showing a list of rows, so you should hide the rows
$(this).closest('.row').siblings().toggle();

Get multiple checkbox values in Yii

I have a page in which a user is able to select his desired category and get a listing of organizations. As for now, I've managed to get data from one selected category.
My issue now is getting multiple selected categories and retrieve data from multiple ids.
List of categories:
<div class="col-md-4 sidebar well col-md-push-8">
<div class="sidebar__block">
<div class="sidebar__inner">
<h4 class="h4">Filter by category</h4>
<?php foreach ($categories as $c): ?>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" name="category[]" id="<?php echo $c->id;?>" value="<?php echo $c->id;?>" class="styled" <?php if($c->id==$_GET['category']){ echo 'checked="checked"'; } ?>>
<label for="<?php echo $c->title; ?>"><?php echo $c->title;?></label>
</div>
</div>
<?php endforeach ?>
<div class="form-group">
<button type="submit" class="btn btn-sd btn-sd-green full-width filter_button" name="subscribe">Filter <i class="icon-right-small"></i></button>
</div>
</div>
</div>
</div>
List of data(organizations according to category selected):
<div class="col-md-8 col-md-pull-4">
<!--start show category with title-->
<div class="lgi__block lgi__block-2" id="appnendGridId">
<!--start show single category with title-->
<?php if(!empty($enterprises)): ?>
<?php foreach ($enterprises as $e): ?>
<div class="lgi__item category1">
<a class="lgi__item-inner" target="_blank" href="<?php echo $this->createUrl('frontend/enterprise', array('id' => $e->id)) ?>">
<div class="lgi__block-img">
<h5 class="lgi__label"><?php if($e->isIdeaEnterpriseActiveAccreditedMembership()): ?><?php echo $e->renderIdeaEnterpriseMembership('text')?><?php endif; ?></h5>
<img class="img-responsive-full lgi__img wp-post-image" src="<?php echo $e['imageLogoUrl']; ?>" alt="">
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4><?php echo $e['title']; ?></h4>
<p><?php echo ysUtil::truncate($e['text_oneliner'], 85) ?></p>
</div>
</a>
</div>
<?php endforeach ?>
<?php else: ?>
<?php echo Notice::inline('Enterprises not found in this category or keyword') ?>
<?php endif; ?>
<!--end show single category with title-->
</div>
<!--end show category with title-->
<div class="row load_more_div">
<div class="col-sm-12 text-center">
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts collapse please_wait_btn_class">
<h4 style="margin-top: 7px; color: #fff;">Loading...</h4>
</button>
<button type="button" class="btn btn-sd btn-sd-green full-width load-more-posts load_more_btn_class">
Load More <i class="icon-arr-down"></i>
</button>
</div>
</div>
</div>
JS :
$(document).on('click','.filter_button',function(e){
e.preventDefault();
var category = [];
$.each($("input[name='category[]']:checked"), function(){
window.location.replace('/idea/frontend/explore/category/'+$(this).val());
});
});
Appreciate if anyone could help me in this matter.

Categories