I've got problem with outputting my JSON from server (Node.js) to NGrepeat.
I have tried a lot and debugged with both Firebug and Firefox Web Inspector.
For some reason it will not show the data from the JSON, even then the JSON looks correct when I output it in the Firebug console (using Firefox 39.0).
JSON:
[{ nr:"1", svenska:"test2", spanska:"testo2"},{ nr:"2", svenska:"test3", spanska:"testo3"},{ nr:"3", svenska:"test4", spanska:"testo4"},{ nr:"4", svenska:"test5", spanska:"testo5"},{ nr:"5", svenska:"test6", spanska:"testo6"}]
Angular.js
/**
*
* The client Angular.JS main file for the project
*/
var glosorApp = angular.module('glosorApp',['directives']); /* */
angular.module('directives', [])
.directive('toggleClass', function () {
var directiveDefinitionObject = {
restrict: 'A',
template: '<div ng-click="localFunction()" ng-class="selected" ng-transclude></div>',
replace: false,
scope: {
model: '='
},
transclude: true,
link: function (scope, element, attrs) {
scope.localFunction = function () {
scope.model.value = scope.$id;
};
scope.$watch('model.value', function () {
if (scope.model.value === scope.$id) {
scope.selected = "active";
} else {
scope.selected = '';
}
});
}
};
return directiveDefinitionObject;
});
glosorApp.controller('listController', function ($scope, $http) {
$http.post(PROJEKT_SOKVAG+'/_myroute',
{type:AJAX.LISTA_GLOSOR_CLI_R}).success( function(data) {
console.log("Kommer hit lookdeep: "+lookdeep(data.data));
$scope.glosor = data.data;
// $scope.$apply();
console.log("Kommer hit lookdeep: $scope.glosor "+lookdeep($scope.glosor));
});
});
function ajaxanrop(callback, data_) {
$.ajax({
url: PROJEKT_SOKVAG+'_myroute',
type: 'POST',
dataType: 'json',
data: data_ , // the data that should be sent to server
success: function(data) { if ( callback ) callback(data); },
error: function() { if ( callback ) callback(null); },
complete: function() { /* console.log("Klart"); */ }
});
}
HTML (EJS template)
<!DOCTYPE html>
<html ng-app="glosorApp" ng-init="model = { value: 'dsf'}">
<head>
<title>Glosor</title>
<script type="text/javascript">
var PROJEKT_SOKVAG="<%=project_path %>", LoginUser="<%= user.username %>";
</script>
<script type="text/javascript" src="http://w42.se/webbroot/js/jquery-1.9.1.min.js"></script>
<script src="http://w42.se/<%=project_path %>/jquery-ui-1.js" type="text/javascript"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/lookdeep.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/constants.js"></script>
<script type="text/javascript" src="http://w42.se<%=project_path %>/clientAngular.js"></script>
</head>
<body>
<div id="vald_sida" style="display:none;" class="mentorer"></div>
<p>Användarnamn: <%= user.username %></p>
<p>Email: <%= user.email %></p>
<p>Log out</p>
<div id="wrapper" ng-controller="listController" >
<p>Lägg till Glosor</p>
<p>Testa Glosor</p>
<div class="clear"></div>
<div class="list">
<div class="filterarea">
<h4>Sökning</h4>
<div>
<span>Nr: <input ng-model="search.nr" ng-model-options="{debounce: 20000}"></span>
<span>Svenska: <input ng-model="search.svenska" ng-model-options="{debounce: 20000}"></span>
<span>Spanske: <input ng-model="search.spanska" ng-model-options="{debounce: 20000}"></span>
<span>Poäng: <input ng-model="search.poang" ng-model-options="{debounce: 20000}"></span>
</div>
</div>
<div class="pad clearfix">
<h4>Resultat</h4>
Välj: alla <input type="checkbox" ng-model="master"><br/>
<div ng-form="">
<div class="list">
<div class="thead">
<div>
<span class="sortable"><a href=""
ng-click="predicate = 'nr'; reverse=!reverse">#</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'svenska'; reverse=!reverse">Svenska</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'spanska'; reverse=!reverse">Spanska</a></span>
<span class="sortable td"><a href=""
ng-click="predicate = 'poang'; reverse=!reverse">Poäng</a></span>
</div>
</div>
<div class="tbody">
<div ng-repeat="glosa in filter_glosor = (glosor | orderBy:predicate:reverse | filter:search)">
<div class="tr" toggle-class="" model="model">
<span class="td">{{glosor.nr}}</span>
<span class="td">{{glosor.svenska}}</span>
<span class="td">{{glosor.spanska}}</span>
</body>
</html>
As for the ng-repeat issue, it looks like you're using a filter incorrectly. Try this:
<div ng-repeat="glosa in glosor | orderBy:predicate:reverse | filter:search">
NB If you're trying to GET data, you should use $http.get instead of the $http.post(PROJEKT_SOKVAG+'/_myroute', you have.
It will save confusion down the road when maintaining the app.
Well, I found the error that I made, and it was a ridiculously simple error. Quite embarrasing actually... ;-)
I put glosor.svenska instead of glosa.svenska in the repeated block (inside the NGRepeat).
That's the bad thing with having the array name and the element name too similar, you might mix them up.
This means that I put the array instead of the repeated single array element inside the repeated block.
Related
I am taking my very first steps with Plotly.js and AJAX. However, I am stuck when it comes to passing the new data to the plot. Although the data is received (as confirmed by console.log()), it destroys the plot when using "Plotly.newPlot(). I can't seem to figure out where am I going wrong. I tried researching the issue, but all examples are not applicable in my case.
Expected behavior:
After clicking the button (chartId="chart1"), priceplot.js should send a request to the route '/updatepriceplot' which returns a JSON response based on the selection from request.form["chartOption"].
Actual behavior:
The plot is empty after clicking the button (chartId="chart1")
Here is my Flask route:
#server_bp.route('/priceplot', methods=["GET"])
def priceplot():
form_priceplot = pricePlot_options()
plot = createPlot()
return render_template("priceplot.html", plot=plot, form_priceplot=form_priceplot)
#server_bp.route('/updatepriceplot', methods=["POST"])
def update_priceplot():
# a = request.form["chartId"]
chartOption = request.form["chartOption"]
plot = updateData(chartOption)
return plot
Here is the PricePlot function returning a new JSON file.
def createPlot():
df = pd.read_json('data_{}.json'.format("1"))
df = df.dropna()
data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON
def updateData(chartOption=None):
# load the json data
df = pd.read_json('data_{}.json'.format(chartOption))
df = df.dropna()
data = [go.Scatter(x=df['Timestamp'], y=df['Value'])]
graphJSON = json.dumps(data, cls=plotly.utils.PlotlyJSONEncoder)
return graphJSON
The HTML template:
{% extends "base.html" %}
{% block content %}
<!DOCTYPE html>
<html>
<head lang="en">
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='js/priceplot.js') }}"></script>
</head>
<body>
<div id="chartSectionchart1" class="panel panel-default">
<div class="panel-heading">
<h3>Chart <span id="chartIdHead"></span>{{ chartOption }}</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="chart" id="graph">
</div>
</div>
</div>
</div>
</div>
</div>
<p>
<button type="button" class="btn btn-primary updateButton" chartId="chart1">Update</button>
</p>
<p>
{{ form_priceplot.option_priceplot(size=1, class="form-control", id="chartOption") }}
</p>
</div>
</div>
</body>
<script>
var graphs = {{ plot | safe}};
Plotly.plot('graph', graphs, {});
</script>
{% endblock %}
The priceplot.js
$(document).ready(function(){
$(".updateButton").on("click", function(){
var chartId = $(this).attr("chartId")
var chartOption = $("#chartOption").val()
console.log(chartId)
console.log(chartOption)
req = $.ajax({
url : "/updatepriceplot",
type : "POST",
data : {chartId: chartId, chartOption : chartOption}
});
req.done(function(data) {
$("#chartSectionchart1").fadeOut(300).fadeIn(300);
var graphs = data;
console.log(graphs)
Plotly.newPlot('graph', graphs, {});
});
});
});
The problem has been solved thanks to the clever help of people in the chat:
The JSON data needs to be parse before updating the plot:
Revised priceplot.js
$(document).ready(function(){
$(".updateButton").on("click", function(){
var chartId = $(this).attr("chartId")
var chartOption = $("#chartOption").val()
console.log(chartId)
console.log(chartOption)
req = $.ajax({
url : "/updatepriceplot",
type : "POST",
data : {chartId: chartId, chartOption : chartOption}
});
req.done(function(data) {
$("#chartSectionchart1").fadeOut(100).fadeIn(100);
var graphs = JSON.parse(data);
console.log(graphs)
Plotly.react('graph', graphs, {});
});
});
});
I am trying to work with ajax in order to update only a partial view and not the whole view. In the following example I want to refresh the page-content section.
this is my layout.html.
<body>
<div id="container" class="effect">
#Html.Partial("_head")
<div class="boxed">
<section id="content-container">
#if (ViewData["Errors"] != null)
{
<div class="panel" style="background-color:white;">
<div class="panel-heading">
<h3 class="panel-title">
Page title
</h3>
</div>
</div>
}
<div id="page-content" class="container">
#RenderBody()
</div>
</section>
</div>
</div>
</body>
Partial view _head contains the menu with href links for example:
<a id="a1" href="">Menu Item 1</a>
In layout I am trying to use the following:
<script>
$(document).ready(function () {
$("#a1").click(function () {
A1();
});
function A1( ) {
$.ajax({
url: '#Url.Action("PartialViewMethodFromController", "HomeController")',
success: function (response) {
$('#page-content').html(response);
}
});
}
});
</script>
And my HomeController
public ActionResult PartialViewMethodFromController()
{
var model = service.GetAll();
return PartialView("PartialViewMethodFromController", model);
}
It kinda works - the partialview is refreshing for a moment and the partialview is show correctly and then the whole page goes on and refreshes.
Am I missing something crucial here?
I have a grid(html-table) with a lot of columns and want to combine filtering and sorting on this table.
At the moment I only use filtering on one column but sorting on several columns.
I want to do this with ajax.
I read an article [http://www.craigburke.com/2011/01/23/grails-ajax-list-with-paging-sorting-and-filtering.html]
and tried to adapt it to my version of grails-3.2.6.
This has been very hard to solve and now I'm totally stuck.
If I add something in the filter nothing happens but when I click on a column, the filtering takes place and also sorting, clicking a second time, ajax is not called and the filter is overwritten with the default value. I have managed to implement it on a test project which act the same.
It is much code and maybe there is a way to include the whole project in this question in some way?
I'll try to show most of the important part here if it could help.
The index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<g:set var="entityName" value="${message(code: 'person.label', default: 'Person')}" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
<script type="text/javascript">
$(document).ready(function() {
setupGridAjax();
setupFilterAjax();
});
</script>
<script type="text/javascript">
function setupGridAjax() {
$('#gridPersons').find('.paginateButtons a, th.sortable a').on('click', function(event) {
event.preventDefault();
var url = $(this).attr('href');
var grid = $(this).parents("table.ajax");
$(grid).html($("#spinner").html());
$.ajax({
type: 'GET',
url: url,
data: [tag],
success: function(data) {
$(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow');});
}
})
});
}
</script>
<script type="text/javascript">
// Turn any input changes or form submission within a filter div into an ajax call
function setupFilterAjax(){
alert('FILTER--Anropat');
$('div.filters select:input').on('change',function(event) {
var filterBox = $(this).parents("div.filters");
filterGrid(filterBox);
});
$("div.filters form").submit(function() {
var filterBox = $(this).parents("div.filters");
alert('FILTERBOX - '+filterBox);
filterGrid(filterBox);
return false;
});
}
// Reload grid based on selections from the filter
function filterGrid(filterBox) {
alert('FILTER-change detected');
var grid = $(filterBox).next("div.gridPersons");
$(grid).html($("#spinner").html());
var form = $(filterBox).find("form");
var url = $(form).attr("action");
var data = $(form).serialize();
alert('FILTERGRID - '+url);
$.ajax({
type: 'POST',
url: '${g.createLink( controller:'person', action:'index' )}',
data: [tag],
success: function(data) {
$(grid).fadeOut('fast', function() {$(this).html(data).fadeIn('slow');});
}
});
}
</script>
</head>
<body>
<g:message code="default.link.skip.label" default="Skip to content…"/>
<div class="nav" role="navigation">
<ul>
<li><a class="home" href="${createLink(uri: '/')}"><g:message code="default.home.label"/></a></li>
<li><g:link class="create" action="create"><g:message code="default.new.label" args="[entityName]" /></g:link></li>
</ul>
</div>
<div id="list-person" class="content scaffold-list" role="main">
<h1><g:message code="default.list.label" args="[entityName]" /></h1>
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<div class="filters">
<g:form action="register">
<div id="selectMill">
Select tags:
<g:select class="selected" name="tag" from="${tagList}" value="${filters?.tag}" noSelection = "${['':'All']}" optionValue="" optionKey="" />
</div>
<div id="gridPersons">
<g:render template="Grid_Persons" model="personList" />
</div>
<div class="pagination">
<g:paginate total="${personCount ?: 0}" />
</div>
<fieldset class="buttons">
<input class="save" type="submit" value="${message(code: 'offer.create.from.buffer.label', default: 'Create')}" />
</fieldset>
</g:form>
</div>
</div>
</body>
The template: _Grid_Persons.gsp
<table class="ajax">
<thead>
<tr>
<g:sortableColumn property='reg' title='Register' />
<g:sortableColumn property="id" title='Id' params="${filters}"/>
<g:sortableColumn property='name' title='Name' params="${filters}"/>
<g:sortableColumn property='tag' title='Tag' params="${filters}"/>
<g:sortableColumn property='registered' title='Registered' params="${filters}"/>
</thead>
<tbody>
<g:each in="${personList}" status="i" var="ps">
<tr class="${ (i % 2) == 0 ? 'even': 'odd'}">
<td><g:checkBox name="ckb" value="${ps.id}" checked="false" /></td>
<td><g:link action="edit" id="${ps.id}">${ps.id}</g:link></td>
<td>${ps.name}</td>
<td>${ps.tag}</td>
<td>${ps.registered}</td>
<td>
</g:each>
</tbody>
The index-part of the controller:
def index(Integer max) {
params.max = Math.min(max ?: 10, 100)
def tagList = Person.withCriteria {
projections {
distinct("tag")
}
}
def List<Person> personList = getPersonList()
// Paging def prodBuffer = getPaginatedList(prodBuffer, max, params.offset?.toInteger())
def filters = [tag: params.tag, sort: params.sort, order: params.order]
def model = [personList: personList, filters:filters, tagList:tagList]
if (request.xhr) {
println("AJAX-Request!!!")
render(template:"Grid_Persons", model:model)
prodBuffer, offerDetails:offerDetails, filters:filters])
} else {
offerDetails: offerDetails, millList: millList, selectedMill:false, prodBufferCount: ProdBuffer.count()]
[personList:personList,tagList:tagList]
}
Person.count(), tagList:tagList]
}
def List<Person> getPersonList() {
println("getPersonList tag: "+params.tag)
def tag = params.tag
def c = Person.createCriteria()
def tempList = c.list {
if (tag) eq("tag", tag)
if (params.sort){
order(params.sort, params.order)
}
}
return tempList
}
From debugging:
The page is loaded:
getPersonList tag: null
Selected "Grails" in the filter:
getPersonList tag: Grails
AJAX-Request!!!
Klicked on the "Name"-column header
getPersonList tag: Grails
AJAX-Request!!!
-- Now the list is sorted(ascending) and filtered
Klicked on the column again:
getPersonList tag: Grails
-- Now the list is resorted(descending) and the filtering still ok but the SELECT TAGS now view "All"
Klicked the column for the third time:
getPersonList tag:
AJAX-Request!!!
-- Now the list show all lines and resorted(ascending)
Now solved by using the recommended plugin - datatables.
In case you are in a hurry you can inject https://datatables.net/ that adds the utilities you require among others
I'm trying to update a property in a polymer element with data from an ajax api call. I have something similar working elsewhere in the app where users are able to add packages dynamically.
Anyone know what I'm doing wrong here?
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="address-input.html">
<link rel="import" href="package-list.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<dom-module id="step-one">
<style>
</style>
<template>
<section id="addresses">
<div class="container">
<div class="row">
<h5>Addresses</h5>
<address-input></address-input>
</div>
</div>
</section>
<section id="packages">
<div class="container">
<div class="row">
<h5>Packages</h5>
<package-list></package-list>
</div>
</div>
</section>
<section id="submit-shipping-info">
<div class="container">
<div class="row">
<a class="waves-effect waves-light btn col s12 m12 l12" id="submit" on-click="submitInfo">Submit</a>
<template is="dom-repeat" items="{{options}}">
<p>{{item.rates}}</p>
</template>
</div>
</div>
</section>
</template>
</dom-module>
<script>
Polymer ({
is: 'step-one',
properties: {
options: {
type: Object,
notify: true,
value: []
}
},
submitInfo: function(e) {
e.preventDefault();
//add dimensions of all packages to the dimensions array
var dimensions=[];
$('#packages .package-card').each(function(){
var weight= $(this).find('.weight').val();
var length= $(this).find('.length').val();
var height= $(this).find('.height').val();
var width= $(this).find('.width').val();
var dimension={width:width,length:length,height:height,weight:weight};
dimensions.push(dimension);
});
//capture address data
var from = $('#fromAddress').val();
var to = $('#toAddress').val();
//URL that processes getting a URL
var getQuoteURL = '../v2/API/get_rates.php';
var stuff = [];
jQuery.ajax({
type: "POST",
dataType: "json",
cache: false,
url: getQuoteURL,
data:{
from:from,
to:to,
dimension:dimensions
}
}).done(function(data){
$.each(data['rates'], function(i, rate ) {
stuff.push({carrier:rate.carrier});
return stuff;
});
//show step two when ajax call completes
$('.step-two').removeClass('hide').addClass('show');
console.log(stuff);//I can see all objects I need to pass to the 'options' property
return stuff;
});
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
}
});
</script>
I'm able to console.log the array i'm trying to use, but when I try to push it to the 'options' property, it won't update.
Consider using Polymer built in methods instead of jQuery.
1. A button to submit a request.
<paper-button on-click="handleClick">Send a package</paper-button>
2. AJAX requests using <iron-ajax> element!
<iron-ajax id="SendPkg"
url="my/api/url"
method="POST"
headers='{"Content-Type": "application/json"}'
body={{packageDetails}}
on-response="handleResponse">
</iron-ajax>
3. Handle the on-click event,
On click, select <iron-ajax> by ID and call <iron-ajax>'s generateRequest()
Use either data binding or Polymer's DOM API to get the package's width, height ...etc
handleClick: function() {
this.packageDetails = {"width": this.pkgWidth, "height": this.pkgHeight };
this.$.SendPkg.generateRequest();
},
4. Handle the response
handleResponse: function() {
//Push data to options...
},
return stuff;
});
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
should be
return stuff;
this.push('options',stuff);//doesn't seem to update the 'options' property with these as a value
)};
otherwise
this.push('options',stuff);
is executed before data has arrived
The solution ended up being to put this into a variable:
var self = this;
then in the ajax .done() replace the value of the object with the new object from the ajax call.
self.options = stuff;
I guess you have to put "this" into a variable before you can overwrite it's values. Then the other issue was that I was trying to use .push() to add to it, but really all I needed to do was replace it. (Using self.push('options',stuff); didn't seem to work as far as adding to an object)
I'm working on something where there are 2 links which triggers some Ajax. However I need to turn the links into Flash buttons (AS3). I've never worked with Ajax before, and I have no idea how this can be done.
Edit:
The Ajax:
<script>
$(document).ready(function() {
$('a.catlink').unbind('click').click(function(e)
{
e.preventDefault();
var link = $(this);
var inputs = [];
var cat_type = $(this).attr('href').replace('#', '');
link.attr('disabled', 'disabled');
inputs.push('cat_type=' + escape(cat_type));
$.ajax(
{
type: "POST",
cache: false,
dataType: "html",
url: window.location.href,
data: inputs.join('&'),
success: function(html)
{
var json = $.parseJSON(html);
if (json['status'] == 1)
{
$('div.listing').html(json['html']);
}
link.removeAttr('disabled');
}
});
});
});
</script>
The HTML
<h1 class="section-head">Products
// **The 2 links*** //
<a class="catlink" href="#cinema">cinema</a> <a class="catlink" href="#smart">smart</a></h1>
<div class="listing">
<ul class="listing">
{foreach from=$products item="product_info"}
<li class="clearfix">
<div class="inner-left">
<img height="68" width="90" src="{$product_info.image}" />
<h2 class="normal mt-5">{if $product_info.price != '0'}${$product_info.price}{else}Click for price »{/if}</h2>
</div>
<div class="inner-right">
<h3 class="mb-0">{$product_info.productName}</h3>
<p class="small mb-5"><span class="quiet">{$product_info.category}</span></p>
<p class="mb-15">{$product_info.description}</p>
<a class="button getprice" href="{$product_info.url}">Buy Now</a>
<br><br>
</div>
</li>
{/foreach}
</ul>
</div>
If you're going to use AS3 then you can use ExternalInterface.call() to call a JavaScript function on the page. Though, using Ajax may not be required if you're using AS3 because you can make use of the URLLoader class to do the same thing (call a PHP script and decode a result).
If you describe more accurately what you want to achieve then I shall provide some example code and clarify a little more.