In Angular is it possible to grab data from an AJAX call, and translate it into HTML that is put into a Directive template?
Here is a Pseudo Example below:
App.directive('aDirective', function (){
var getTemplate = function() {
var template = '';
//Make Ajax call here
...
angular.forEach(content_from_ajax, function (data) {
template += '<li>data</li>';
});
return template;
}
return {
restrict: "E",
template: getTemplate();
};
});
HTML:
<ul>
<a-directive></a-directive>
</ul>
This example would show an arbitrary length list.
How would I go on doing this?
Just because you are writing a directive, you shouldn't forget how normal Angular things, like templating based on data, are done.
In other words, you seem to receive an array of data from the backend, and you want to render the data in a list. Isn't it the perfect job for an ng-repeat?
App.directive('aDirective', function (AjaxService){
return {
restrict: "E",
template: '<li ng-repeat="item in content_from_ajax">{{item}}</li>',
link: function(scope){
// AjaxService here is a standin to how you get data from the backend
AjaxService.getData()
.then(function(data){
scope.content_from_ajax = data;
});
}
});
The ng-repeat would just work normally - i.e. iterate over the data and produce a template.
Also, template or templateUrl properties of the directive definition object do not support async operations, so your entire idea of asynchronously fetching a template in getTemplate and then using the result with template: getTemplate() would not have worked.
Related
I have a js file located in assets folder (not View). can i pass a varible from a controller?
In view file:
The Js is called like this
<canvas id="chart1" class="chart-canvas"></canvas>
</div>
It is not possible (in my point of view) to put a variable to external JS file. You can use data-... attributes and get values from html elements.
For example you can pass your PHP variable as a json encoded string variable in your controller.
$data['chart_info'] = json_encode($chart_info);
return view('your_view', $data);
Then put it in data-info like this.
<canvas id="chart1" class="chart-canvas" data-info="{{ $chart_info }}"></canvas>
And finally in JS, you can get the variable and decode (parse) it as following.
let canvas = document.getElementById('chart1');
let info = JSON.parse(canvas.dataset.id);
console.log(info);
You can put that part of the Javascript in the view and send the variable to the same view. For example, add a section in view:
#section('footer')
<script type="text/javascript">
</script>
#endsection
Do not forget that you should add #yield('footer') to the end of your layout view.
I don't like to mix javascript and PHP/Blade, it might be hard to read the code in the future... You could use a different approach, loading the chart with a async ajax request.
You will have to create a end-point that returns the data you need for your chart:
Your router:
Route::get('/chart/get-data', [ ControllerName::class, 'getChartData' ]);
Your controller method:
public function getChartData() {
$chartData = [];
// Your logic goes here
return $chardData;
}
In your javascript (using jquery) file there will be something like that:
function loadChartData() {
$.ajax({
'url': '/chart/get-data',
'method': 'GET'
})
.done((data) => {
// Load your chart here!!!
})
.fail(() => {
console.log("Could not load chart data");
});
}
Hope I helped ;)
Im trying to do what is suggested here: How to reopen a Django form in a jQuery dialog when the form validation fails in the backend?
But I don't have enough points to add a comment there..
In my base html page i have a link which opens a dialog with a Django-form. I use the jquery load() to fill the Dialog with this child-html-template. In this child template i have a submit button. I'm trying to bind this button to an ajax function that will:
Post the form to the right URL
Fetch the response from Django view (the form as HTML to be able to show valdidation errors)
Replace the content in the dialog box with the data i get back from the submit-POST.
Is this possbible? Been working on this for days now and i just cant make it happen. Can somone post an example with code to end my suffering.. It's the ajax that is my biggest problem.
Where should i put the script? In the base or the child template? Do you have any alternative solutions?
Thank you!
I did this not long ago in. I found it easier to send the errors in json, and then handle them client-side and attach them to the relevent fields. Like so:
Use ajax to load the form from a view into the jQuery dialog box
When the user sends the data send the information to same view
If validation fails, send errors as a json array. Use js on client-side to attach them to the relevant fields
If succeeds send a positive response of some kind
Check out this excellent example for reference
edit
Here's a working example. Not sure I'm using the best methods to do this, but I think it's pretty understandable. Also, I'm not accounting for the possibility of non-ajax form submit (it's easy enough to do, some logical conditioning using form.is_ajax() and see example linked above for further reference).
So first the views (ContactForm is the same as the one linked):
import json
from django.http import HttpResponse
from django.shortcuts import render_to_response
def home(request):
return render_to_response('index.html') #nothing special here
from django.views.decorators.csrf import csrf_exempt
from cStringIO import StringIO
#csrf_exempt #you should use csrf, I'm just skipping this for the example
def contact(request):
if request.method == 'POST':
form = ContactForm(request.POST)
response = {}
if form.is_valid():
response["status"] = "OK"
# save the data, or do whatever.
else:
response["status"] = "bad"
response.update(form.errors)
# now just to serialize and respond
s = StringIO()
json.dump(response, s)
s.seek(0)
return HttpResponse(s.read())
else:
form = ContactForm() # An unbound form
return render_to_response('contact.html', {
'form': form,
})
As you can see, if there's nothing here you get an html with the form, if not, you get a json response with an object called response which contains 'status' and might also contain errors. I'm using StringIO with json.dump(data, file) as it has always proved the least buggy and most fluent way I ever used to serialize to json (seriously. You won't believe how easily it can break).
Now let's go over the client side:
base.html:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
</head>
<body>
{% block content %}
{% endblock %}
</body>
</html>
contact.html:
{% extends 'base.html' %}
{% block content %}
<form method="post" id='myform'>
{{ form.as_p }}
</form>
{% endblock %}
and finally, the main.html with the relevant js. This is where the magic happens:
{% extends 'base.html' %}
{% block content %}
<button class='btn'>Contact!</button>
<div id="dialog-modal">
</div>
<script>
$(function() {
$('button').on('click', function() {
// first things firts, fetch the form into the dialog
$('#dialog-modal').load('contact/ #myform');
// initiate dialog
$('#dialog-modal').dialog({
height: 450,
modal: true,
// I'm using the built-in buttons, but you can use your own
buttons: {
Send: function() {
var dialog = $(this),
form = $('#myform'),
data = form.serialize();
$('.off').remove(); // this is to avoid duplicates
// run ajax post call
$.ajax({
url: 'contact/',
data: data,
type: 'post',
// if successful print response
success: function(response) {
res = $.parseJSON(response);
// if form was successful:
if (res['status'] == 'OK') {
// form was successful
alert('Thank you! Form has been submitted'); // say thank you
dialog.dialog('close'); // close dialog
}
// if not...
else if (res['status'] == 'bad') {
delete res['status'] // we don't need this anymore...
var errors = res; // just for simplicity
$.each(errors, function(key, value) {
// i.e. key='subject' and value is the error message itself
var err = $('<span></span>', {
'class': 'off',
'text': value
}),
br = $('<br></br>', {
'class': 'off',
}),
input = $('#id_'+key).parent(); //find the parent div for the relevant input by key
// add a small break
br.appendTo(input);
// add the error
err.appendTo(input);
// add some styling
err.css('color', 'red').css('font-size', '10px');
});
}
}
});
}
}
});
});
});
</script>
{% endblock %}
Hope that's not too much. Here's an image how it looks after attempting to send:
Pick it up from here. There's a lot of room to play around and extend this.
Good luck!
I am writing a plugin and the widget contains drop-down lists and needs to retrieve values for each successive drop-down list from the database using AJAX based on the previous drop-down list's selected value.
I am going off a slightly modified version of the code from the WordPress codex found here:http://codex.wordpress.org/AJAX_in_Plugins
For some reason the action function either isn't being called or the there is some error in my code:
// add action hooks
add_action('wp_footer', 'er_qm_ajax_handler' );
add_action('wp_ajax_repopulate_widget_club_type', 'repopulate_widget_club_type');
add_action('wp_ajax_nopriv_repopulate_widget_club_type', 'repopulate_widget_club_type');
// action for the wp_footer hook to insert the javascript
function er_qm_ajax_handler(){
?>
<script type="text/javascript" >
jQuery(document).ready(function($) {
jQuery('#widget_manufacturer').val('3').change(function(){
var manufacturer = $("#widget_manufacturer").val();
var data = {
action: 'repopulate_widget_club_type',
selected_manufacturer: manufacturer
};
// since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
jQuery.post(ajaxurl, data, function(response) {
alert('Got this from the server: ' + response);
});
});
});
</script>
<?php
}
// The action function
function repopulate_widget_club_type(){
die("Got to the action");
}
Not exactly sure what I am doing wrong as I am getting no response from the AJAX post, I know that the jQuery .change() is working as I set up some alert()'s to test it out once I altered the dropdown lists values.
Any thoughts and help will be greatly appreciated, thanks!
You need to define the value of ajaxurl like this:
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>'
It's prefferable to define it in javascript's global scope so before this line:
jQuery(document).ready(function($) {
I'm trying to create a directive that would enhance an HTML element. So I managed to get the directive to run and to be associated with the element My current code is something like this:
angular.module('myModule', [])
.directive('myDirective', function() {
return {
restrict: 'C',
replace: false,
scope: {},
link: function(scope, element, attrs) {
}
}
});
Now I would like to add new methods to the HTML element, for example I would like to do this:
// Pseudo code
myElement.reset();
myElement.reload(); // etc.
What would be the best way to add these methods to the directive?
Adding new methods to elements is not the Angular way. The angular way would be creating object with fields, passing it to directive and watch for field changes inside directive. Here is simple example: http://plnkr.co/edit/5v5mN69Bu18jpnoGwYqj?p=preview
Your example of your directive is very basic, so I can't see what do you want to achieve.
At least I can say: You can define new functions as functions of the scope , e.g.
...
link: function(scope, element, attrs) {
scope.reset = function() {
// reset something
}
// ...
}
If you want to access data loaded (e.g. for use in function reload()) in the scope you should write a controller for this use. so you can inject a service as a data source.
Implementing functions bound to elements directly is more the jQuery way to do not the angularjs one. In angularjs you work with scopes mainly.
Maybe you provide a more complete example at best using jsfiddle or plnkr, I think it easier to help to see your use case or your problem as a piece of working code.
One way to add these methods to your directive is to make the directive a controller (aka a subview). The $scope param in the controller will give you bi-directional access to the HTML in the template:
For example:
.directive("myDirective", function() {
var controller = ['$scope', function teamCountCtrl ($scope)
{
$scope.reset = function() {
// modify $scope.obj
};
$scope.reload = function() {
// modify $scope.obj
};
}];
return {
replace: true,
templateUrl: 'js/directives/teamCount.html',
scope: {
obj: '='
},
controller: controller
}});
Then in the template HTML you can call reset() or reload():
<div>
<a tabindex=-1 class="btn" href="#" ng-click="reset()">
<i class="fa fa-fw"></i>
</a>
<a tabindex=-1 class="btn" href="#" ng-click="reload()">
<i class="fa fa-fw"></i>
</a>
I want to use ajax for add data in database and i found following code in net and it is working fine.
<script language='javascript'>
reqObj=null;
function saveCust(){
document.getElementById('res').innerHTML='processing';
if(window.XMLHttpRequest){
reqObj=new XMLHttpRequest();
}else {
reqObj=new ActiveXObject('Microsoft.XMLHTTP');
}
reqObj.onreadystatechange=processSave;
reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
reqObj.send(null);
}
function processSave(){
if(reqObj.readyState==4){
document.getElementById('res').innerHTML=reqObj.responseText;
}
}
</script>
Above code sends only one String but, i have 5 Strings in my form.
Please anybody alter the code for sending multiple data.
The problem is that you're sending a single parameter in the reqObj.open function:
reqObj.open('POST','./custSave?reqObj.open('POST','./cName?id='+document.getElementById('CustCode').value,true);,true);
Note that the only parameter you send is id.
You can add more parameters in the flavor of QueryString:
id=something&otherParameter=else //and more parameters
IMO the easiest way to handle an ajax request would be using jQuery, as shown and heavily explained by BalusC in How to use Servlets and Ajax?.
Based on the samples there and jQuery Ajax POST example with PHP, you can come with the following code:
Assuming the 5 Strings are in the form
function saveCust(){
$('#res').html('processing');
var $form = $(this);
var serializedData = $form.serialize();
$.post('./custSave', serializedData, function(responseText) {
$('#res').html(responseText);
});
}
Assuming there's data outside the form
function saveCust(){
$('#res').html('processing');
var $form = $(this);
var serializedData = $form.serialize() + "&id=" + $('#CustCode').val();
$.post('./custSave', serializedData, function(responseText) {
$('#res').html(responseText);
});
}
And you can even enhance this using more jQuery functions, but that's outside the scope of this answer.