How can I delete image uploaded? - javascript

My html code is like this :
<input type='file' multiple/>
<?php
for($i=0;$i<5; $i++) {
?>
<div class="img-container" id="box<?php echo $i ?>">
<button style="display: none;" type="submit" class="btn btn-danger show-button">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<?php
}
?>
My javascript code is like this :
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
$(this).find('.show-button').show();
}
});
};
$(".show-button").click(function(){
$(this).find('img').hide()
});
Demo and full code is like this : http://phpfiddle.org/main/code/uu9x-w50q
I try use hide the image. But it does not work
How can I solve this problem?

You should use parent method in order to achieve this, because image DOM element belongs to the parent of .show-button.
$(document).on('click',".show-button",function(){
var imgTmpl = '<div class="img-container">'+
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
$(this).parent().remove();
$('body').append(imgTmpl);
});
Here is solution.

Try with closest()
$(".show-button").click(function(){
$(this).closest('.img-container').find('img').hide()
//$(this).closest('.img-container').children().remove() used for remove the all child element of the `.img-container`
console.log('hi')
});

Related

How to change the value of a div in jquery

I have this code right here and I want to change as I commented out on my code.
What function is the right one to use in this scenario?
<span id="value" style="margin: 3px;">
<?php
if(get_forum_likes($id_forum, $pdo) < 0){
echo '<span style="color:#fb3f6c;">'.number(get_forum_likes($id_forum, $pdo))."</span>";
} elseif(get_forum_likes($id_forum, $pdo) > 0){
echo '<span style="color:#25804a;">'.number(get_forum_likes($id_forum, $pdo))."</span>";
} else {
echo number(get_forum_likes($id_forum, $pdo));
}
?>
</span>
<i id="<?php echo $id_forum; ?>" class="vote_up fas fa-angle-up"></i>
<script>
$(document).ready(function(){
$("i.vote_up").click(function(){
var value_no = document.getElementById("value");
var forum_id = $(this).attr('id');
$.post("game/forum/vote_post.php",
{
forum_id: forum_id,
type: 0
},
function(res, status){
// Update 'value' and add 1 to 'value_no' without page refresh
}
);
});
});
</script>
Here is a vanilla solution.
...
function(res, status) {
let spanNode = value_no.childNodes[0];
let newValue = parseInt(spanNode.innerHTML) + 1; // Make sure the text inside span is integer
spanNode.innerHTML = "New value: " + newValue;
}
try with $("#value").html() or $("#value").text()
<span id="value" style="margin: 3px;">
<?php
if(get_forum_likes($id_forum, $pdo) < 0){
echo '<span style="color:#fb3f6c;">'.number(get_forum_likes($id_forum, $pdo))."</span>";
} elseif(get_forum_likes($id_forum, $pdo) > 0){
echo '<span style="color:#25804a;">'.number(get_forum_likes($id_forum, $pdo))."</span>";
} else {
echo number(get_forum_likes($id_forum, $pdo));
}
?>
</span>
<i id="<?php echo $id_forum; ?>" class="vote_up fas fa-angle-up"></i>
<script>
$(document).ready(function(){
$("i.vote_up").click(function(){
var value_no = document.getElementById("value");
var forum_id = $(this).attr('id');
$.post("game/forum/vote_post.php",
{
forum_id: forum_id,
type: 0
},
function(res, status){
$("#value").html();
value_no++
}
);
});
});
</script>

Laravel: rating system Javascript display

