We Keep Coding

How to set content to easyui panel with javascript

I have a problem in using easyui panel, so I am here needing somebody's help , even thought i find a few people use easyui in stackoverflow.
I have a panel in my page like:
<div class="easyui-panel" title="" id="pp" closed="true" style="width:100%">
</div>
And then, I want to put a value of a input value to this pp panel.
The input value and button code is :
<input type="text" style="width:97%;height:40px" id="drafterId" value='ths'>
bt
Now I want to use drafter function when clicking linkbutton to realize it :
function drafter()
{
var drf=$("#drafterId").val();
alert(drf);//works OK
var drfN="<tr>"+drf+"</tr>";
$('#pp').panel('refresh', 'drf'); //works fail
}
But unlucky, $('#pp').panel('refresh', 'drf');works fail. I have tried another way:
$('#pp').html(drf);
and
$('#pp').innerHTML(drf);
They both failed. Who can help me?

$('#pp').append(drf); works OK

Remove the quotes around the variable name ‘drf’.
So $('#pp').panel('refresh', 'drf');
Becomes$('#pp').panel('refresh', drf);

How to pass element to javascript function and access the first child

I am creating check-boxes in my ASP.NET code behind a file in C#. I am adding an attribute value before adding the control to the page, therefore ASP is adding the attribute to the span surrounding the check-box and the label for the text. It looks like this:
<span data-bind="visible: showCheckBox(this)">
<input id="" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">
<label for="">Outside Source</label>
</span>
I have a function called showCheckBox() written in Knockout.js. It determines if the target checkbox should be displayed, based on the value of the selected item in the drop down list immediately preceding it. For example, if the value of the selected item in the drop down list is 1, then the target checkbox with a corresponding value of 1 would be visible. That function looks like this:
function showCheckBox(span) {
var value = span.firstChild.value;
return value == reason();
}
reason() is the view model variable that holds the value of the selected drop down list item.
No matter what I do, I cannot get the value of the check-box to be sent correctly. It is always undefined.

The first child in this HTML is actually a textNode, which firstChild will return if that is what is found. These are the actual characters it is returning: "↵ " (A return and a space).
You can use the firstElementChild property instead:
function showCheckBox(span) {
var value = span.firstElementChild.value;
return value == reason();
}
Also, don't forget to check the support tables for firstElementChild.

After thinking about it for a while also, a coworked suggested this solution.
Instead of assigning the value of the check box as the ID that corresponds to the drop down list view model variable, he suggested I assign it in the data-bind attribute instead. In my C# code behind file, that looks like this
cb.Attributes.Add("data-bind", String.Format("visible: showCheckBox({0})", reasonDetails[i].ReasonForSendingNoticeID.ToString()));
Which looks like this when displayed in HTML
<span data-bind="visible: showCheckBox(1)" style="display: none;">
<input id="" type="checkbox"
name="ctl00$MainContent$SecondaryForm$ctl00" value="Outside Source">
<label for="" style="display: inline;">Outside Source</label>
</span>
Then I changed the function as follows
function showCheckBox(id) {
return id == reason();
}
Doing it like so allowed us to directly pass the value into the function without having to pass the element or its child.
Thank you for the help and suggestions.

