Bootstrap modal getting disappeared Immediately Wordpress - javascript

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

Related

Javascript to fill a div

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>

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

How can I show and hide different <section> of my html page using jquery?

I have 2 sections on a results page, one showing a results table and one showing various charts based on the results, thee are in <section> tags, the default one shown is the table: <section class="results_table" style="display: inline"> how can I use jquery to hide this and show the chart section: <section class="results_charts" style="display: none"> when the relitive button is clicked
<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>
Im currently trying this I found in a similar question:
$("#chart").on("click", "#switch", function(e){
$("#results_table, #results_charts").toggle();
});
But I dont know how to add the second button, also Its not toggling my views :)
Secondly if anyone can recommend any good javascript/jquery tutorials?
***** HTML PAGE *****
This page is being loaded as a subview from my controller: Search/execute_search
<section class="results_head">
<div class="row">
<div class="col-md-12"><!--<?php if(empty($chart)){echo "EMPTY" . '<br />';} else{ print_r($chart);} ?>--></div>
</div>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 btn_down"><button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-arrow-down" /> Bottom <span class="glyphicon glyphicon-arrow-down" /></button></div>
<div class="col-md-4"><input type="hidden" id="chartData" value='<?php echo $chart; ?>' /></div>
</div>
<div class="row">
<div class="col-md-4">
<div class="results_count">
<h3><strong>Your Search:</strong></h3>
<p>Results Table: <font class="text-primary"><strong><?php if($_POST['tbl'] === 'p_results'){echo "New Table";} else{echo "Old Table"; } ?></strong></font></p>
<p class="cat">Catogory: <font class="text-primary"><strong><?php if($_POST['col'] === 'code'){echo "test";} else{echo str_replace('_', ' ', $_POST["col"]);} ?></strong></font></p>
<p><?php
if($_POST['col'] == 'result' && $_POST['res'] == NULL){echo 'Showing ' . '<font class="text-primary">' . '<strong>' . "ALL" . '</strong>' . '</font>' . ' results';}
elseif ($_POST['col'] == 'result'){echo 'Showing all results for: ' . '<font class="text-primary">' . '<strong>' . $_POST["res"] . '</strong>' . '</font>';}
else{;} ?>
</p>
<p style="text-transform: capitalize;"><?php if($_POST['res']){echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . $_POST['res'] . ' Results' . '</strong>' . '</font>';} else{echo 'Result set: ' . '<font class="text-primary">' . '<strong>' . "All Results" . '</strong>' . '</font>';} ?></p>
<p><?php if($_POST['sdate'] && $_POST['edate']){echo 'Within Date Ranges: ' . '<font class="text-primary">' . '<strong>' . $_POST['sdate'] . '</strong>' . '</font>' . ' and ' . '<font class="text-primary">' . '<strong>' . $_POST['edate'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No Date Range was specified" . "</strong>" . "</font>";} ?></p>
<p><?php if($_POST['terms']){echo 'With the following keywords: ' . '<font class="text-primary">' . '<strong>' . $_POST['terms'] . '</strong>' . '</font>';} else{echo "<font class='text-danger'>" . "<strong>" . "No keywords were specified" . "</strong>" . "</font>";} ?></p>
<hr />
<p><?php echo "Your Search Returned" . " " . '<strong>' .'<font class="text-primary">' . count($results) . '</font>' . '</strong>' . " " . "Results, " .
"out of " . '<strong>' . '<font class="text-primary">' . count($totals) . '</font>' . '</strong>' . " records."?></p>
</div>
</div>
<?php if(empty($chart)){echo "<div class='col-md-4'>" . "</div>";} else{echo "<div class='col-md-4 chart' id='donut'>" . "</div>";} ?>
<div class='col-md-4'></div>
</div>
<div class="row">
<div class="col-md-12 select_menu">
<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>
</div>
</div>
</section>
<section class="results_table" style="display: inline">
<div class="row tbl_row">
<div class="col-md-12">
<table class="tbl_results">
<thead>
<tr>
<th><?php if($results){echo implode('</th><th>', array_keys(current($results))); } elseif($_POST['terms']){echo "No Results were found to match: " . $_POST['terms']; }else {echo "No Results Found"; } ?></th>
</tr>
</thead>
<tbody>
<tr>
<?php foreach ($results as $row): array_map('htmlentities', $row); ?>
<tr>
<td><?php echo implode('</td><td>', $row); ?></td>
</tr>
<?php endforeach; ?>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="top_btn">
<a href="#top"><button type="button" class="btn btn-primary">
<span class="glyphicon glyphicon-arrow-up"></span> Back to Top <span
class="glyphicon glyphicon-arrow-up"></span></button></a>
<a name="bottom">
</div>
</div>
<div class="col-md-8"></div>
</div>
</section>
<section class="results_charts" style="display: none">
<div class="row">
<div class="col-md-12 chart2" id="bar"></div>
</div>
<div class="row">
<div class="col-md-12 chart2" id="line"></div>
</div>
<div class="row">
<div class="col-md-12 chart2" id="area"></div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
</section>
Use this to show the charts section
$("#chart").on("click", function(){
$("#results_table").hide();
$("#results_charts").show();
});
Use this show only the results
$("#table").on("click", function(){
$("#results_charts").hide();
$("#results_table").show();
});
You need to do like below:-
$(document).ready(function(){
$("#table, #chart").on("click",function(e){
$(".results_table, .results_charts").toggle();
});
});
Example:-
$(document).ready(function(){
$("#table, #chart").on("click",function(e){
$(".results_table, .results_charts").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="results_table" style="display: inline">Results Table</section>
<section class="results_charts" style="display: none">Results Charts</section>
<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>
Or without toogle() do like below:-
$(document).ready(function(){
$("#chart").on("click", function(){
$(".results_table").hide();
$(".results_charts").show();
});
$("#table").on("click", function(){
$(".results_charts").hide();
$(".results_table").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="results_table" style="display: inline">Results Table</section>
<section class="results_charts" style="display: none">Results Charts</section>
<div class="btn-group">
<button type="button" id="table" class="btn btn-primary">Table</button>
<button type="button" id="chart" class="btn btn-primary">Charts</button>
</div>
Working fiddle with your updated HTML:- https://jsfiddle.net/42ahxqu3/ Or https://jsfiddle.net/svL8ugzr/ (i removed php variables to show you in a clean manner)
This solution will allow you to add more sections and corresponding buttons easily. Just set the section you want to show as an attribute of the button.
I've also added an active class so it's obvious what's happening for the user.
$(function() {
$('.toggle-button').first().addClass('active'); // ADD ACTIVE STYLE TO FIRST BUTTON
$('.toggle-content').not(':first').hide(); // KEEP THE FIRST SECTION SHOWING BUT HIDE OTHERS
$('.toggle-button').on('click', function() {
$('.toggle-content').hide(); // HIDE ALL SECTIONS
$('.toggle-button').removeClass('active'); // MARK ALL BUTTONS INACTIVE
var toggleElementId = $(this).attr('data-toggle'); // GET ID FROM DATA ATTRIBUTE
$(toggleElementId).show(); // SHOW CORRECT SECTION
$(this).addClass('active'); // MAKE CURRENT BUTTON ACTIVE
});
});
.active {
background-color: #f0f;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<button data-toggle="#table" class="toggle-button btn btn-primary">Table</button>
<button data-toggle="#charts" class="toggle-button btn btn-primary">Charts</button>
</div>
<section class="toggle-content" id="table">Some stuff</section>
<section class="toggle-content" id="charts">Some other stuff</section>

Remove Post View Count at the end of the Content

I have a 4.3 wordpress system that i install on it the "Orca Theme".
I notice i have duplicate indication of Post View Count:
I want to remove the First Indicator.
I try to look around amd search in the theme code and didnt find what display the First indicator.
postformat/standart.php:
<?php
$thumb_id = get_post_thumbnail_id();
$thumb_url = wp_get_attachment_image_src($thumb_id, 'postlist', true);
$title_meta = get_post_meta($post->ID, 'title_style', true);
$title_meta = ($title_meta == ('banner' || 'title')) ? $title_meta : "standard";
$category = get_the_category();
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> class="post standard">
<?php if($title_meta == "banner"){ ?>
<a class="basicfeature" href="<?php esc_url(the_permalink()); ?>" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');"></a>
<h1><?php the_title(); ?></h1>
<?php }elseif($title_meta == "feature"){ ?>
<a href="<?php esc_url(the_permalink()); ?>" class="largeimage postfeature" style="background-image:url('<?php echo esc_url($thumb_url[0]); ?>');">
<div class="shadow"></div>
<h1><?php the_title(); ?></h1>
</a>
<?php }else{ ?>
<h1><?php the_title(); ?></h1>
<?php } ?>
<div class="info">
<div class="left">
<i class="issticky fa fa-thumb-tack "></i><img src="http://0.gravatar.com/avatar/<?php echo esc_attr(md5(get_the_author_meta('user_email'))); ?>?s=32" alt="author" class="minigravatar"><?php the_author(); ?>
</div>
<div class="right">
<i class="fa fa-clock-o"></i><?php echo esc_html(orca_get_time()); ?>
<div class="category"><i class="fa fa-tags"></i>
<?php if($category){
echo '' . $category[0]->name.' ';
} ?>
</div>
</div>
</div>
<div class="postcontents">
<?php the_content('', FALSE, ''); ?>
</div>
<div class="footer">
<?php esc_html_e('Read More', 'orcawp'); ?>
<i class="fa fa-comments"></i><?php echo esc_html(get_comments_number($post->id)); ?>
<?php if(get_post_meta($post->ID, '_count-views_all', true) != ''){ ?>
<i class="fa fa-bullseye"></i><?php echo esc_html(get_post_meta($post->ID, '_count-views_all', true)); ?>
<?php } ?>
</div>
Solve it!
I just Deactivated the "BAW Post Views Count" plugin and now it removed!

How to access pages based on product ids

I am having a problem in navigating from one page to another.
<?php
while($row = mysqli_fetch_array($result)) { ?>
<div class="list">
<p><?php echo $row['productname']?></p>
<div class="images">
<img src="<?php echo 'images/'. $row['image'] ?>" style="max-width:100%;height:auto;" />
</div>
}
<div class="text">
<p>
<?php echo $row['description'] ?>
</p>
</div>
<div class="clear"></div>
</div>
<?php
Here the problem is that when I click on the product link it does not take to the desired product description page. Rather than it is redirected to the same commodities page. So i am not understanding what to do.So please help me to find out my error..
You missed php tag inside your markup. please have a look updated code
<?php while ($row = mysqli_fetch_array($result)) { ?>
<div class="list">
<p><?php echo $row['productname']; ?></p>
<div class="images">
<img src="<?php echo 'images/' . $row['image']; ?>" style="max-width:100%;height:auto;" />
</div>
<!-- remove this end curly braces from ur markup-->
<div class="text">
<p>
<?php echo $row['description']; ?>
</p>
</div>
<div class="clear"></div>
</div>
<?php } ?>
<!-- close while loop in proper place. as of now $row['description'] outside from while loop -->
Syntax error in your php statements..
Echo statements are not terminated with (;)
<?php
while($row = mysqli_fetch_array($result)) { ?>
<div class="list">
<p><?php echo $row['productname']; ?></p>
<div class="images">
<img src="<?php echo 'images/'. $row['image']; ?>" style="max-width:100%;height:auto;" />
</div>
<div class="text">
<p>
<?php echo $row['description']; ?>
</p>
</div>
<div class="clear"></div>
</div>
<?php }?>
<?php

Categories