So what I'm trying to achieve is to set the value of a hidden input so that I can send that value to a PHP file where this value will be used to execute a delete query.
The only problem that I'm facing is that it will only select the data-id from the first element, which is not what I want.
Here is the JQuery code, if any other files are required for more info I'll post those aswell.
$('document').ready(function(){
// Makes menu visibility toggable
$('#hamburger_btn').on("click", function() {
$('#sidemenu').toggleClass("show");
})
// Closes menu via separate button
$('#close_btn').on("click", function() {
$('#sidemenu').removeClass("show");
})
// Opens dialogbox
$('.openDialog').on("click", function() {
$('#dialog').addClass("showBox");
$('#overlay').addClass("showOv");
// Sets the input value in dialog
$('#post_id').val($('.openDialog').data("id")); // Here lies the problem
})
// Closes dialogbox
$('#closeDialog').on("click", function() {
$('#dialog').removeClass("showBox");
$('#overlay').removeClass("showOv");
// Sets value to empty and remove attribute value
$('#post_id').val('').removeAttr("value");
})
});
If this question has already been answered elsewhere please let me know aswell, because I couldnt find it.
EDIT:
The HTML
<?php
// Get all posts from DB
$sql = "SELECT * FROM cm_posts";
$stmt = $conn->prepare($sql);
$stmt->execute();
$results = $stmt->get_result();
?>
<section class="s-reset s-posts-overview">
<div id="top"></div>
<div class="posts-overview-content-wrapper">
<h3 class="s-title">Overview</h3>
<div class="post-cards-container">
<?php // Display all posts in a card ?>
<?php while($row = $results->fetch_assoc()):?>
<div class="post-card">
<h4 class="card-title"><?php echo $row["post_title"];?></h4>
<h5 class="card-sub-title"><?php echo $row["post_date"];?></h5>
<div class="card-btn">
<button>View</button>
<button class="btn-small openDialog" id="openDialog" data-id="<?php echo $row["post_id"];?>">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
<?php endwhile ?>
</div>
<div class="scroll-btn">
<a href="#top" class="button">
<i class="fas fa-arrow-up"></i>
</a>
<a href="#bottom" class="button">
<i class="fas fa-arrow-down"></i>
</a>
</div>
</div>
<div id="bottom"></div>
</section>
<div class="overlay" id="overlay"></div>
<div class="dialog" id="dialog">
<div class="dialog-content-wrapper">
<h3>Are you sure you want to delete this item?</h3>
<form action="data/post_db_files/delete-post-db.php" method="post" id="del_post_item">
<input type="hidden" id="post_id" name="post_id">
<input type="submit" value="Delete" id="del_post" class="del_post">
</form>
<button id="closeDialog" class="close-btn">Cancel</button>
</div>
</div>
Picture of the browser with devtools
The image shows where the id is supposed to appear, now if i click the delete button on any of these elements, I always get the value of 1, but if I select "hello 2" which has a post_id of 2 I want that id to appear in the hidden input. I hope this clears somethings up.
You are trying to get the data-id of the clicked item, but you are using $('.openDialog') => This would get all elements wich class is openDialog.
Use this instead:
$('#post_id').val($(this).data("id"));
you can also create on onClick function on this button like this & pass value in that function
<button id="openDialog onClick=openDialogButtonClick("<php echo $row["post_id"];>")>
after this just create function in your Js file or tag
function openDialogButtonClick(id){
//in this id param you will get id then set this id to your hidden field
$("#post_id").val(id);
}
Related
It use to work in the past and on other current websites but updating this site it no longer works. I had a pop up message with woocommerce notices, just saying the item has been added to cart, and with a close button using the javascript:void method. However it no longer works and when I look at the source code it's just out putting as "void(0)" instead of "javascript:void(0)"
I've tried other way such as just using # instead. Nothing works. Box won't close.
<div id="woocommerce-message">
<div class="close">
<a href="javascript:void(0)" class="closeEmbtn" onclick="closeEm()"
title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i>
</a></div>
<div class="success-cart">
<div class="woocommerce-message">
<?php foreach ( $messages as $message ) : ?>
<?php echo wp_kses_post( $message ); ?>
<?php endforeach; ?>
</div>
</div>
<div class="message-cart-buttons">
<a class="button" href="/cart/">View Cart/Checkout</a>
Continue Shopping
</div>
</div>
<script type="text/javascript">
function closeEm() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
I'm wanting just a way to close/hide the the "woocommerce-message" div when they click a close button.
--Edit --
I tried a different approach
<div class="close">
<a class="closeEmbtn" onclick="closeEm()" href="#" title="Close Notification"><i class="fa fa-times" aria-hidden="true"></i></a></div>
<script>
function closeEm() {
var x = document.getElementById("woocommerce-message");
x.style.display = "none";
}
</script>
But it's the "onclick=" isn't showing up in the source code either. Is there something in wordpress that could be blocking it?
I figured out a work around with a new script function
<script>
document.getElementById("close1").onclick = function() {
document.getElementById("woocommerce-message").style.display = "none";
}
</script>
which then doesn't have to rely on javscript:void(0) and onclick in the html.
But I am still curious to know why those elements suddenly disappeared from the output code
I want to send the value of one input text by a link to make and insert in other page. I don't wanna use a submit type because these elements are inside a form with submit for another page.
This is my code of devices_insert.php:
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a href="fabricants_insert.proc.php?link=<?php echo **SOLUTION** ?>" onclick="valor()">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I can get the value with a function but I don't know how to send it via url.
<script>
function valor(){
var bla = $('#add_fabricant').val();
}
</script>
And I pretend to send to fabricants.insert.proc.php for make the insert:
<?php
$sql_insert = "INSERT INTO Property (PRP_PRP_TYP_Id, PRP_Value) VALUES ('2', '$_REQUEST[**SOLUTION**]')";
echo($sql_insert);
?>
I have checked before many solutions in stackoverflow but I think are not useful for my case.
I suggest you to use ajax, e.g.:
<script>
$('#add_fabricant').on('blur', function(){
$.post(url, {
'SOLUTION': $(this).val()
}).done(function(rst){
//to do
})
})
</script>
I have solved the problem in a easy way:
<script>
function valor(){
$('#fabricant_link').attr('href', 'fabricants_insert.proc.php?new='+$('#add_fabricant').val());
}
</script>
Now with this script send the variable with the url and I can receive it in the other page (fabricants_insert.proc.php) for insert in the database.
<div class="cp_oculta" id="plus1" name="new_fabricant">
<input type="text" id="add_fabricant" name="add_fabricant" placeholder="New Fabricant">
<a onclick="valor()" id="fabricant_link">
<i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i>
</a>
</div>
I only need to add an id to the link to use the function.
I want to create a bootstrap modal for social sharing buttons in my wordpress blog. For the modal to be visible, I have to place it outside the post (loop) but its trigger (button) inside the post. I want to pass the URL and Title of the post to the Sharing Buttons inside the modal.
I have created two variables inside the post to get its URL and title:
<?php
// Get current post URL
$URL = get_permalink();
// Get current post title
$Title = str_replace( ' ', '%20', get_the_title()); ?>
Then, I created the trigger inside the post to display the modal
<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>
And in the modal body, I have many buttons, like
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>
What I want to do is to replace the $URL in href of Facebook and Twitter with the URL of the post and likewise the title.
I know that I have to use JavaScript, but I'm unable to figure out the correct syntax.
Will be thankful for help. :)
I did it like this:
In the trigger button, I set the data attributes as follows:
<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>
then got the facebook and twitter URLs in separate variables and then set the href attributes as follows:
<script>
$(document).on("click", "#socialbtn", function () {
var url = $(this).data('url');
var title = $(this).data('title');
var fburl = "https://www.facebook.com/sharer.php?u="+url;
var twurl = "https://twitter.com/share?url="+url+"&text="+title;
$("#facebook").attr("href", fburl);
$("#twitter").attr("href", twurl);
</script>
And in the modal body, used the anchor tags as follows:
<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>
You have to output them using PHP:
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
$(".ssk-facebook").attr("href", "YourNewURL");
$(".ssk-twitter").attr("href", "YourNewURL");
$( "#socialbtn" ).click(function() {
$(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");
$(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");
});
You have to identify which button the user have clicked on.
You can archive that by using unique IDs OR by adding hidden inputs or divs containing the correct hrefs for each post.
Then select those "href-container" relatively to the button and change the modal. ("closest(), parent(), nextAll() etc.)
Do you need code examples?
Use data attribute to add link with every post's share button:-
HTML
<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>
<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Share </h3>
</div>
<div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>
<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>
</div>
</div>
JS
<script>
$(document).on("click", ".open-share", function () {
var url = $(this).data('url');
var title = $(this).data('title');
$('#facebook').attr("href", "http://facebook.com?share="+url);
$('#facebook').attr("title", "http://twitter.com?share"+title);
$('#twitter').attr("href", url);
$('#twitter').attr("title", title);
// Initialize popup with Javascript.
$('#sharepopup').modal('show');
});
</script>
I have a page (menu.php) that retrieves and displays data from a database including name, image, price
I want to add a link when i click on the image take me to another page (single Product.php) , so i have only one page and i want its content depending on the image i have clicked
<div class="row">
<div class="col-md-9">
<div class="products-heading">
<h2>Our Salad</h2>
</div> <!-- End of /.Products-heading -->
<div class="product-grid">
<div class="row">
<?php
require('connection.php');
extract($_POST);
$rc=mysql_query("select * from menu where Item_Catagory = 'Salad'") or die(mysql_error());
while($MenuItem=mysql_fetch_array($rc))
{
?>
<!--To send item info to single-product page -->
<div class="col-md-4">
<div class="products">
<a href="single-product.php" >
<img src="images/<?php echo $MenuItem['Item_Image']; ?>" alt="" />
</a>
<a href="single-product.php">
<h4> <?php echo $MenuItem['Item_Name']?> </h4>
</a>
<p class="price"> <?php echo $MenuItem['Item_Price']?></p>
<div class="row lead">
<center><div id="stars" class="starrr"></div></center>
</div>
<a class="view-link shutter" href="#">
<i class="fa fa-plus-circle"></i>Add To Cart</a>
</div> <!-- End of /.products -->
</div> <!-- End Of /.Col-md-4 -->
<?php }
?>
</div> <!-- End of /.row -->
this is a part of the first page
I want to use get method to send the data to the another page, but i do not what is the appropriate method should i use javascript?if yes how?
Use id's to send data:
<a class="view-link shutter" href="Product.php?id="<?= $MenuItem['id'];?>">
In the other page $dataID = $_GET[id]; than query your DB where id=$dataID
change <a href="single-product.php">
to <a href="single-product.php?name=<?php echo $MenuItem['Item_Name']?>">
An example redirect would now be "single-product.php?name=food"
In single-product.php you could now retrieve the itemname with $_GET (superglobal).
In your script you would get it by $item = $_GET['name'], $item is now equal to 'food'.
To get information about this particular product "food", you query the database in single-product.php like so: "select * from menu where Item_Name = '".$item."'". Now append the result into your html.
To do this by ajax you would need to handle all the anchor tags, assuming you are using jQuery the following will do:
$('a').click(function(){
$.ajax({
url: this.href,
method: 'GET',
success: function(response){
console.log(response);
//here you can append the response to your html
}
});
return false; //prevent browser from redirecting
});
I've the following template, that render a list o links, each link has a code, and name like a <a name="codigo" class="integrantes" href="#000356">Name of someone<a>
<div class="panel-group" id="accordion-integrantes">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#integrantes>">
<?php echo $this->titulo; ?>
</a>
</h4>
</div>
<div id="integrantes" class="panel-collapse collapse in">
<div class="panel-body">
<div class="table-responsive" >
<table class="table table-hover" id="table-integrantes">
<?php foreach($this->integrantes as $key => $value ): ?>
<tr>
<td> <a name="codigo" class="integrantes" code="<?php echo $key; ?> "> <?php echo $value ?> </a></td>
</tr>
<?php endforeach; ?>
</table>
</div>
</div>
</div>
</div>
</div>
I wanna send a code vía get in the url, so I use the following function on javascript
$(function(){
$('.integrantes').bind( 'click',function(){
var code = $(this).attr( 'code');
window.location.href = "CVLACController.php?code=" + code;
});
});
When I press the link y send a code I and get a url lik http://testdomain.com/CVLACController.php?code=0000292915
It's fine, but Whe I generete a view with my controller and I use a collapse boostrap , that it use a id-of-div to expand o collapse a div, the problem is that it find the
id-of-div like a
http://tesdomain.com/CVLACController.php?code=0000292915#id-of-div
But this wrong, I hope something like
http://testdomain.com/CVLACController.php#id-of-div
Now, I don't know how to remove the url parameters without lost the value of the variable dispatched. To apply the accrodion boostrap
how to send the parameters via post in this case, the right way and work fine the collapse-bostrap?
or
how to remove the parameters of the url without lost the values of the variables and work fine the collapse-bostrap?
You can use a hidden form and post your code and it won't seen in the url. Here is an example;
<form id="send_code" action="CVLACController.php" type="POST">
<input type="hidden" name="code" id="code" value=""/>
</form>
you can put any above form anywhere in your page, and in your js;
$(function(){
$('.integrantes').bind( 'click',function(){
var code = $(this).attr( 'code');
$("#code").val(code);
$("#send_code").submit();
});
});
By doing this, you can post code value to CVLACController.php without any parameter in url. And do not forget to get code in CVLACController.php;
$code = $_POST["code"];