The problem is hidden, and it's because you're for a large part not using KnockoutJS at all. You should check the docs for the KnockoutJS checked binding.
There should very likely be no reason to check the DOM inside view models, not even those handling visibility. Instead, use the view model. You haven't quite posted a complete minimal repro, but here's what it should more or less look like:
function ViewModel() {
var self = this;
self.reasons = [{id: 1, txt: "Main reason"}, {id: 2, txt: "Other reason"}];
self.reason = ko.observable(self.reasons[0]);
self.showCheckBox = ko.computed(function() {
return self.reason().id === 1;
});
self.hasOutsideSource = ko.observable(false);
};
ko.applyBindings(new ViewModel());
pre { font-family: consolas; background: smoke; border: 1px solid #ddd; padding: 5px; margin: 5px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options: reasons, value: reason, optionsText: 'txt'"></select>
<span data-bind="visible: showCheckBox">
<label>
<input data-bind="checked: hasOutsideSource" type="checkbox" name="ctl00$MainContent$SecondaryForm$ctl00" value="1">
Outside Source
</label>
</span>
<hr>
This would be sent to your server / debug info:
<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>
If you can't take the above approach, I strongly recommend considering skipping the use of KnockoutJS, because it'll probably cause you more trouble than it'll help you if you do to much DOM manipulation on your own.

Display all data from couchDb with knockout

I'm able to display one row into myField but i want to loop through all rows.
I want to display all names in a formatted text in html. i think something with for-each in my HTML View, but im really stuck here.
My JSON from couchDB looks like this:
{"total_rows":8,"offset":0,"rows":[
{"id":"f1abbf3ccb0f15d6a66f7eadab003f53","key":"AccessBareBoneApp","value":{"Properties":{"Properties":[]},"Implements":{"Interfaces":[{"TypeName":"ITSR2.Bricks.Access.IAccessBareBoneBrick"},{"TypeName":"ITSR2.Bricks.Access.IAccessAppBrick"}]},"Name":"AccessBareBoneApp","Description":"","TypeName":"ITSR2.Bricks.Access.AccessBareBoneApp","AssemblyName":"ITSR2.Bricks.MSOffice, Version=3.0.0.0, Culture=neutral, PublicKeyToken=null","Obsolete":false}},
My main.js file:
function ViewModel() {
var self = this;
self.myfield = ko.observableArray([]);
}
var db = new PouchDB('http://localhost:5984/helloworld');
var vm = new ViewModel();
db.query("bricksetup/docs").then(function(result) {
var data = result;
console.log(data);
data.rows.forEach(function(row){
vm.data.push(row.value)
// vm.myfield(data.rows[3].value.Name);
// vm.myfield2(data.rows[2].value.Name);
})
vm.myfield(data.rows[3].value.Name);
});
ko.applyBindings(vm);
My index.html:
<h3>Brick Infos</h3>
<div data-bind="">
<p>
<b>Name:</b>
<span data-bind="text:myfield"></span>
<b>Description:</b>
<span data-bind=></span>
<b>TypeName:</b>
<span data-bind=></span>
<b>AssemblyName</b>
<span data-bind=></span>
<b>Obsolete</b>
<span data-bind=></span>
</p>
<p data-bind=>
<b>Name:</b>
<span data-bind=></span> |
<b>Validation Type:</b>
<span data-bind=></span><br>
</p>
</div>

You just need to pass the data.rows to your variable myField like this vm.myfield(data.rows); . Place it under your console.log and remove the forEach Loop.
And on Index.html:
<div data-bind="foreach:myfield">
<span data-bind="text:value.Name"></span>
</div
Hope this helps

You need to do more work on the Javascript side and assuming there is going to be more than one row then assign that to a ko.observableArray. Is that what self.myfield is for?
Assuming yes, then set up the self.myfield using something like self.myfield(data.rows). nice and simple and no need for all that pushing!
On the HTML side, for each row you need a data-bind e.g.
<h3>Brick Infos</h3>
<div data-bind="foreach: self.myfield">
I think this will work - I use ES6 Javascript so I don't have to use self = this, I would just use foreach: myfield
The rest of the html is not using proper data-bind syntax. Each field would need something like <p><span class="title">Field Title</span><span class=text data-bind="text: data.fieldName"></span></p>
Then create a css class to highlight the title and replace Field Title with whatever you want to appear to the user as the title of the field, and replace Fieldname with the relevant fieldname e.g. Name, Description, TypeName etc.
Note items which which have multiple values possible such as Implements.Interfaces use data-bind=:foreach data.Implements.Interfaces to repeat those items if needed on the page.

You're pushing into vm.data, but the observableArray field is myfield. Then you're setting the value of the observableArray to the Name field of one data item. That's a very confused approach.
It looks like your query is going to come back with a result that contains rows, which are (more or less) what you want in your array.
db.query("bricksetup/docs").then(function(result) {
vm.myfield(result.rows);
});
It also looks like each row has a value object, and the fields you're interested in are inside that.
<h3>Brick Infos</h3>
<div data-bind="foreach:myfield">
<b>Name:</b>
<span data-bind="text:value.Name"></span>
</div>
This should get you started with the fewest lines of code. You'll probably want to re-map the rows to just put the value object into myfield.

knockout - set visible only one item in a list generated by json

hi it's a cordova app that use devexpress framework based on knockout i need to set visible only one item in a list
the item should correspond to the param.id or this
id_agenzia:ko.observable(params.id),
i've tryed with jquery (setting the id "#"+$data.id_agenzia visible if == id_agenzia ) but if i integrate it doesn't work
the goal is to do something like this
if i put this line it ignores
how is the right way to set visible only the div that corresponds to $data.id_agenzia is valid for $data.id_agenzia==id_agenzia ?
thank you for help
this is the js code with jsfiddle code added
self.selected_id_agenzia = ko.observable('two');
self.jsonLista = ko.observableArray([
{id_agenzia:ko.observable('one'), nome:'N1'},
{id_agenzia:ko.observable('two'), nome:'N2'}
noDataLabel: noDataLabel,
this is the html code with jsfiddle code added
<div class="list-indentation" data-bind="foreach:jsonLista" style="padding-bottom:60px;">
<div id="$data.id_agenzia" data-bind="visible: id_agenzia()==selected_id_agenzia()">
<div class="agency-description-box" >
<span data-bind="text: $data.id_agenzia" class="agency-name"></span>
<span data-bind="text: $data.nome" class="agency-name"></span>
</div>
</div>
</div>

I think I misunderstood what you were doing with the variables. I have made a simplified fiddle to do what I think you want. To make it work:
I assumed a dxList was more or less like a foreach
I changed the name of the outer id_agenzia to selected_id_agenzia, as I was not able to get the comparison to work using $data and $root to distinguish them
I made both items ko.observables, and used the function call on each in the comparison
</div>
The code is all at the fiddle:
http://jsfiddle.net/3ktq4b9s/

Why are edit in place forms rendered together with the display version instead of being rendered on the fly?

Is there a specific reason that most everyone implements edit-in-place as a shown 'display' div and a hidden 'edit' div that are toggled on and off when somebody clicks on the associated 'edit' button like so?
<div id="title">
<div class="display">
<h1>
My Title
</h1>
</div>
<div class="edit">
<input type="text" value="My Title" />
<span class="save_edit_button"></span>
Cancel
</div>
</div>
Everywhere I look, I see edit-in-place basically handled like this. This approach certainly makes sense when you are rendering all views on the server side and delivering them to the client. However, with pure AJAX apps and frameworks like backbone.js, it seems that we could make our code much more DRY by rendering edit-in-place form elements on the fly as necessary, possibly even making a factory method that determines which form element to render. e.g.
an H1 element with class "title" is replaced by <input type="text" />
a span with class "year_founded" is replaced by <input type="number" min="1900" max="2050" />
a span with class "price" is replaced by an input with the appropriate mask to only allow prices to be input.
Is this practice of rendering all edit-in-place form elements a historical legacy leftover from when pages were rendered on the server-side?
Given the flexibility and power we have with client-side MVC frameworks like Backbone.js, is there a reason for not creating and inserting the form elements on the fly when necessary using a factory method? Something like this:
HTML
<div id="description">
Lorem ipsum dolar set amit...
</div>
<span class="edit_button"></span>
Backbone.js View
events: {
"click .edit_button": "renderEditInPlaceForm",
},
renderEditInPlaceForm: function:(e) {
var el = $(e.currentTarget).previous();
var id = el.attr('id');
var value = el.text();
var tagName = el.tagName();
var view = new editInPlaceForm({
id: id,
type: tagName,
value: value
});
$("#id").html(view.render().el)
},
Where editInPlaceForm is a factory that returns the appropriate edit-in-place form element type based on tagName. This factory view also controls all its own logic for saving an edit, canceling an edit, making requests to the server and rerendering the appropriate original element that was replaced with the .html() function?
It seems to me that if we use this approach then we could also render the <span class="edit_button"></span> buttons on the fly based on a user's editing rights like so:
<h1 id="title">
<%= document.get("title") %>
</h1>
<% if (user.allowedToEdit( document, title )) { %>
<span class="edit_glyph"></span>
<% } %>
where the allowedToEdit function on the user model accepts a model and attribute as its arguments.

It's an interesting idea. The devil is in the detail.
While your simple example is easily rendered as an editable form on the fly, things quickly get trickier when dealing with other data types.
For example - suppose my edit form requires the user to choose a value from a select list. On the display form I can simply display the user's choice, but for the edit form I am going to need those other available choices. Where do I hide them on the display? Similar issues exist for checkboxes, radio lists...
So, perhaps we should consider rendering the edit form, and then deriving our display-view from that?

After 5 Backbone apps I came to same thoughts.
When things are complicated you have forms to show relations between user data,
but in simple cases you just need input, select, checkbox over h1, div or span
Now I am searching for jQuery plugin to make simple in place editing without ajax.
jQuery but not Backbone becuase I don't want to be tight coupled with Backbone for such small thing.
Likely to wright my own jQuery + Synapse plugin http://bruth.github.com/synapse/docs/.
Synapse for binding with model and jQuery for input placing