<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="document"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
result is [object HTMLDocument] how to change into html
Change handle-as="document" to handle-as="html"
Use underscore.js utility named _.template to convert it into HTML. It is basically used to load partial HTML content. I know this is not good one solution but it will solve your purpose.
app.handleResponse = function(e, detail){
var html = _.template(detail.response);
}
<iron-ajax
auto
url= 'http://localhost/sh_new/index.php/mobile/notes/{{misi}}'
handle-as="html"
on-response="handleResponse"
last-response = "{{noteResponse}}">
</iron-ajax>
{{noteResponse}}
Related
I have an API that sends a Json to me. But I don't know how to show it into my html. I know that I have to use Ngfor but it doesn't work. This is my code.
SaveData(){
var dataToSend2 = "Hola";
var dataToSend = {"num_personal":"419","anio_pago":"2022","periodo_pago":"09"};
console.log(dataToSend);
this.proveedor.saveData(dataToSend).subscribe(
(dataReturnFromService)=>{
this.dataFromService = (dataReturnFromService);
let obj = JSON.parse(this.dataFromService);
this.dataFromJson = obj;
console.log(obj);
}
)
}
This part gives me a Json with the data from my API, but I don't know how to use the Json "obj" to show it into the html
you forgot to show your html code. but it should work if it looks like this:
<div *ngFor="let x of dataFromJson">
<span>{{x.label}}</td>
</div>
I'm creating form using createElement() in ReactJSX.
My code looks like this:
var form = document.createElement('form');
form.id = "new_message_form";
form.method = 'post';
form.className = 'chat_input';
I want to use data-remote="true" in this form (it should be something like this:
form.data-remote="true";
Can anybody advise how to do this?
Because there is no standard attribute like data-remote or remote in html forms, it's just custom attribute that is related to rails specificly.
Docs on data-* attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
So, to set that attribute, you need to set this attribute explicitly:
form.setAttribute("data-remote", "true");
JSX
<form id="new_message_form" method="post" className="chat_input" data-remote="true"/>
desugared to JS
React.createElement("form", { id: "new_message_form", method: "post", className: "chat_input", "data-remote": "true" })
You can use JSX online in the Babel REPL to see if it gets compiled to what you need: http://babeljs.io/repl/
I solved my problem with setting attribute directly to form.
Code: form.setAttribute("data-remote", "true");
I am completely new to angular js and am trying to build a google map widget in Service Portal within ServiceNow that dynamically shows the user's job location. I have a server script that pulls and formats the location:
var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}
loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");
data.src = loc2;
And my HTML looks like this:
<div class = "map-container">
<iframe ng-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>
</div>
The iframe and {{data.src}} do not work together. If I take away the iframe portion of the code and replace it with {{data.src}}, the address loads correctly. Also, if I replace {{data.src}} with a real address (i.e. washington+dc), the map shows Washington DC correctly.
Can someone help me troubleshoot this issue?
Thanks!
You can have a function defined in the controller and pass the url to it,
routerApp.controller('AppCtrl', ['$scope','$sce', function($scope,$sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
HTML
<iframe ng-src="{{trustSrc(https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}})}}'></iframe>
demo
I am trying to create a simple bar chart, but when appending the bars to the DOM I get this error
Object [object Object] has no method 'appendChild'
$rootScope.drawChart = function (data,selector,padding){
var max = Math.max.apply(Math, data);
var chart = angular.element(document.getElementById("chartxx"));
var barwidth = ((chart.offsetWidth-(data.length-1)*padding-(data.length)*10)/data.length);
var sum = data.reduce(function(pv, cv) { return pv + cv; }, 0);
var left = 0;
for (var i in data){
var newbar = document.createElement('div');
newbar.setAttribute("class", "bar");
newbar.style.width=barwidth+"px";
newbar.style.height=((data[i]/max)*100)+"%";
newbar.style.left=left+"px";
console.log(chart);
angular.element(document.getElementById("chartxx")).appendChild(newbar);
left += (barwidth+padding+10);
}
}
var values = [85,95,120,100,200,200,230,230,60,320,23,3433,434,45,23,23];
$rootScope.drawChart(values,"#chartxx2",5);
<div class="wrapperx2">
<div id="chartxx"></div>
</div>
appendChild() is a method inherent to native HTML objects, aka the result of document.getElementById. When you give that HTML object to angular.element it becomes a jQuery Object. jQuery objects have a similar method called append()
So you can do document.getElementById("chartxx").appendChild(newbar) or angular.element(document.getElementById("chartxxx")).append(newbar).
So that should answer your question but I can't help but ask myself : why would you do something like that when you're using AngularJS ?
Edit
Ok so here's a very poorly achieved version of what I would have done in your place (if I was ABSOLUTELY unable to use an external library, because using an external library for charts is what I would normally do). I suggest you see and try to understand how the ng-repeat works here and try to apply it to your case.
angular.element doesn't contain method appendChild
angular.element doc
You can try:
chart.append(newbar);
How do I get the ExtJs component object of a Div by class name?
Say my div is:
<div class="abc"></div>
How do I get the ExtJs object of this Div to perform e.g. getWidth()
Note: There is no id given.
What I tried:
Ext.select(".abc")
Ext.query(".abc")
Edit:
Error:
Object has no method 'getWidth'
<div id="main">
<div class="abc"></div>
</div>
var d = Ext.get( "main" );
d.query('.abc').getWidth();
Use
var dom = Ext.dom.Query.select('.abc');
var el = Ext.get(dom[0]);
This will return an Ext.Element. You can then use ext methods on el like so
el.on('click', function(){}, scope);
or
el.getWidth()
I believe you mean Ext.dom.Element (not ExtJs component object). If yes try this code
var d = Ext.get( "main" );
alert(d.down('.abc').getWidth());
demo
For Ext4 and up you could use the following:
Ext.ComponentQuery.query('panel[cls=myCls]');
And you will get and array of this components
source: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
Ext.select('abc');
This method works in EXT 4 also.
In your example, just remove the dot when calling the string of the class name.