I want to print JSON file in HTML page but I don't know the keys and the values my JSON Object.
When I know the form of JSON I use this code:
<div ng-repeat="f in faq">
<div class="list-group-item clearfix">
<h4>
<span class="glyphicon glyphicon-file">
</span>
{{f.key}}-{{f.value}}
<span class="pull-right">
<button class="btn btn-warning" ng-click="">
<span class="glyphicon glyphicon-trash">
</span>
</button>
</span>
</h4>
</div>
</div>
</div>
But in this moment I don't know the keys and the values of the JSON.
Thanks for your help.
Looks like you are using angular(I noticed from ng-repeat). You can use (key,data) as follows:-
<div ng-repeat="(key, data) in faq">
{{key}} - {{data}}
</div>
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 dynamic list of properties on a search results page, the problem I am having on each individual search result is that if it is a certain property type i.e. Land it does not need the bedrooms and bathrooms fields within that search result to show, but if it is a Villa, the fields would show.
I would need to show and hide fields on the page load in JS like my example above on each individual search result as if I do a general JS function for Land hiding the div classes for bedrooms and bathrooms, there could also be a Villa on the page needing those fields.
If anyone could help with some JS to help me solve this issue above, it would be much appreciated!
Heres some of the Html Results below, you will see there are multiple property types, so different fields should be show/hidden
<div class="property-listing">
<ul>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=615237" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=NEW LISTING&imageURL=487/Sales/615237/615237_7969.jpg" alt="Villa in Javea">
<span class="images-count">
<i class="fa fa-link"></i>
MidasS
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>115.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=615237" title="Villa in Javea">
Villa in Javea
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Alicante, SPAIN</span>
<p>A beautiful and rustic style 'home' offering spectacular views over the coast, the mountains and the Mediterranean Sea.</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>2</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=638700" class="property-featured-image"><div class="overlay" style="line-height:167px"><i class="fa fa-search"></i></div>
<img src="http://example.com/ImageProcessor.aspx?watermarkImageFileName=&Text=REDUCED&imageURL=487/Sales/638700/638700_1145.jpg" alt="Apartment in Famagusta">
<span class="images-count">
<i class="fa fa-link"></i>
PRO1011
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>155.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=638700" title="Apartment in Famagusta">
Apartment in Famagusta
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Famagusta, CYPRUS</span>
<p>hnglkrehnblarjl;kbkhmtr;mnb;rstlmnstrn</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>0</strong>Bedrooms</span>
<span id="spbaths"><strong>0</strong>Bathrooms</span>
<span id="sppool"><strong>No</strong>Pool</span>
</div>
</div>
</li>
<li class="col-md-12">
<div class="col-md-4">
<a href="/propertydetails.aspx?SalePropertyID=636364" class="property-featured-image"><div class="overlay" style="line-height:188px"><i class="fa fa-search"></i></div>
<img src="http://example.com/487/Sales/636364/636364_5562.jpg" alt="Country House in Not Specified">
<span class="images-count">
<i class="fa fa-link"></i>
cyc130
</span>
</a>
</div>
<div class="col-md-8">
<div class="property-info">
<div class="price"><span>175.000</span><strong>€</strong></div>
<div class="title">
<a href="/propertydetails.aspx?SalePropertyID=636364" title="Country House in Not Specified">
Country House in Not Specified
</a>
</div>
<span class="location"><i class="fa fa-map-marker"></i> Andalucia, SPAIN</span>
<p>;.lkijuhygtfrdeswaq</p>
</div>
<div class="property-amenities clearfix">
<span id="spbeds"><strong>3</strong>Bedrooms</span>
<span id="spbaths"><strong>1</strong>Bathrooms</span>
<span id="sppool"><strong>Yes</strong>Pool</span>
</div>
</div>
</li>
<br> <br>
<div class="pagination">
<span class="disabled"><i class="fa fa-chevron-left"></i></span>
1
2
3
4
<i class="fa fa-chevron-right"></i>
</div>
</ul>
</div>
I'm just gonna go ahead and make up my own HTML structure to demonstrate the simple if/else statement you would make with jQuery.
function hideFields() {
$(".result").each( function() {
if ( $(this).hasClass("land") ) {
$(this).children(".bedroom").hide();
$(this).children(".bathroom").hide();
}
else if ( $(this).hasClass("villa") ) {
$(this).children(".land-area").hide();
}
});
}
hideFields();
span {
display:block;
border:1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div class="result villa"><b>Villa</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
<br>
<div class="result land"><b>Land</b><br>
<span class="bedroom">Bedroom</span>
<span class="bathroom">Bathroom</span>
<span class="location">Location</span>
<span class="land-area">Land-area</span>
</div>
Your HTML seems confusing for multiple reasons, which you can easily fix to use this method:
1) sppools, spbaths, spbeds should indeed be classes rather than IDs. This is due to IDs being unique identifiers - they should hence not appear more than once on each page, whereas classes identify a "type" (class) of item, which may appear multiple times. Multiple instances of the same ID will mess with your CSS and JS.
2) There is no clear definition within each result of what type of result this is (or I can't seem to find it, at least?).
Words like "villa" or "house" indeed appear in the title-tag, but having to search within these is an inefficient way of performing the action.
Instead, make your code show the type of content as a class on each li-item or the initial div-item.
I have a unique situation. I have a dropdown called caseStatus (see code below) and it is actually being written out during an ng-repeat, but it is tied to a model that contains the list of Case Statuses. Obviously there are multiple of these dropdowns on the page once it is rendered. All of that works just fine. The issue is that the judge can change the status of the case. I am working on a function that will handle that and I am confident it will work. My question is how to do the following two things (which are perhaps both solved with one method I suspect):
Make sure that each dropdown maintains its last value when a page is refreshed or returned to.
Make sure that it loads to what was last there during the ng-repeat. There is a field in the model that the ng-repeat is using that has the value for the Case Status.
Here is the code. There is a comment that says which dropdown is in question:
<div ng-controller="CaseListCtrl">
<div class="row" ng-show="$parent.loggedin">
<div class="col-sm-12 calselectrow">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-calendar calicon"></span>
<input type="text" id="calpick" ng-model="date" jdatepicker />
<i class="glyphicon glyphicon-calendar calclick"></i>
>>
<span class="bluedept">Department:</span>
<select class="selectpicker deptpicker" id="deptSelect" selectpicker data-ng-model="department" ng-change="getCalendar();">
<option ng-repeat="department in departments">{{department.CourtRoom}}</option>
</select>
</div>
</div>
</div>
<div class="row" ng-show="$parent.loggedin">
<div>
<div class="col-sm-8 col-sm-offset-2 caselist" ng-model="cases" ng-repeat-start="case in cases | orderBy: ['sequence', 'AmPm', 'Sched_Time', 'Case_Number']">
<div class="sequence">
<input type=text class="seq-box" size="1" value="{{case.sequence}}" />
<!-- Add hidden field to hold the CalendarID value for updating the sequence later-->
<input type="hidden" name="CalendarID_{{case.Case_Number}}" value="{{case.CalendarID}}" />
</div>
<div class="casetitle">
<span class="caselink">{{case.Case_Number}}</span>
<a href="calendar" data-toggle="tooltip" data-placement="top" title="Calendar" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-calendar"></span>
</a>
<a href="documents/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Documents" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-file"></span>
</a>
<a href="parties/{{case.Case_Number}}" data-toggle="tooltip" data-placement="top" title="Parties" class="btn btn-xs btn-danger calicon-view" tooltip>
<span class="glyphicon glyphicon-user"></span>
</a>
<select class="form-control" id="caseStatus" name="caseStatus" ng-model="caseStatus.statusID" ng-change="setStatus();" ng-options="castStatus.statusName for caseStatus in castStatus track by caseStatus.statusName" required></select><!-- This is the dropdown in question-->
{{case.Case_Title}}
</div>
</div>
<div class="col-sm-8 col-sm-offset-2 caselist-bottom">
<div class="col-sm-9 col-sm-offset-1">
<div class="hearing-time">{{case.Sched_Time}} {{case.AmPm}}</div>
<div class="hearing-title">{{case.Event}}</div>
</div>
</div>
<div ng-repeat-end></div>
</div>
</div>
</div>
How do I accomplish this?
Are you developing a SPA (single page application)? What do you mean by "page is refreshed or returned to"? If you are reloading the whole page, then there is no way to retrieve the last values, as the controllers will reinitialize. You'll have to save the values somewhere, e.g. database or cookie, and retrieve them from a service that is injected into your controller...
In my application I've got different views which use the same piece of code. So, I put this piece of code in a file called sharedFile, all the variables and function have the same name, I checked twice.
This piece of code enables the display of a filter-box where the user can pick some filters, apply them and then the different filters applied are displayed. Everything works weel, HTTP request and so on, the only concern is that I have a "clear" button which enables to delete all the filters in one shot but actually when I click on it, filters are not in the URL anymore (that is what I want) but they are still displayed.
I share this file between 2 HTML files, and actually one works perfectly but the other one doesn't work only when the previous page visited was the first that works...
Any ideas or suggestions?
Thanks !
I put my code in case it can help :)
<!-- Enables the user to choose which filter he wants to be applied -->
<div ng-show=" show.filterBox" >
<div>
<strong>QUEUES</strong>
</div>
<span ng-repeat='queue in queues'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddQueueFilter(queue.id.toString())" ng-hide="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveQueueFilter(queue.id.toString(), true)" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<strong>TICKET TYPES</strong>
</div>
<span ng-repeat='type in types'>
<button href="" class="btn btn-sm marginButton btn-default" ng-click="onAddTypeFilter(type.id.toString())" ng-hide="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-record"></span>
</button>
<button href="" class="btn btn-sm marginButton btn-primary text-muted" ng-click="onRemoveTypeFilter(type.id.toString(), true)" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-ok"></span>
</button>
</span>
<div>
<button class="btn btn-sm btn-success" ng-click="applyFilterBox()">Apply</button> - <a href='' ng-click='openCloseFilterBox()'>cancel</a>
</div>
<div ng-show="!show.filterBox ">
<div ng-show="routeParams.queue_id">
<!-- indicate that the list is queue list when status and queue list are shown -->
<span ng-show="routeParams.type_id" class="text-muted">queue:</span>
<span class="label label-primary label-status-id small-margin-top" ng-repeat="queue in queues" ng-show="routeParams.queue_id && isIdInRouteParams('queue_id',queue.id)">
{{queue.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveQueueFilter(queue.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.queue_id" class='small-margin-top'>
-
clear
</span>
</div>
<div ng-show="routeParams.type_id">
<span ng-show="routeParams.queue_id" class="text-muted">type:</span>
<span class="label label-info label-status-id small-margin-top" ng-repeat="type in types" ng-show="routeParams.type_id && isIdInRouteParams('type_id',type.id)">
{{type.name}}
<span class="glyphicon glyphicon-remove"
style='font-size:0.7em; cursor:pointer'
ng-click='onRemoveTypeFilter(type.id.toString(), false)'/>
</span>
<span ng-hide="!routeParams.type_id" class='small-margin-top'>
-
clear
</span>
</div>
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