I would like to know whether is it possible to insert an input tag in Json file? I would like to add a checkbox in here
{
"data1":"here"
}
{"row"[{
"DATA1" ："<input type='checkbox'/>"
},
{
"DATA2" ："<input type='text'/>"
}
]}
Like this?
No. The closest you could get would probably be to represent a checkbox as a string.
{
"data1":"<input type=\"checkbox\"/>"
}
Then you would be able to insert that string as html into the DOM somewhere (assuming this is for an HTML webpage)
document.getElementById("someid").innerHTML = myJSONObject.data1;
Depending on what you are trying to do you might be able to use a function that returns a checkbox.
{
"data1":function(){
var box = document.createElement("input");
box.setAttribute("type", "checkbox");
return box;
}
}
Then in your code that parses the JSON you would need to call the data1 property as a function
var myCheckboxFromJSONFile = myJSONObject.data1();
I had found the solution.
Hopefully it can help any newbies outside
{
"data1":"<input type='checkbox'>"
}
Don't use double quotes(") use single quotes(')
Related
Hi I am just beginning with angular and I am struggling to find the answer to what I'm sure is quite a simple thing to do.
I am currently getting the values of some input boxes and pushing them into my scope. This is creating one long 'array' eg:
['data-1','data-2','data-3']
I would like to format my data in the following way instead
$scope.data = [
{
'header1': 'data1-1',
'header1': 'data1-2',
'header1': 'data1-3'
},
{
'header1': 'data2-1',
'header1': 'data2-2',
'header1': 'data2-3'
}
]
This is my function as it currently is.
$scope.createRow = function(){
angular.forEach(angular.element("input"), function(value, key){
$scope.td.push($(value).val());
});
}
Any help or pointers would be greatly appreciated as I am just getting my head round the angular way
Doing this isn't hard... but before I give you a gun to shoot yourself in the foot, just to say that I think it would be beneficial to explain WHY you want structure in that other format you are mentioning. You seem to have lots of data repetition and that's always a red flag.
Now for the code, you just need to create object before pushing it to the array like:
$scope.createRow = function(){
angular.forEach(angular.element("input"), function(value, key){
var obj = {
"header1": val + "-1",
"header2": val + "-2"
};
$scope.td.push(obj);
});
}
EDIT:
OK, so you are trying to add new row to the table. First of all, you shouldn't be doing angular.forEach, but rather those input elements in HTML should bind to existing scope object, like:
// obviously use better names than Input1Value
// I am here just giving you example
$scope.bindData = {
Input1Value: null,
Input2Value: null
};
// in HTML you will do
// <input ng-model="bindData.Input1Value" />
// <input ng-model="bindData.Input2Value" />
Now that you've eliminated that nasty angular.forEach you need to have some kind of event handler, for example when user clicks the button you want to add this object to the array to which table is data bound. Just be sure to clone the $scope.bindData object when you add it to array.
$scope.createRow = function(){
var newRowData = $scope.cloneObject($scope.bindData);
$scope.td.push(newRowData);
}
// http://heyjavascript.com/4-creative-ways-to-clone-objects/
// https://stackoverflow.com/questions/728360/most-elegant-way-to-clone-a-javascript-object
$scope.cloneObject = function(objToClone) {
var newObj = (JSON.parse(JSON.stringify(objToClone)));
}
To close this answer off - keep in mind, if you ever find yourself directly referencing HTML DOM elements in Javascript with AngularJS - you are doing something wrong. It's a nasty habit to eliminate, especially if you are coming from jQuery background (and how doesn't?), where everything is $("#OhHiThere_ElementWithThisId).
Obviously the main thread on this topic on StackOverflow is this one:
“Thinking in AngularJS” if I have a jQuery background?
However I find that it's too theoretical, so Google around and you may find better overviews like:
jQuery vs. AngularJS: A Comparison and Migration Walkthrough
First time, long time...
I am using Ext JS 4.2.2.1144
I have a grid and my query from the server(php) is returning metadata in the form of json that was previously generated when a user decides to realign and resize the columns and then save that information. All of the fields like width, dataIndex, align, and all that are reconfiguring the grid just fine when using the metaChanged function. The problem that I am having is that one of the columns needs to send over the information for a tpl which is actually the location of an image to show. My Json looks like this
{
"totalCount":"2",
"root":"items",
"metaData":
{
"fields":[
{"name":"queryid"},
{"name":"createUser"},
{"name":"subject"},
{"name":"priorityImage"}
],
"columns":[
{
"dataIndex":"queryid",
"width":100,
"text":"Queryid"
},
{
"dataIndex":"createUser",
"width":100,
"text":"Owner",
"align":"center"
},
{
"dataIndex":"subject",
"width":200,
"text":"Subject",
"hidden":true
},
{
"dataIndex":"priorityImage",
"width":70,"text":"Priority",
"hidden":true,
"align":"center",
"xtype":"templatecolumn",
"tpl":['<img src="_images/{priorityImage}" height="20px" width="20px" />']
}
]
},
"items":[
{
"queryid":"1",
"createUser":"1",
"subject":"Here is a new project",
"priorityImage":"orange.png"
},
{
"queryid":"1",
"createUser":"1",
"subject":"SAL Form 4",
"priorityImage":"roundlightPurple.png"
}
]
}
I have tried all kinds of different ways of sending the tpl for this last column but none of them are success. Anybody with any clues on how to accomplish this? The result ends up being the text and not the actually image. If I load the grid directly from the store using the default model, I get the image from the tpl but just not when doing it through metadata. I have tried single quotes, double quotes, no braces, with braces, lol. Im out of ideas to try. Hopefully I am being clear enough. Anyhoo, thanks for any help in advance, this one is really driving my crazy,
thanks,
C5
I have done something similar long time ago when I needed to send renderers (functions) but they always appear as text. At that time I haven't found other way but to scan the received metaData to see if there is a renderer and call eval on the received text to get the function.
Although not a "do this" answer, I hope it helps.
I figured a work around for this although maybe not the most ideal solution it does work.
When sending the tpl to the Server, it actually gets translated from
<img src="_images/{priorityImage}" height="20px" width="20px" /> to
<img src="_images/{priorityImage}" height="20" width="20" />
So here is my fix for now anyway:
Before I call the code to load the store
Ext.getCmp('lblCurrentMetaGrid').setText('projectsGridGrid');
store.on('metachange', metaChanged, this);
Then in the metaChanged function it looks like this:
function metaChanged(store,meta){
var gridname = Ext.getCmp('lblCurrentMetaGrid').text;
var grid = Ext.getCmp(gridname);
for(var c = 0; c < meta.columns.length; c++ ){
var column = meta.columns[c];
var tpl = column.tpl;
if ( tpl !== undefined){
meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace('<','<');
meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace('>','>');
meta.columns[c].tpl[0] = meta.columns[c].tpl[0].replace(/\"/g,'"');
}
}
//lets look at all the metadata
grid.reconfigure(store,meta.columns);
}
Now, I am getting my image in the grid.
Hi I need to parse XML file using jquery. I created read and display functionality. But when a word having single quote not working.
My XML is like this
<container>
<data name="Google" definition="A search engine"/>
<data name=" Mozilla's " definition="A web browser"/>
</ container>
using my jquery code I can read definition of Google. But I can't read Mozilla's definition due to that single quotes. This is my jquery code.
var displayDefinition = function(obj){
$.get("definitions.xml", function(data){
xml_data1.find("data[name^='"+obj.innerHTML+"']").each(function(k, v){
right=''+ $(this).attr("Defination") + '';
}
}
$(".result").append(right);
}
Any body knows the solution for this please help me.
Thanks
jQuery deals with single quotes very well. the structure of your function looks really wild though. I changed it a big assuming you want to create a function that can display the definition based on passing it a name: http://jsfiddle.net/rkw79/VQxZ2/
function display(id) {
$('container').find('data[name="' +id.trim()+ '"]').each(function() {
var right = $(this).attr("definition");
$(".result").html(right);
});
}
Note, you have to make sure your 'name' attribute does not begin or end with spaces; and just trim the string that the user passes in.
I'm trying to create a code snippet to remove all style attributes regardless of tag using HtmlAgilityPack.
Here's my code:
var elements = htmlDoc.DocumentNode.SelectNodes("//*");
if (elements!=null)
{
foreach (var element in elements)
{
element.Attributes.Remove("style");
}
}
However, I'm not getting it to stick? If I look at the element object immediately after Remove("style"). I can see that the style attribute has been removed, but it still appears in the DocumentNode object. :/
I'm feeling a bit stupid, but it seems off to me? Anyone done this using HtmlAgilityPack? Thanks!
Update
I changed my code to the following, and it works properly:
public static void RemoveStyleAttributes(this HtmlDocument html)
{
var elementsWithStyleAttribute = html.DocumentNode.SelectNodes("//#style");
if (elementsWithStyleAttribute!=null)
{
foreach (var element in elementsWithStyleAttribute)
{
element.Attributes["style"].Remove();
}
}
}
Your code snippet seems to be correct - it removes the attributes. The thing is, DocumentNode .InnerHtml(I assume you monitored this property) is a complex property, maybe it get updated after some unknown circumstances and you actually shouldn't use this property to get the document as a string. Instead of it HtmlDocument.Save method for this:
string result = null;
using (StringWriter writer = new StringWriter())
{
htmlDoc.Save(writer);
result = writer.ToString();
}
now result variable holds the string representation of your document.
One more thing: your code may be improved by changing your expression to "//*[#style]" which gets you only elements with style attribute.
Here is a very simple solution
VB.net
element.Attributes.Remove(element.Attributes("style"))
c#
element.Attributes.Remove(element.Attributes["style"])
I've tried to access buttons in my menu. I only want to add listeners to the items that is in the XML file im loading.
The thing is, i dont know how to call a button i've named "Var1_btn" when i've got a string "Var1".
Does anyone know how to call buttons from a for-loop?
for each(var chapter in presentation_xml.*)
{
chapter + "_btn".addEventListener(MouseEvent.MOUSE_DOWN, traceit);
}
is what i came up with...
Assuming you load the xml into a variable called presentationXML, it's like this:
for each(var chapter in presentationXML.*)
{
this[chapter + "_btn"].addEventListener(MouseEvent.MOUSE_DOWN, traceit);
}
You can use:
for each(var chapter in presentation_xml.*)
{
this[chapter + "_btn"].addEventListener(MouseEvent.MOUSE_DOWN, traceit);
}
but you could also use getChildByName, like this:
for each(var chapter in presentation_xml.*)
{
var myBtn:MovieClip = getChildByName(chapter + "_btn");
myBtn.addEventListener(MouseEvent.MOUSE_DOWN, traceit);
}
Here is a good post on when to use getChildByName.
DisplayObjectContainer::getChildByName()
Better use chapter.toString().
The same effect, but other coder will read it ad understand, that chapter is being converted from XML to its string representation when concatenates with string literal.