I'm making a review system. I'm done with the post, but the get and display wont perfectly work. Can you please help me with this.
HTML:
<input type="hidden" id="aa" value="{{$re->rating}}" />
<div id="d"></div>
JAVASCRIPT:
var wrapper2 = document.getElementById("d");
var rating = 0;
var myHTML2 = '';
var rating = document.getElementById("aa").value;
var nonee= 0;
nonee = 5 - rating;
for (var w = 0; w <rating; w++) {
myHTML2 += '<span class="fa fa-star"></span>';
}
for (var e = 0; e <nonee; e++) {
myHTML2 += '<span class="fa fa-star-o"></span>';
}
wrapper2.innerHTML = myHTML2;
The result should be three reviews along with the rating but it will only display the rating in the first review, the rest none.
Your solution can only be used to show 1 rating/review. If you need to show more reviews, you need to modify it with some iterations/loops.
If you don't use AJAX for fetching more reviews, you can just loop through all the reviews with blade template since you're using laravel.
#foreach($ratings as $re)
<div class="d">
#for($i = 0; $i < $re->rating; $re++)
<span class="fa fa-star"></span>
#endfor
#for($i = 0; $i < 5 - $re->rating; $re++)
<span class="fa fa-star-o"></span>
#endfor
</div>
#endforeach
If you're using AJAX, you can format the output of your ratings with JSON like such:
[
{"review_id":1, "rating":3, "review":"not so bad"},
{"review_id":2, "rating":5, "review":"good"},
{"review_id":3, "rating":5, "review":"perfect"}
]
and decode it with javascript, then let javascript handle the HTML generation:
<div id="containerRating"></div>
<script>
$.ajax({
url: "http://...",
type: "GET",
success: function(data){
var ratings = JSON.parse(data);
for (var i=0; i<ratings.length; i++) {
var ratingHtml = "<div class='review'>";
for (var j=0; j<ratings[i]; j++) {
ratingHtml = ratingHtml + "<span class='fa fa-star'></span>"
}
for (var j=0; j<5-ratings[i]; j++) {
ratingHtml = ratingHtml + "<span class='fa fa-star-o'></span>"
}
ratingHtml = ratingHtml + "</div>"
$("#containerRating").append(ratingHtml);
}
});
</script>
try this. i used modal here because its been tested with modal. you can change it to out on a non modal. the result is display on a table using ajax :
<div id="view" class="modal fade" >
<div class="modal-dialog box box-default" role="document">
<div class="modal-content">
<div class="modal-header" style="background-color:#4287f5;color:white">
<p class="modal-title">Record</p>
</div>
<form class="form-horizontal" method="post" role="form">
{{ csrf_field() }}
<div class="modal-body">
<div class="table-responsive">
<table id="tableID" class="table table-bordered table-striped table-highlight">
<thead>
</thead>
<tbody style="margin-left:10px;">
</tbody>
</table>
</div>
</div>
<div class="modal-footer" style="background-color:#4287f5;color:white">
<button type="button" id="btnclose" class="btn btn-primary btn-xs" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
//ajax
<script>
function getResult(x)
{
var ID = x;
//alert(ID);
$.get('/url?recordID='+ID, function(data){
var html = '';
html +='<tr bgcolor="#c7c7c7" align="center">';
html +='<th align="center">Review</th>';
html +='<th align="center">Ratings</th>';
html +='</tr>';
$.each(data,function(index,obj){
html +='<tr>';
html +='<td>'+ obj.review+'</td>';
html +='<td>'+ obj.ratings+'</td>';
}
html +='</tr>';
$('#tableID').html(html);
});
});
$("#view").modal('show')
}
</script>

Javascript inside controller array not work

