I am using ng-grid(UI-grid) in my angular project.
My client gave me tabled grid as mockup. Now I want to design UI-grid as per the clients design.
Please suggest me the way how can I achieve this.
Here is an example on how to add image to ng-grid. You have to use cellTemplate, the content of this can be stored into a separate *.html file as well...
// main.js
var app = angular.module('myApp', ['ngGrid']);
app.controller('MyCtrl', function ($scope, $http) {
$http.post('/MyPage/index.json?details=full').success(function (data) {
$scope.carData = data;
});
$scope.updatecar =function(row){
$http.post('/MyPage/index.json?details=&carID='+row.getProperty('carID')+'&enable='+row.getProperty('link')).success(function (data) {
$scope.carData = data;
});
};
$scope.gridOptions = {
data: 'carData',
columnDefs: [{field: 'carName', displayName: 'car Name'},
{field: 'carTemperature', displayName: 'Temperature'
, cellTemplate:
'<div ng-class="ngCellText">' +
'{{row.getProperty(col.field)}} <img ng-src="{{row.getProperty(\'imageName\')}}" alt=""/>'+
' <a href ="" ng-click="updatecar(row)">' +
'{{row.getProperty(\'linkText\')}} </a>' +
'</div>'
}
]
};
});
Related
I installed an extension for my magento store, that make a quickview modal in the products list (imedia quickview - it' actually a bootstrap modal ) and works nice, but due to many products in the list i add a script for infinite scroll (http://infiniteajaxscroll.com/vendor/jquery-ias/dist/jquery-ias.min.js). Everything was fine, until i saw that the infinite scoll doesn't seems to work if the modal popup appears.
Here it's what I've done so far:
<pre>
<script type="text/javascript">
jQuery(window).load(function(){
activatePopup();
// Initialize the pagination plugin
var ias = jQuery.ias({
container : ".category-products",
item : ".product-item ",
next : "a.next",
pagination : '.pages',
loader : "<img src='/img/sys/loader.gif' />",
triggerPageThreshold : 0,
});
// Pagination plugin callback function
ias.on('rendered', function(items) {
activatePopup();
});
});
function activatePopup() {
var baseUrl = '<?php echo Mage::getBaseUrl(); ?>';
var containerClass = 'category-products';
$('.'+containerClass+' li').each(function(e){
var productId = $(this).find('.quick_view_btn').attr('id');
$(this).click(function(){
$(this).find('.quick_view_btn').html('Incarca..');
$.ajax({
type: "POST",
url: baseUrl+"quickview",
data: "id="+productId,
success: function(msg){
//$("html, body").animate({ scrollTop: 0 }, "slow");
$('.'+containerClass+' li .quick_view_btn').html('MAI MULT');
$('#modal .main-content').empty().append(msg);
$('#modal').css({'display': 'block', 'top':'50%','visibility':'visible','opacity':'1'});
$('body').css('overflow', 'hidden');
// popup submit validation
}
});
});
});
}
</script>
</pre>
I have an action to set a Travel enabled , it works good but now I'd like to make it with ajax so I have installed FOSJsRoutingBundle but the problem is that I don't know how to write the ajax code.
Route
travel_enable:
path: /travel/enable/{id}
defaults: { _controller: "AppBundle:Travel:enable" }
options:
expose: true
Action
public function enableAction(Travel $travel)
{
$em = $this->getDoctrine()->getManager();
$travel->setEnabled(true);
$em->flush();
$referer = $this->getRequest()->headers->get('referer');
return $this->redirect($referer);
}
twig
Enable
javascript
<script type="javascript">
// what to put here else
Routing.generate('travel_enable', { id: '...' });
</script>
Is there a any other reason behind using FOSJsRoutingBundle than because of ajax capability?
If no, you could remove it and pre-generate all URLs needed. Something like this
Twig:
Enable
JS:
$('a.dyn-link').on('click', function(){
var URL = $(this).attr('href');
$.post(URL, {
// Your post data here, if any
}).done(function(response){
alert("Suceess!");
}).error(function(){
alert("Error!");
});
});
Now, the diffrent approach is needed when you dynamically generate your <a> tags, in which case you will need FOSJsRoutingBundle:
Twig:
<a data-entity-id="YOUR-ENTITY-ID-GOES-HERE" class="btn btn-xs btn-success dyn-link" title="Enable"> Enable </a>
JS:
// You have to use event delegate
$(body).on('click', 'a.dyn-link', function(){
var entityId = $(this).attr('data-entity-id');
var URL = Routing.generate('travel_enable', { id: entityId });
$.post(URL, {
// Your post data here, if any
}).done(function(response){
alert("Suceess!");
}).error(function(){
alert("Error!");
});
});
Hope this helps...
I try to fetch some API data and render on Client side. But I do not understand how should I proceed. I'm quite new to react. So I have been creating a React component which fetches api data but on render I do not have any list generated
on page load the api loads some initial data in form of nested object
than the component should parse this results child node which has about 10 elements
var Panel = ReactBootstrap.Panel;
var ProductBox = React.createClass({
getInitialState: function() {
return {
data: [],
products:[]
};
},
componentDidMount: function() {
$.get(this.props.source, function(result) {
var products = jQuery.parseJSON(result);
if (this.isMounted()) {
this.setState({
products:products.productItems.productItem
});
}
}.bind(this));
},
render: function() {
console.log(this.props.products);
return (
<div className="ProductBox">
<div>
<Panel header={this.state.products.name}>
<img className="img-responsive" src="{this.state.image}"/>
</Panel>
</div>
</div>
);
}
});
React.render(
<ProductBox source="/my/api" />,
document.getElementById('content')
);
You should realy not create a whole new component just for your ajax requests as you will have to rewrite/duplicate the component In every part of your application where there is ajax.
A better solution would be to create a module that handles get,post etc and then require it and using it from all over the application.
When you set the state, you are doing it wrong.
$.get(this.props.source, function(result) {
var products = jQuery.parseJSON(result);
if (this.isMounted()) {
this.setState({
products:productItems.productItem
});
}
}.bind(this));
productItems is not defined there. It should be products correct? Because you are doing var products = jQuery.parseJSON(result);.
I have a form inside a modal box of a bootstrap theme. The form contains few input fields and a Dropzone field, all of which sends the data across to the server through ajax. After filling the form, I, obviously need to reset the form for next set of inputs. I have managed to successfully reset the form fields, EXCEPT the Dropzone image.
So now when I click submit, after filling the form, the data is entered. On clicking the button to open the modal again to add a new set, the previous image is still shown there. I need that also to be gone.
I kept searching for a solution on S.O and many other places. I couldn't get a solution. Any guidance is appreciated.
HTML:
<form enctype="multipart/form-data" id="addProductImageForm" class="dropzone dz-clickable" action="#">
<div class="dz-default dz-message" ><span>Click here to upload Product Image</span></div>
</form>
JS:
Dropzone.options.addProductImageForm = {
paramName: "productImage",
maxFilesize: 2,
maxFiles: 1,
uploadMultiple: false,
acceptedFiles: "image/*",
dictDefaultMessage: "Click to Upload",
addRemoveLinks: true,
accept: function(file, done) {
if (file.name == "bg.png") {
done("Naha, you don't.");
}
else {
done();
}
},
success: function(d, response, test) {
var value = response.replace("int(0)", "");
var value2 = value.replace(/(\r\n|\n|\r)/gm, "");
$('#product_imageName').val(value2);
},
init: function() {
this.on("maxfilesexceeded", function(file) {
alert("No more files please!");
});
}
};
$("#addProductImageForm").dropzone({url: "/path/to/upload_product_image.php"});
.
.
.
.
var formData = {
(input values here)
};
$.ajax({
type: 'POST',
url: 'path/to/projectsAction.php',
data: formData,
encode: true
})
.done(function(data) {
var value3 = data.replace(/(\r\n|\n|\r)/gm, "");
$('#project_productId').append('<option value="' + value3 + '" selected="selected">' + formData.product_name + '</option>');
$("#addProductForm").find("input[type=text], textarea, select").val("");
$("#addProductImageForm").html("");// THIS IS THE LINE THAT REMOVES THE THUMBNAIL. (From the answer given by xrcwrn)
$('.close').click();
});
event.preventDefault();
If you are using dropzone like
<form action="/file-upload"
class="dropzone"
id="my-awesome-dropzone"></form>
after posting your data reset your dropzone container like
$("#my-awesome-dropzone").html("");
I am looking to call an ajax function inside the Datatables mRender function that will use an id from the present ajax source to get data from a different ajax source.
To put this into perspective, I have:
A listing of requisitions from different clients in one Datatable.
In this listing I have a client id. I want to get the client Name to be shown on the table instead of the client Id. However the Client Name and other client details are in the clients table hence these details are not in the requisitions json data. But I have the Client Id.
How do I use this to get client name inside the mrender function? E.g
{"sTitle":"Client","mData":null,
"mRender":function(data){
//ajax function
}
},
Thank you in advance,
Regards.
I don't believe this is how you are supposed to deal with your data. However I also use an AJAX data source in my mRender function as stated below.
$(document).ready(function(e){
$('.products').dataTable({
"bProcessing": true,
"sAjaxSource": window.location.protocol + "//" + window.location.hostname + '/product/getAll',
"aoColumns": [
{ "sTitle": "Pid", "bVisible" : false},
{ "sTitle": "Pname" },
{ "sTitle": "Pprice" },
{ "sTitle": "Pgroups",
"mRender" : function( data, type, full ){
console.log( data, type, full );
console.log(category.getAll());
return 'test';
}
}
]
});
});
De category object is initialized in a selfinvoking function. I used this to prevent the function from loading the data remotely each time the function is called.
It looks like this:
(function(){
if(typeof category === 'undefined'){
category = {};
}
category.getAll = function(){
if(typeof category.all === 'undefined'){
$.ajax({
'type' : 'POST',
'async': false,
'url' : window.location.protocol + "//" + window.location.hostname + "/category/getAll",
'success' : function(data){
console.log(data);
category.all = data;
},
'error': function(a,b,c){
console.log("You shall not pass!",a,b,c);
alert('stop');
}
});
}
return category.all;
}
})();