Each articles are located in DIV tag. Want to make each DIV clickable and once i click DIV, dialog box should display with appropriate DVI values
$add->tbl_article_content, $add->tbl_article_image my JS dialog box appear for only 1st DIV. how should i do it for all DIV and pass relevant data.
PHP
<div class="row">
<?php
foreach ($data as $value) {
echo "<div class='col-lg-3'>";
echo "<p id='target'>" . $value->tbl_article_header . "</p>";
echo "</div>";
}
?>
Jquery
$( "#target" ).click(function() {
alert( "relevant DIV database values ??? " );
});
Instead of target as an id you should make it as class
<div class="row">
<?php
foreach ($data as $value) {
echo "<div class='col-lg-3'>";
echo "<p class='target'>" . $value->tbl_article_header . "</p>";
echo "</div>";
}
?>
$( ".target" ).click(function() {
alert( $(this).html() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='col-lg-3'>
<p class='target'>Value 1</p>
</div>
<div class='col-lg-3'>
<p class='target'>Value 2</p>
</div>
<div class='col-lg-3'>
<p class='target'>Value 3</p>
</div>
UPDATE
<div class="row">
<?php
foreach ($data as $value) {
echo "<div class='col-lg-3'>";
echo "<p class='target' data-article=".$add->tbl_article_content.">" . $value->tbl_article_header . "</p>";
echo "</div>";
}
?>
$( ".target" ).click(function() {
alert( $(this).attr('data-article') );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='col-lg-3'>
<p class='target' data-article="Articel 1">Head 1</p>
</div>
<div class='col-lg-3'>
<p class='target' data-article="Articel 2">Head 2</p>
</div>
<div class='col-lg-3'>
<p class='target' data-article="Articel 3">Head 3</p>
</div>
the id is unique inside a page ... use a class for a group of related div
<?php
foreach ($data as $value) {
echo "<div class='col-lg-3'>";
echo "<p class='target'>" . $value->tbl_article_header . "</p>";
echo "</div>";
}
?>
and for js
$( ".target" ).click(function() {
alert( "relevant DIV database values ??? " );
});
Related
php
<?php foreach ($forlop as $value) : ?>
<?php
$stringTitle = substr($value->getTitle(), 0, 1);
?>
<?php if(is_numeric($stringTitle)){
echo "<h3 id='other'>0-9</h3>";
} else{
echo "<h3 id=".strtolower($stringTitle).">".strtoupper($stringTitle)."</h3>";
}?>
<div class="item"><?php echo $value->getId(); ?></div>
<?php endforeach; ?>
<h3 id="c">C</h3>
<div class="item">1</div>
<div class="item">2</div>
<h3 id="d">D</h3>
<div class="item">3</div>
<div class="item">4</div>
<h3 id="e">E</h3>
<div class="item">5</div>
js
$('[id]').each(function (i) {
$('[id="' + this.id + '"]').slice(1).remove();
});
desired result
<h3 id="c">C</h3>
<div class="items-add">
<div class="item">1</div>
<div class="item">2</div>
</div>
<h3 id="d">D</h3>
<div class="items-add">
<div class="item">3</div>
<div class="item">4</div>
</div>
<h3 id="e">E</h3>
<div class="items-add">
<div class="item">5</div>
</div>
I want products with the same initials to be grouped together, I don't have an effective solution.
I want to add a wrapper tag to the tags that have a class item in the loop using jquery is there any way I can do this . or have any other treatment let me know about your ideas. Thanks.
You can solve it in php like this:
<?php $oldTitle = ""; ?>
<?php foreach ($forlop as $value) : ?>
<?php
$stringTitle = substr($value->getTitle(), 0, 1);
?>
<?php if($oldTitle !== $stringTitle && $oldTitle !== ""){
echo "</div>"; // close items add tag
?>
<?php if(is_numeric($stringTitle)){
echo "<h3 id='other'>0-9</h3>";
} else{
echo "<h3 id=".strtolower($stringTitle).">".strtoupper($stringTitle)."</h3>";
}?>
<?php if($oldTitle !== $stringTitle){
echo "<div class='items-add'>";
$oldTitle = $stringTitle;
?>
<div class="item"><?php echo $value->getId(); ?></div>
<?php endforeach; ?>
I am working on a section on my website where I need to toggle, add, and remove a class.
I have something that works really good but I was wondering if there is a simple solution to make my code better, organized, and much more readable than how it is now.
I have 4 buttons:
.info-button-left-1
.info-button-left-2
.info-button-right-1
.info-button-right-2
These buttons trigger a class to ad to the following divs:
.product-information-block-left-1
.product-information-block-left-2
.product-information-block-right-1
.product-information-block-right-2
And this is my code:
<?php
// Create id attribute allowing for custom "anchor" value.
$id = 'info-product-block-' . $block['id'];
if( !empty($block['anchor']) ) {
$id = $block['anchor'];
}
// Create class attribute allowing for custom "className" and "align" values.
$className = 'info-product-block';
if( !empty($block['className']) ) {
$className .= ' ' . $block['className'];
}
if( !empty($block['align']) ) {
$className .= ' align' . $block['align'];
}
?>
<section id="<?php echo esc_attr($id); ?>" class="<?php echo esc_attr($className); ?> container-fluid">
<div class="row">
<div class="container">
<div class="row product-heading">
<div class="col">
<h2><?php echo the_field('product_heading'); ?></h2>
<?php echo the_field('product_content'); ?>
</div>
</div>
<div class="row product-information">
<div class="col-left-product">
<div class="left">
<div class="product-name"><?php echo the_field('product_name_left'); ?></div>
<div class="product-year"><?php echo the_field('product_year_left'); ?></div>
<div class="product-button">
<?php
$link = get_field('product_link_left');
if( $link ):
$link_url = $link['url'];
$link_title = $link['title'];
$link_target = $link['target'] ? $link['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_url ); ?>" target="<?php echo esc_attr( $link_target ); ?>"><?php echo esc_html( $link_title ); ?></a>
<?php endif; ?>
</div>
</div>
<div class="right">
<div class="product-image">
<div class="info-button-left-1"></div>
<div class="info-button-left-2"></div>
<?php
$image = get_field('product_image_left');
if( !empty( $image ) ): ?>
<img src="<?php echo esc_url($image['url']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-left-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-left-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
</div>
<div class="col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button-right-1"></div>
<div class="info-button-right-2"></div>
<?php
$image_right = get_field('product_image_right');
if( !empty( $image_right ) ): ?>
<img src="<?php echo esc_url($image_right['url']); ?>" alt="<?php echo esc_attr($image_right['alt']); ?>" />
<?php endif; ?>
</div>
<div class="product-information-block-right-1">
<?php echo the_field('product_content_left'); ?>
</div>
<div class="product-information-block-right-2">
<?php echo the_field('product_content_left'); ?>
</div>
</div>
<div class="left">
<div class="product-name"><?php echo the_field('product_name_right'); ?></div>
<div class="product-year"><?php echo the_field('product_year_right'); ?></div>
<div class="product-button">
<?php
$link_right = get_field('product_link_right');
if( $link_right ):
$link_right_url = $link_right['url'];
$link_right_title = $link_right['title'];
$link_right_target = $link_right['target'] ? $link_right['target'] : '_self';
?>
<a class="buy-button" href="<?php echo esc_url( $link_right_url ); ?>" target="<?php echo esc_attr( $link_right_target ); ?>"><?php echo esc_html( $link_right_title ); ?></a>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$(".col-left-product .info-button-left-1").click(function() {
$(".product-information-block-left-1").toggleClass("active");
$(".product-information-block-left-2").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-left-product .info-button-left-2").click(function() {
$(".product-information-block-left-2").toggleClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-right-2").removeClass("active");
});
$(".col-right-product .info-button-right-1").click(function() {
$(".product-information-block-right-1").toggleClass("active");
$(".product-information-block-right-2").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
$(".col-right-product .info-button-right-2").click(function() {
$(".product-information-block-right-2").toggleClass("active");
$(".product-information-block-right-1").removeClass("active");
$(".product-information-block-left-1").removeClass("active");
$(".product-information-block-left-2").removeClass("active");
});
</script>
</section>
I am learning more and more every day. but I do think that there is a better way to do this.
Is there anyone who can give me an answer or a path to follow?
Thank you in advance.
To make the JS more generic you can use common class names on the elements. Then you can relate them to each other by using DOM traversal methods, such as closest() and find() to target the required element by matching indexes. Something like this:
let $productInfoBlocks = $('.product-information-block');
$('.info-button').on('click', e => {
let $el = $(e.target);
let $targetInfoBlock = $el.closest('.col').find('.product-information-block').eq($el.index()).toggleClass('active');
$productInfoBlocks.not($targetInfoBlock).removeClass('active');
});
.active { color: #C00; }
<!-- Note: I reduced the HTML to the relevant elements only -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row product-information">
<div class="col col-left-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-left-1</div>
<div class="info-button">info-button-left-2</div>
</div>
<div class="product-information-block">product-information-block-left-1</div>
<div class="product-information-block">product-information-block-left-2</div>
</div>
</div>
<div class="col col-right-product">
<div class="right">
<div class="product-image">
<div class="info-button">info-button-right-1</div>
<div class="info-button">info-button-right-2</div>
</div>
<div class="product-information-block">product-information-block-right-1</div>
<div class="product-information-block">product-information-block-right-2</div>
</div>
</div>
</div>
In similar case I used data attribute in combination with a general class name:
The general syntax for buttons:
<div class="info-button" data-place="left" data-targetId="1"></div>
The general code for target divs:
<div class="product-information-block" data-place="right" data-targetId="1">
<?php echo the_field('product_content_left'); ?>
</div>
The general code to handle all occurances:
$(".col-right-product .info-button").click(function() {
var place=$(this).data("place");
var targetId=$(this).data("targetId");
$(".product-information-block").removeClass("active");
$(".product-information-block[data-place='"+ place +"'][data-targetId='"+ targetId +"']").addClass("active");
});
I have these dynamic generted divs in HTML and populated with PHP data:
<?php foreach (get_all_locations() as $cards) : ?>
<div class="block">
<div class="centered">
<div class="div_container">
<p class="location_id_el"><?php echo $cards['id']; ?></p>
<span onclick="edit_button_request(<?php json_encode($cards); ?>)"><i class='fas fa-edit'></i></span>
<p><?php echo $cards['name']; ?></p>
<div id="main_address_div">
<div id="address_div">
<p><?php echo $cards['streetname'] . ' ' . $cards['streetnumber'] . ' '; ?></p>
</div>
</div>
</div>
</div>
</div>
<?php endforeach; ?>
now, I would like to navigate to a specific div using Javascript:
function myNavFunction(){
let i = document.getElementById('location_id_el').value; //here I get the id of that element
if(i === 4) document.location.href = ""; //here I want to navigate to the parent div of that element
}
any suggestions?!
I am actually stucking up with this problem for a day.I just want to perform edit operation on this script.My main page which is called customer-grid-screen.php
the code comes as follows
<?php include("header.inc.php");
include("left.inc.php");
include('config.php');?>
<div id="page-content-wrapper">
<?php include("pagetitile.inc.php"); ?>
<div id="page-content">
<div class="clearfix mrg10B"><span class="button-content">Add</span></div>
<div class="example-box">
<div class="example-code">
<table class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Details</th>
<th>Domain</th>
<th>Vertical</th>
<th>Taxanomy</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$result = mysql_query("SELECT * FROM customer_mast ORDER BY customer_id") or trigger_error(mysql_error());
while($row = mysql_fetch_array($result)){
if($row<1) {
echo "</tr>";
echo "<tr>";
echo "<td colspan='6' class='text-center pad25A'>No Record</td>";
echo "</tr>";
}
else
{
foreach($row AS $key => $value){
$row[$key] = stripslashes($value);
}
echo "<tr>";
echo "<td><a href='customer-screen.php'>" . nl2br( $row['customer_name']) . "</td>";
if(!empty($row['customer_details'])){
echo "<td><a href='customer-screen.php'>". nl2br( $row['customer_details']) . "</td>";
}
else{
echo "<td><a href='customer-screen.php'>-</td>";
}
if(!empty( $row['domain']))
{
echo "<td><a href='customer-screen.php'>". nl2br( $row['domain']) . "</td>";}
else{
echo "<td><a href='customer-screen.php'>-</td>";
}
if(!empty($row['vertical'])){
echo "<td><a href='customer-screen.php'>". nl2br( $row['vertical']) . "</td>";}
else{
echo "<td><a href='customer-screen.php'>-</td>";
}
if(!empty($row['taxanomy'])){
echo "<td><a href='customer-screen.php'>". nl2br( $row['taxanomy']) . "</td>";
}
else
{ echo "<td><a href='customer-screen.php'>-</td>";}
echo $row['customer_id'];
echo "<td>
<a href='javascript:?id={$row['customer_id']}' data-id={$row['customer_id']} class='btn small bg-blue-alt tooltip-button modal-customeredit' data-placement='top' title='Edit'><i class='glyph-icon icon-edit' ></i>
</a>
<a href='customer_delete.php?id={$row['customer_id']}' class='btn small bg-red tooltip-button confirm' data-placement='top' title='Remove'><i class='glyph-icon icon-remove'></i>
</a>
</td>";}}
?>
</tbody>
</table>
</div>
</div>
</div><!-- #page-content -->
</div>
</div>
<?php include("footer.inc.php"); ?>
I have to perform edit operation through modal pop up.i implemented the code as follows.
footer.inc.php
------------
<!-- Project Edit MAINLY SEE THIS-->
<div class="hide" id="modal-projedit" title="Edit Project Info">
<div class="pad10A">
<h3>Edit Project Info</h3>
<p class="font-gray-dark"> Fides Admin uses colors & styles from both the default theme color schemes and the included core color helpers. </p>
<div class="divider mrg25B"></div>
<form id="project-edit" action="" class="col-md-12 center-margin" method="">
<div class="form-row">
<div class="form-label col-md-3">
<label for="name">
Project Name:
<span class="required">*</span>
</label>
</div>
<div class="form-input col-md-9">
<input id="name" name="name" placeholder="Name" data-required="true" class="parsley-validated" type="text">
</div>
</div>
<div class="divider"></div>
<div class="form-row">
<div class="form-input col-md-8 col-md-offset-3">
<a href="javascript:;" class="btn medium primary-bg radius-all-4" id="project-edit-valid" onclick="javascript:$('#project-edit').parsley( 'validate' );" title="Validate!">
<span class="button-content">
Update
</span>
</a>
</div>
</div>
</form>
</div>
</div>
//modal window script:
$( ".modal-customeredit" ).click(function() {
var myGroupId = $(this).data('id');
alert( myGroupId); //i can able to alert the paricular row id i want to edit i dont know to pass it through php.
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
});
$('.ui-widget-overlay').addClass('bg-black opacity-60');
});
//same page php file
<?php
$id=???; (get id not working)
$sql="SELECT * FROM `customer_mast` where customer_id='$id'";
$result=mysql_query($sql);
if($result==false)
{
die(mysql_error());
}
else{
$row = mysql_fetch_array($result);}
if (isset($_POST['submit'])){
foreach($_POST AS $key => $value) { $_POST[$key] = mysql_real_escape_string($value); }
$sql = "UPDATE `customer_mast` SET `customer_name` = '{$_POST['customer_name']}' , `customer_details` = '{$_POST['customer_details']}',`domain` = '{$_POST['domain']}' ,`vertical` = '{$_POST['vertical']}' ,`taxanomy` = '{$_POST['taxanomy']}' WHERE `customer_id` = '$id' ";
mysql_query($sql) or die(mysql_error());
echo (mysql_affected_rows()) ? "Edited row.<br />" : "Nothing changed. <br />";
header("Location:customer-grid.php");}
?>
Can anybody please explain me how i can pass that id value to the php script on same page and peform my edit operation.I can explain more if you have doubts,I have gone through many things to to make it correct.Nothing helped me.Please give your suggestion.
You should see how AJAX is working to pass a value to PHP.
$( "#modal-customeredit" ).dialog({
modal: true,
minWidth: 700,
minHeight: 200,
dialogClass: "modal-dialog",
show: "fadeIn"
buttons: {
Edit: function() {
// Sample ajax request ( see the documentation)
$.ajax({
type: "POST",
url: "request.php",
data: { id: myGroupId }, // data retrieve on server-side ($_POST['id'])
dataType : 'html|json|...' // expected data returned
})
.success(function( msg ) {
alert( "Data Saved: " + msg );
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
// stop event when form is submit
return false;
});
You have all the element to do it by yourself. Just one more advice, try to separate your files. For instance execute your treatment in another file as request.php.
Edit :
Sample for your request.php (I will return json).
<?php
header('Content-type: application/json'); // Tell the app that you want return json
$id= $_POST['id']; // correspond to your retrieved data in ajax function
// ... Your SQL request and other treatment
// The result return
echo json_encode($result);
?>
The data are now send back to your ajax function in .success( data ).
Why is it that when I click on the button the status refreshes, but the button dissappears?
JS
$( ".refreshstatus" ).click(function(){
$( ".navplayers" ).load('stats.php');
});
CSS
.refreshstatus{
font-family:'Noto Sans';
font-weight: 900;
text-align:center;
background-color:tomato;
}
HTML
<div class="refreshstatus">Refresh</div>
stats.php
<?php include ("statsfunction.php"); ?><?php if( ( $Players = $Query->GetPlayers( ) ) !== false ): foreach( $Players as $Player ): ?>
<img src="https://minotar.net/avatar/<?php echo htmlspecialchars( $Player ); ?>/32"><div class="playerinfo" id="<?php echo htmlspecialchars( $Player ); ?>"><?php echo htmlspecialchars( $Player ); ?></div></img>
<?php endforeach; else: ?>
No players
<?php endif; ?>
<p><b>Players <?php echo "<font color='green' ><?php $players_online ?></font>" ?> online</b></p>
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
<div class="refreshstatus">Refresh</div>
</div>
Ok, your div.refreshstatus is being overlapped by your loaded content. Make a proper button or use an <a> link.
Something like...
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
Refresh
</div>
Or a button...
<div class="col-sm-3 navplayers">
<?php include ("stats.php"); ?>
<button type="button" class="refreshstatus">Refresh</button>
</div>