I would like to get the parent id of the element that was click, so in this case either #logo200_60_form or #logo400_120_form. I can then use that id in the rest of the code.
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels. As the id is in
the click handler is there a way of determining which parent caused the click.
JS :
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput- exists').on('click', function() {
$('form').get(0).reset();
$('#logo200_60').trigger('change');
$('#logo200_60_thumb').attr('src', 'http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image');
});
HTML :
<form action="#" role="form" id="logo200_60_form">
<p>Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60">
</span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form">
<p>Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" />
</div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"></div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120">
</span>
Remove
</div>
</div>
</div>
</form>
Use closest() with attribute-value selector.
$(this) // The element that is clicked
.closest('form') // First <form> ancestor
.attr('id') // Get the value of `id` attribute
I tried $(this).parent() but that gives me the immediate parent and I would need to go up a couple of levels.
You could use .parents() instead, Get the ancestors of each element in the current set of matched elements, optionally filtered by a selector :
$(this).parents('form').attr('id');
Hope this helps.
$('#logo200_60_form a.fileinput-exists, #logo400_120_form a.fileinput-exists').on('click', function() {
alert($(this).parents('form').attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" role="form" id="logo200_60_form">
<p> Please upload 200x60 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 60px;">
<img id="logo200_60_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="logo200_60_preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 60px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo200_60"
> </span>
Remove
</div>
</div>
</div>
</form>
<form action="#" role="form" id="logo400_120_form" >
<p> Please upload 400x120 png logo image</p>
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 400px; height: 120px;">
<img id="logo400_120_thumb" src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt="" /> </div>
<div id="preview" class="fileinput-preview fileinput-exists thumbnail" style="max-width: 400px; max-height: 120px;"> </div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new"> Select image </span>
<span class="fileinput-exists"> Change </span>
<input type="file" name="..." id="logo400_120"
> </span>
Remove
</div>
</div>
</div>
</form>
Related
I'm making a feedback popup. I want to make sure that the text in the input can come to my email when users press the submit button. I tried it in the way below, but the text in the input doesn't come to me by e-mail.
<div class="popup" style="z-index: 10">
<div class="contentBox">
<!--close_btn=======-->
<button id="close">X</button>
<div class="feedbackBox" style="padding-top: 3px">
<strong>Give feedback</strong>
<p style="margin: 10.96px">
Таны үлдээсэн сэтгэгдэл бидэнд маш их тус болох болно.
</p>
</div>
<!--emojies========-->
<div class="emojiBox">
<div class="emoji" style="margin-left: 56.81px">
<img src="icons/face emoji/smiling-face-with-heart-eyes.png" alt="" />
<p>Best</p>
</div>
<div class="emoji">
<img src="icons/face emoji/happy-face-with-enlarged-eyes.png" alt="" />
<p>Good</p>
</div>
<div class="emoji">
<img src="icons/face emoji/expressionless-face.png" alt="" />
<p>Bad</p>
</div>
<div class="emoji">
<img src="icons/face emoji/face-with-steam-from-nose.png" alt="" />
<p>Terrible</p>
</div>
</div>
<!--feedback-write==-->
<div class="wrie_feedback">
<p>Үлдэхийг хүссэн санал бодол, сэтгэгдлээ доор үлдээнэ үү.</p>
<input type="text" maxlength="200" required />
</div>
<!--send-btn========-->
<button id="send_feedback">Явуулах</button>
</div>
</div>
I am trying to write a HTML code to be able to reply to comments. The issue I'm having in the code below is when I click the reply button it appends the reply text area to both comment 1 and comment 2. What can I do to make it only append the text area to only the relevant comment.
<script>
function reply2comment() {
$("div#reply").html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>'+
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
}
</script>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/yy.jpg" alt=""/></div>
<div class="userName_mP">Tim</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 1</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
<div class="userReviews">
<div class="userDP_mP"><img src="display_pics/xx.jpg" alt=""/></div>
<div class="userName_mP">David</div>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt=""/>
<div class="review_mP"><p>comment 2</p></div>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" onClick="reply2comment()" value="reply"/>
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
You have 2 divs with the same id "reply". This makes your $("div#reply").html(... command append it to the both of them.
IDs should be unique. You shouldn't have more than 1 element with the same ID attribute.
If a jQuery selector matches more than one element, it will call the html( methon on both of them.
Here is what something you could do.
$(document).ready(function() {
$(".reply").bind("click",
function reply2comment(event) {
var $replyContainer = $(event.currentTarget).siblings("#reply");
$replyContainer.html('<form action="" method="GET" id="rati"><textarea style="border-radius:0em" name="comment" id="comment" placeholder="maximum 100 characters" maxlength="100" rows="4" cols="60" required></textarea>' +
'<div class="save_reply"><input type="submit" data-theme="e" id="send_reply" value="save"/></div></form>').trigger('create');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/yy.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">Tim</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 1</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
<div class="userReviews">
<div class="userDP_mP">
<img src="display_pics/xx.jpg" alt="" />
</div>
<a href="#" data-ajax="false">
<div class="userName_mP">David</div>
</a>
<img style="max-width:95%" class="reviewRateImage" src="ratingPlanets/hot_earth.png" alt="" />
<div class="review_mP">
<p>comment 2</p>
</div>
<!-------------------------------->
<div class="reply">
<input type="button" data-theme="e" value="reply" />
</div>
<!----reply text area----->
<div style="width:80%; margin-left:15%;" id="reply"></div>
</div>
I modified you user_reviews markup to group the reply div and the reviews together.
And changed the event handlers from markup to script, just to make it easier to bind events.
I using bootstrap-fileinput to load an image to my project. Is it possible to get the image details like the size, resolution, etc?
My code is:
<div class="col-md-4">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" >
<img src="<?php echo $src; ?>" style="width:200px;height:150px" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" id="imagem" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Escolher imagem </span>
<span class="fileinput-exists">Alterar </span>
<input id="imagem" type="file" name="...">
</span>
<a id="btnRemoverImagemCapa" href="#" class="btn red fileinput-exists" data-dismiss="fileinput"> Remover </a>
</div>
</div>
I work with jasny upload image preview plugin for bootstrap 3 But this does not work when preview image is empty. I need to show only no+image and select image button not empty div and change / remove button.
HTML:
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
<input type="hidden" name="myimage" value="1" />
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileinput-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div> <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span>
<input type="file" />
</span> Remove
</div>
</div>
How to fix this Problem?
DEMO : http://jsfiddle.net/Sambora/Y7hGh/2/
If I understood correclty your issue, I think this is because you used fileupload-exists instead of fileinput-exists. So the mark-up for the preview container should be like this:
<div class="fileinput-preview fileinput-exists thumbnail"
style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
You need to change: fileinput-exists in your top line of code to fileinput-new in case of no preview image is provided.
<div class="fileinput fileinput-exists" data-provides="fileinput" data-name="myimage">
To:
<div class="fileinput fileinput-new" data-provides="fileinput" data-name="myimage">
I'm trying to get the key attribute of the <td> tag from the below HTML code.
<td class="xedit editable editable-click editable-open" id="3" key="details" data-original-title="" title="">Javascript library </td>
<div class="popover fade top in editable-container editable-popup" style="top: 289px; left: 534px; display: block;">
<div class="arrow"></div>
<div class="popover-content">
<div>
<div class="editableform-loading" style="display: none;"></div>
<form class="form-inline editableform" style="">
<div class="control-group form-group">
<div>
<div class="editable-input" style="position: relative;">
<input type="text" class="form-control input-sm" style="padding-right: 24px;">
<span class="editable-clear-x">
</span>
</div>
<div class="editable-buttons">
<button type="submit" class="btn btn-primary btn-sm editable-submit">
<i class="glyphicon glyphicon-ok">
</i>
</div>
</div>
</div>
</form>
</div>
jQuery used :
var x = $(this).closest('div').find('.editable-container').closest('td').attr('key'); //Doesn't work
var x = $(this).closest('td').attr('key'); //Doesn't work
Try to use:
var x = $(this).closest('.editable-container').prev().attr('key');