I have the following HTML/JSP structure:
<div class="col-md-12 task task-box">
<c:if test="${not empty task.titulo}">
<div class="row">
<div class="col-md-12">
<h3 class="task-title">${task.titulo}</h3></div>
</div>
</c:if>
<div class="row">
<div class="col-md-12">
<pre class="task-descricao"><c:out value="${task.descricao}"/></pre>
</div>
</div>
<div class="row">
<div class="col-md-3">
<small class="task-data-criacao">
<i class="fa fa-calendar-o"></i> ${task.dataCriacao}</small>
</div>
<c:if test="${not empty task.dataExecucao}">
<div class="col-md-3">
<small class="task-execucao"><i
class="fa fa-calendar"></i> ${task.dataExecucao}</small>
</div>
</c:if>
<c:if test="${not empty task.arquivo}">
<div class="col-md-3">
<a href="${task.arquivo}" class="btn btn-link btn-sm">
<i class="fa fa-download"></i>
</a>
</div>
</c:if>
<div class="col-md-3"><i class="fa fa-dropbox"></i></div>
<div class="row">
<div class="container">
<div class="col-md-12">
<small class="task-tag"><i class="fa fa-tags"></i> ${task.tags}</small>
</div>
</div>
</div>
</div>
</div>
I will have multiple structures like this one since I'm using <c:forEach>. The wrapper class task.
How can I get the information such as, h3.task-title, pre.task-descricao and others when I click on a div.task with JQuery/JavaScript?
PS: I'm using <c:forEach> to multiply this structure with different inner values.
You can use the this keyword inside your event handler to access the element which triggered the event. Once you have this element, you can use the find function to find the relevant elements inside the target element.
$('div.task').click(function () {
var $title = $(this).find('h3.task-title');
var $descricao = $(this).find('pre.task-descricao');
//...
alert($title.text() + '\n' + $descricao.text());
});
Here is a live example.
using JQuery:
$( "#taskdiv" ).click(function() {
var title = $(".task-title").html();
var descricao = $(".task-descricao").html();
});
Info about jquery click:
http://api.jquery.com/click/
Infor about jquery selectors:
http://www.w3schools.com/Jquery/jquery_ref_selectors.asp
Related
I Have the following code cshtml
<div class="container-fluid" id="dvUserData">
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="col-md-3">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
and the following binding
ko.applyBindings(model, document.getElementById("dvUserData"));
But my data-bind="click: editData" does not work, the click is not performed. But if i put the div class="col-md-3" before the #Html.Partial("Documentos") the bindings work.
I have no idea why, I looked for posts here but could not find anything similar.
Thanks in advance for any help.
---EDITED
The Partial
<div class="row" id="dvDocument">
<form role="form">
<div class="row">
<div class="col-12">
<table class="table tabela-documentos">
<tbody data-bind="foreach: documentsReturn().documentTypes">
<tr class="bg-cinza">
<td>
<div class="aviso-sucesso" data-bind="visible : hasAllDocuments()"></div>
<div class="aviso-critica" data-bind="visible : !hasAllDocuments()"></div> <span data-bind="text: Description"></span>
</td>
<td>
<span class="d-none" data-bind="value: IdTypeDocument"></span>
<a class="btn btn-secondary" data-bind="click: function () { $parent.saveTypeDocument(IdTypeDocument); $('.alerta-form2').hide();}" data-toggle="modal" data-target="#modalDocumento">
ADICIONAR
</a>
</td>
</tr>
<!-- ko foreach: DocumentsArray() -->
<tr>
<td><i class="fa fa-file-text-o" aria-hidden="true"></i> Inclusão: <span data-bind="text: NewDate"></span></td>
<td>
<i class="fa fa-times pointer" data-toggle="modal" data-target="#modal-confirmation" aria-hidden="true" data-bind="visible : !frombase(),
, click: function(){ #*if (confirm('Deseja realmente deletar o documento?')) {*# $parent.savePath(Path); #*}*# }"></i>
</td>
</tr>
<!-- /ko-->
</tbody>
</table>
</div>
</div>
<div class="alert-button">
</div>
</form>
</div>
I forgot to mention that i have another javascript file that bindings the div document with a different model.
Press the F12 and check for any knockout js init (ko.applyBindings) error.
If there is any, fix it and try.
If no error exist, then make sure you have set a value to the model.Name() property by debugging the code.
and check your partial view and see whether you have narrow down the scope/ binding context to another complex property of you model which also has the Name property.
It would be better if you could give more info about partial view binding declaration and the how you are setting / loading the initial values to your model.
After looking for the solution and talk with some friends i found out what was the problem. I was binding the major div, that had the div id "documentos", and another information, and this was the problem.
I remove the binding of dvUserData, and put the binding in all the div that i had, including creating a new div just for the button.
This is how my div "documentos" is now.
<div class="tab-pane fade" id="documentos" role="tabpanel" aria-labelledby="documentos-tab">
#Html.Partial("Documentos")
<div class="alert-button mb-3">
<div id="dvDocumentValidate">
<button type="submit" class="btn btn-primary botao-vert" data-bind="click: editData">SALVAR</button>
</div>
</div>
</div>
And my bindings
ko.applyBindings(model, document.getElementById("dvLoading"));
ko.applyBindings(model, document.getElementById("personaldata"));
ko.applyBindings(model, document.getElementById("address"));
ko.applyBindings(model, document.getElementById("databank"));
ko.applyBindings(model, document.getElementById("dvDocumentValidate"));
ko.applyBindings(model, document.getElementById("corporatedata"));
I have a bit long info submission form. I have an option that someone click "add another", there is a notification box display with text like "Success!" like that with close button. Please check this image.
Therefore I have three "add another" buttons and three success alerts. When someone click close, that alert message needs to be disappear.
The problem
I used javascript for that success box. It does these things.
Click "Add another" button, appears success box. Click close button on
success box, box disappears.
Here is my code.
document.querySelector(".add-box").addEventListener("click", function() {
document.querySelector(".add-box-wrap").style.display = "inline-block";
});
document.querySelector(".add-box1").addEventListener("click", function() {
document.querySelector(".add-box-wrap1").style.display = "inline-block";
});
document.querySelector(".add-box2").addEventListener("click", function() {
document.querySelector(".add-box-wrap2").style.display = "inline-block";
});
$(".claim-btn-close").click(function() {
$(".add-box-wrap").hide();
});
$(".claim-btn-close1").click(function() {
$(".add-box-wrap1").hide();
});
$(".claim-btn-close2").click(function() {
$(".add-box-wrap2").hide();
});
<!-- This goes end of html page -->
function hide(target) {
document.getElementsByClassName(target).style.display = 'none';
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--Success form-->
<div class="add-box-wrap">
<div class="claim-btn-close" onclick="hide('.claim-btn-close')">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box">Add another<i class="fa fa-plus"></i></a>
</div>
See.. there is a major problem with code repeating. (I didn't repeat html codes, just post here one example) I would like to know the best practice to achieve things like this.
For displaying the notification box without repeating the code, one of the way is you could make use of data attributes. Change the data attribute for all the buttons and let the class .add-box be the same. like so:
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
And change your Jquery to just one function.
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show(); //.add-box-wrap1 or .add-box-wrap2
});
Explanation of the above line: It just means we are getting the value of the "clicked" button's data-target value(which is 1 or 2) AND appending that value to the "add-box-wrap"(which will be add-box-wrap1 or add-box-wrap2) to search for that element to display it using .show().
Using show() or .css jquery functions is upto you. But I suggest not to mix both vanilla JS and JQuery codes(like in your question).
Closing
You can simply use closest or parent, like so:
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
$(".add-box").click(function() {
$(".add-box-wrap" + $(this).data('target')).show();
});
$(".claim-btn-close").click(function(){
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add-box-wrap1" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="1">Add another<i class="fa fa-plus"></i></a>
</div>
<!--Add another button -->
<div class="col-lg-10 col-md-10 col-sm-12 no-padding">
<a class="add-box" data-target="2">Add another<i class="fa fa-plus"></i></a>
</div>
Update on another question(3 column):
Using bootstrap, you can wrap the add-box-wrap divs within a .row and give each of it a class like col-*-4(class="col-xs-4 col-md-4 col-lg-4") assuming you have 3 success buttons(12/3 = 4). So the first part of your html would become
<div class="row">
<div class="add-box-wrap1 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap2 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
<div class="add-box-wrap3 col-md-4 col-lg-4" style="display: none;">
<div class="claim-btn-close">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
Success!
</div>
</div>
You can use DOM relationship to target the desired element. Bind event handlers using a common class then use .closest() to traverse up desired element.
$(".claim-btn-close").click(function(){
$(this).closest(".add-box-wrap").hide();
});
If element are dynamically generate use Event Delegation approach.
$(staticParentElemet).on('click',".claim-btn-close",function(){
$(this).closest(".add-box-wrap").hide();
});
HTML:
<div class="btn-small blue">
<span class="label bottom">Vascular Surgery</span>
</div>
<div class="btn-small red">
<span class="label bottom">Administrator</span>
</div>
<div class="btn-small blue">
<span class="label bottom">Cardiology North</span>
</div>
<div class="calContent">
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
<div class="divContent">
This is Second
</div>
<div class="divContent">
This is Third
</div>
</div>
Fiddle: https://jsfiddle.net/geetof8x/
If I remove the following code:
<div class="divContent">
<div class="divContentHolder">
<div>
VASCULAR CURGERY
</div>
<div>
CALENDAR GOES HERE
</div>
</div>
</div>
With:
<div class="divContent">
This is First
</div>
The script works fine but with the added extra div inside the divContent div, the code doesn't work correctly.
The removed code will be used in the final template. How can I edit the javascript so it can handle either case scenario.
You're only interested in the children (not grandchildren, etc.) of .calContent.
One solution is to use the child selector to limit your selection to only the direct children:
$('.calContent > div:eq(' + $(this).index() + ')').fadeOut();
Updated Fiddle
I am trying to find clicked button value.here is my htmlcode,I am not able to get but always getting first one.
<div id="addSentiment" class="dialogs">
<div id="1" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> ki#n.com
</div>
<div id="cat_1" class="text">category : Scheduling
<br>
</div>
<div id="op_1" class="text">ddd word/phrase : providing solutions
<br>
</div>
<div id="feature_1" class="text">ddd word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="1" name="hd">
</div>
<div class="tools"> <a id="edit_1" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="2" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tc#n.com
</div>
<div id="cat_2" class="text">category : Scheduling
<br>
</div>
<div id="op_2" class="text">dddd : providing solutions
<br>
</div>
<div id="feature_2" class="text">ddddddde : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="2" name="hd">
</div>
<div class="tools"> <a id="edit_2" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
<div id="3" class="dialogs">
<div class="itemdiv dialogdiv">
<div class="user">
<img src="assets/avatars/avatar1.png" alt="Alexas Avatar">
</div>
<div class="body">
<div class="time"> <i class="ace-icon fa fa-clock-o"></i>
<span class="green">Date : 10/01/2014</span>
</div>
<div class="name"> tn#nn.com
</div>
<div id="cat_3" class="text">category : Scheduling
<br>
</div>
<div id="op_3" class="text">Opinion word/phrase : providing solutions
<br>
</div>
<div id="feature_3" class="text">Feature word/phrase : listen to
<br>
</div>
<div class="text">
<input type="hidden" value="3" name="hd">
</div>
<div class="tools"> <a id="edit_3" class="btn acebtn btn-minier btn-info" href="#">
<i class="icon-only ace-icon fa fa-share"></i>
</a>
</div>
</div>
</div>
</div>
</div>
I tried following code in jquery
$(".dialogs .itemdiv .tools").live("click",function(e){
e.preventDefault();
alert('clicked on edit');
var n = $('.dialogs .itemdiv .tools a').attr('id');
alert(n);
});
I use live here because I am getting above html by using append method in jquery.
live is deprecated in later versions of jQuery - but to solve your issue you need to use an instance of this
$("#addSentiment").on("click", ".dialogs .itemdiv .tools", function(e){
e.preventDefault();
alert('clicked on edit');
var n = $("a", this).attr('id');
alert(n);
});
jQuery selectors catch the first match of their content.
To catch the n-th match, you need to use the n-th child selector, like this:
$(".dialogs .itemdiv .tools:nth-child(2)")
I am not familiar with the live method, but you should be able to do something like the following:
function addHandlers() {
$(".dialogs .itemdiv .tools a").each(function() {
$(this).click(function() {
alert('clicked on edit');
);
});
}
function yourAppendFunction() {
//your append code
//add call to a function that will create your event handlers
addHandlers();
}
The .each method runs through each and every item that fits the selection criteria, and then we use the this keyword within the function to reference what we are working on. Putting it in a function that we don't call until after you append the items ensures the html exists when you try to add the handlers you need.
API references:
each method: http://api.jquery.com/each/
click method: http://api.jquery.com/click/
I am looking to if a div is empty and my code works if the div looks like this with no white space, but I am using Smarty and want to show data if it is available. If the highlights class is empty then I want to show the no_highlights well.
If it helps the only content that will appear inside the highlights is <div class="form-group"> <!-- different content --> </div>
<div class="highlights">
{if $highlights}
{/if}
</div>
<i class="fa fa-plus"></i> Add Highlight <br>
<div class="well no_highlights">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
var highlight = '<div class="form-group"> <label for="highlight" class="col-sm-3 col-lg-2 control-label">Highlight:</label> <div class="col-sm-9 col-lg-3 controls"> <input type="text" name="highlight_name[]" data-rule-required="true" class="form-control" placeholder="Highlight Name"> </div> <div class="col-sm-9 col-lg-7 controls"> <textarea name="highlight_description[]" class="form-control" rows="3" placeholder="Description for highlight"></textarea> <i class="fa fa-plus"></i> Remove Highlight </div> </div>';
if(('.highlights')){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
$('.first_highlight').click(function(){
$('.no_highlights').hide();
$('#add_highlight').show();
$('#order_highlights').show();
$('.highlights').append(highlight);
});
$('#add_highlight').click(function(){
$('.highlights').append(highlight);
});
Try this,
Template
{if $highlights}
<div class="highlights">
</div>
{/if}
Jquery
if(! $('.highlights').length){
$('#add_highlight').hide();
$('#order_highlights').hide();
}else{
$('.no_highlights').hide();
}
Else you can choose any one from How to check if div element is empty
To check if a div element is empty refer here
Alternatively you should put a check in the template itself
<div class="highlights">
{if $highlights}
{/if}
</div>
<a href="#" class="pull-right showhouse-text {if $highlights}{else}hidden{/if}" id="add_highlight">
<i class="fa fa-plus"></i>Add Highlight
</a> <br>
<div class="well no_highlights {if $highlights}hidden{/if}">
<h4>No highlights found</h4>
<p>You have not yet added any highlights to this property</p>
<p><button type="button" class="btn btn-primary first_highlight">Add first property highlight</button></p>
</div>
CSS:
.hidden{
display: none;
}