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, {});
});
});
});
Related
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'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.
I'm trying to load collapsable panels with ajax. I got it working, but my trigger fires on the a tag, so the ajax script is called when you open AND close the panel. It should not load it when you close the panel, this is overload..
My code:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse1">First panel</a></h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Second panel</a></h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div id="depUsers511"><!-- here users will be loaded through ajax --></div>
</div>
</div>
</div>
The javascript:
$('#accordion a').click(function () {
var collapse_element = event.target;
alert(collapse_element);
var href = this.hash;
var depId = href.replace("#collapse","");
var dataString = 'depId='+ depId + '&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
})
The ajax script returns the content of the div.
So, it works, but I'm looking for the correct way to fire the ajax load trigger... i think I need to use the "show.bs.collapse" event, but can't find out how to use this on a panel which contains more than one dynamic panel (with its own ID).
You can try this:
$('#accordion').on('show.bs.collapse', function(e){
var depId = $(e.target).attr('id').replace('collapse','');
...
});
I kind of solved it by adding a "open" class when loaded with data, and removing that same class if clicked when opened:
$('#accordion a').click(function () {
if($(this).hasClass("panelisopen")){
$(this).removeClass("panelisopen");
} else {
var href = this.hash;
var depId = href.replace("#collapse","");
$(this).addClass("panelisopen");
var dataString = 'depId='+ depId + '&dep=1&do=getDepUsers';
$.getJSON(dir_pre + 'ajax/users.php?' + dataString, function(data) {
$('#depUsers'+depId).html(data);
});
}
});
Not the best solution I guess, but it works.
I think instead of depending on element ID, and polluting it with numbers and do the string replacement and so, you can make use of data attributes:
<div class='collapse' data-dep-id="1" />
Then in JS:
var $elementId = $(e.target).data('dep-id')
And the same applies for Ajax URL and other attributes if needed.
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.