I want to make switch button with action form on change inside a controller, javascript can't work, no request...
this my controller include jquery in controller ajax server side datatables...
ajax_list.php
public function ajax_list()
{
$list = $this->model_masterdata_menu->get_datatables();
$data = array();
$no = $_POST['start'];
foreach ($list as $i => $menu) {
$no++;
$row = array();
$row[] = $menu->menu_id;
$row[] = $menu->menu_nama;
$row[] = $menu->menu_url;
if($menu->statusmenu_nama == 'visible')
{
$row[] = '<form id="form_['.$i.']" method="post" action="'.site_url().'/menu/visible/'.$menu->menu_id.'">
<label class="switch">
<input type="hidden" value="0" name="cbcheck">
<input type="checkbox" name="visible['.$i.']" id="cb_['.$i.']" class="cb_['.$i.']" checked>
<span class="slider round"></span>
</label>
</form">
<script language=\"text/javascript\">
$(function(){
$("#cb_['.$i.']").on("change",function(){
$("#form_['.$i.']").submit();
});
});
</script>
';
}else{
$row[] = '<form id="form2_['.$i.']" method="post" action="'.site_url().'/menu/unvisible/'.$menu->menu_id.'">
<label class="switch">
<input type="hidden" value="1" name="cbcheck">
<input type="checkbox" name="visible['.$i.']" id="cb2_['.$i.']" class="cb2_['.$i.']" value="1" >
<span class="slider round"></span>
</label>
</form>
<script language=\"text/javascript\">
$(function(){
$("#cb2_['.$i.']").on("change",function(){
$("#form2_['.$i.']").submit();
});
});
</script>
';
}
$row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Edit" onclick="edit('."'".$menu->menu_id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
<a class="btn btn-sm btn-danger" href="javascript:void(0)" title="Hapus" onclick="hapus('."'".$menu->menu_id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
$data[] = $row;
}
$output = array(
"draw" => $_POST['draw'],
"recordsTotal" => $this->model_masterdata_menu->count_all(),
"recordsFiltered" => $this->model_masterdata_menu->count_filtered(),
"data" => $data,
);
//output to json format
echo json_encode($output);
when I switch the button, no request.
Can anyone help me? Thank you very much
You can't load JS through Ajax like that.
You should give all the elements you want to add events for the same class:
<input type="checkbox" name="visible['.$i.']" id="cb_['.$i.']" class="some-class" checked>
Then you should add the event binding on that class on the main page instead, like so:
$(function() {
// Registering an event this way, the event will also be added to all elements
// appended to the DOM at a later point, like through ajax.
$('body').on('change', '.some-class', function () {
// Submit the closest form
$(this).closest('form').submit();
});
});
You should try like this way:
change your selector id to class and remove javascript code from controller
$(function(){
$("body").delegate(".cb2","change",function(){
$(this).closest('form').submit
//$("#form2_['.$i.']").submit();
});
});

How do I show back the plus button when delete image?

My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
<button style="display: none;" class="btn btn-danger show-button">
<i class="glyphicon glyphicon-trash"></i>
</button>
</div>
<?php } ?>
My javascript code is like this :
...
$(document).on('click',".show-button",function(){
var imgTmpl = '<div class="img-container">'+
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
$(this).parent().remove();
$('body').append(imgTmpl);
});
Demo and full code is like this : http://phpfiddle.org/main/code/9kb1-r47h
My problem is : when I uploaded 5 images. Then I delete 1 image. Plus icon does not appear again.
How can I solve this problem?
change your code like this , it is work for me,
<style type="text/css">
.img-container {
width: 162px;
height: 142px;
border: 2px solid black;
float: left;
margin-right: 5px;
position: relative;
}
.delete-button {
position: absolute;
left: 0;
}
.upload-add-product {
margin-top: 55px;
margin-left: 55px;
}
.img-container .show-button { position: absolute; top: 0; left: 0; }
</style>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="images-area">
<?php
for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0" data-index="<?=$i?>">
<?php if ($i == 0): ?>
<button type="submit" class="btn btn-primary upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
<?php endif; ?>
</div>
<?php } ?>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).on('click','.upload-add-product',function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
$(this).attr('data-status',1);
//$(this).find('.upload-add-product').hide();
//$(this).find('.show-button').show();
var i = $(this).closest('.img-container').data('index');
var imgTmpl ='<img height="142" width="162" src='+e.target.result+'>'+
'<button type="button" class="btn btn-danger delete-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button>';
$('#box'+i).html('');
$('#box'+i).append(imgTmpl);
if(i<5) {
$('#box'+(i+1)).html('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('.upload-add-product').show();
return false;
}
})
}
});
};
$(document).on('click','.delete-button',function(){
var i = $(this).closest('.img-container').attr('data-index');
$('#box'+i).remove();
$('.images-area').append('<div class="img-container" data-status="0"></div>');
var blank = 0;
$('.img-container').each(function(i){
$(this).attr({'id':'box'+i,'data-index':i});
if(($(this).attr('data-status') == 0) && (blank == 0)) {
console.log("k");
blank = i;
}
});
if($('.img-container').find('.upload-add-product').length == 0) {
$('#box'+blank).append('<button type="button" class="btn btn-primary upload-add-product">'+
'<i class="glyphicon glyphicon-plus"></i>'+
'</button>');
}
});
</script>
Demo is here
May be it helps you...
Reason
You didn't even add the + button back in. I'd also suggest you look at template literals to help with formatting and multi-lined code.
You need to make sure that when you reach the end, that instead of having it set as none and waiting for something else to prompt it back to block or w/e, show it as block or w/e, intially
Updated parts:
$(document).on('click',".show-button",function(){
let pos;
let i = 0;
let parent = $(this).parent()[0];
$(".img-container").each( function() {
if (this == parent)
{
pos = i;
}
i++;
});
let show = (pos === 4) ? "block" : "none";
var imgTmpl = '<div class="img-container" data-status="0">'+
'<button style="display: ' + show +'" type="submit" class="btn btn-primary upload-add-product" onclick="upload_click();">' +
'<i class="glyphicon glyphicon-plus"></i>' +
'</button>' +
'<button style="display: none;" type="submit" class="btn btn-danger show-button">'+
'<i class="glyphicon glyphicon-trash"></i>'+
'</button></div>';
//console.log($(this).parent());
$(this).parent().remove();
$('body').append(imgTmpl);
});
function upload_click()
{
$("#upload-file").click();
}
http://phpfiddle.org/main/code/xzq8-h3ub
Prerequisite:
Assign id to your delete button
Then On click of delete button, check if id =0 and accordingly apply style to your plus button as below.
Last step is to append newly created plus button to current div.
$(".btn-danger").click(function(){
$id=this.id;
if($id!=0){
var r= $('<button type="submit" class="btn btn-primary upload-add-product" style="display:none;">
<i class="glyphicon glyphicon-plus"></i>
</button>');
}
else{
var r= $('<button type="submit" class="btn btn-primary upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>');
}
$(this).parent().append($r);
});
Let me know if this doesn't work.

how to disable link after clicking once with jquery

How can i disable a link after clicking on it once with jquery . on clicking the link its adding an input field inside a div with unique id. I am getting the values in a dropdown from a variable.
$(document).ready(function() {
var count = 1;
$(".block").on('click', function(){
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});
<?php if ($table_name == "questions") {?>
<div class="dropdown" >
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Add Block
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<?php
$question_fields = $this->db->list_fields('questions');
for ($i=0; $i<count($question_fields); $i++){?>
<li><a class="block" ><?php echo $question_fields[$i]?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
If adding some CSS is ok for you this is the simplest I had found:
Javascript:
$(document).on('click', '#buttonSelector', function () {
$(this).addClass('disabled');
});
CSS:
.disabled {
/* if you also want it to fade a bit:
opacity: 0.5
*/
pointer-events: none;
cursor: default;
}
Using the following code will set a variable true once the link is clicked. After the link is clicked again it will ignore the click.
$(document).ready(function() {
var count = 1;
var clicked = false;
$(".block").on('click', function(e){
if(clicked) {
e.preventDefault();
}
clicked = true;
$("#textInput").append(
'<div class="cgparent" id="input'+count+'">' +
'<div class="col-md-8">' +
'<input class="form-control" type="text">' +
'</div>' +
'<div class="col-md-4">' +
'<button style="margin-right: 5px" class="btn btn-info" id="edittext"><i class="fa fa-pencil" aria-hidden="true"></i></button>' +
'<button class="btn btn-danger" type="button" id="removebtn"><i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
'</div>' + '<br><br>' +
'</div>'
).show();
count++;
});
});
I would do it by setting a counter. If the counter is higher than zero, that means the link has been clicked.
<a class="once-only" href="/do-stuff">Click me</a>
<script type="text/javascript">
$(document).ready(function ($) {
var clicked = 0;
$(document).on('click', '.once-only', function () {
if (clicked != 0) {
return false;
}
var clicked = clicked + 1;
});
});
</script>
Update
The comments brought this solution:
<script type="text/javascript">
$(document).ready(function ($) {
$(document).on('click', '.once-only', function () {
​$(this).contents().unwrap();​​
});
});
</script>
The above will simply remove the anchor.

Categories