How to get Ember compoment's "ID" attribute? - jquery-ui

I am using a ember components in a recursive manner and im going to make particular components as draggable in jquery-ui. so,i need to get its corresponding view id like "ember143" for the following HTML view,
<div id="ember143" class="ember-view"></div>
is there a way to get the id attribute?
NOTE: i know i cant set a unique class name to get its view element by
var Component = Ember.Component.extend({
classNameBindings: ["uniqueClassName"],
uniqueClassName: 'class143'
});
if it is possible, how to do that?

Ember Component has a elementId property which returns the id of the element in the DOM.
so you can get the component's id using `this.get('elementId').
More info here:
http://emberjs.com/api/classes/Ember.Component.html#property_elementId

Related

Getting value from a text field when button is clicked using aspnet mvc Razor in ext.net

I'm having some issues referencing a component to get its value. I have a simple form with a numberfield and a button. To test I just want to output the value of the numberfield when the button is clicked
I have a basic js function
var saveNewSats = function (component) {
console.log(component.getValue());
};
In razor I wire it together like this
X.Button()
.Text("Save")
.Listeners(l => l.Click.Handler = "saveNewSats(#{newSatsField});")
Where newSatsField is the html id of the numberfield. I tried to reference the field in multiple ways like App.newSatsField, but no luck. What is the correct syntax to get the value from the numberfield?
Best regards
So I found the solution.
I did set the InputId which renders the html id attribute. What I needed was to set the ID as this is the one referenced by ext.net. Now both the #{id} and Ext.Cmp syntax works as expected.

Asp.Net MVC Model Binding with JQWidgets

When you want to create a DateTime picker control with JQWidgets, you must define a div element and then call a function like this using Javascript:
$("#MyDivElementId").jqxDateTimeInput().
The problem is: I'm not able to figure out how I can use Model Binding of Asp.Net MVC with this syntax. I mean, the Model Binding feature will try to match key-value pair received from input controls in the form element and obviously, div element are not input control.
I found somebody who already resolved this problem using hidden field set with values of matching div JQWidgets element before submitting form but I don't like this solution; it's not natural and I must write to much code for a thing that should be simpler in my view.
Does anybody have more elegant solution?
If you set the "name" attribute of the DIV tag, the value from the DateTimeInput's Input tag would be submitted.
First of all when you submit id is not submited and i just opened that plugin demo. when you add code $("#MyDivElementId").jqxDateTimeInput(). it will create textarea with name MyDivElementId and when you submit then you will have the same value on server side. Other issue can be with date format since they would be probably different on client side and server side.
try to add input parameter for controller "DateTime MyDivElementId" and check if its null or not.

Pass multiple html parameter with BeginForm

I need to send parameters with values ​​in a BeginForm html.
Example:
# using (Html.BeginForm ("Create", "IncomeDeclaration", new {declarationAmount = document.getElementById ("element"). value}))
This value I can not get from the Model, as it is not found in the model.
I've tried several ways and nothing worked. If you could change the content of a ViewBag that'd be great.
I appreciate your support.
You can't mix and match Javascript (document.getElementById ("element")) with the C# form declaration. If you want a value submitted with the form, you should add a relevant form element inside the form declaration. If you don't want a regular form element (eg. a textbox), you can use a "hidden" input field. If you want, you can dynamically populate the hidden field using javascript.

Passing edited value contenteditable field from view to controller in Rails

I am using Rails 3.1 to build a web form which, among other fields, contains a table whose cells can be edited. I require to save the text of edited cell in a database.
I am thinking of using HTML5 attribute 'contenteditable'. I can use the value of innerHTML of the cell . How can I pass this value to Rails controller (from the view)? Is it possible to use params to pass the data? Any suggestions?
HTML containers marked as contenteditable won't automatically be passed along to the server with a form submission, so you'll likely have to use javascript to pull the content out of those containers and pass them along in some fashion.
One strategy would be to add a handler to the form that fires before submit, which iterates over contenteditable containers and injects hidden form elements. The below example uses jQuery, but you could probably replicate the thought process without.
var form = $('#my_form');
var element;
$('[contenteditable=true]').each(function(){
element = $(this);
form.append($('<input/>', {
type:'hidden',
name:element.attr('id'),
value:element.html()
}));
});

DropDownListFor does not set selected value

I have a view that is displaying a Drop down list using the HTML helper DropDownListFor
<%: Html.DropDownListFor(Function(model) model.Manufacturer, New SelectList(Model.ManufacturerList, Model.Manufacturer))%>
My controller is passing the View a ViewModel containing the Manufacturer and the ManufacturerList
Function Search(ByVal itemSrch As ItemSearchViewModel) As ActionResult
'some code mapping and model code'
Return View(itemSrch)
End Function
My ViewModel is nothing crazy just fills the ManufacturerList with a list of string values and then the Manufacturer property is just a string value containing the selected value from the drop down list.
Public Property Manufacturer As String
Public Property ManufacturerList() As List(Of String)
I'm having an issue with the view setting the selected value on the drop down list if we are reloading the Search View. I've checked the View Model (ItemSearchViewModel) when it comes into the Search function and the Manufacturer is populated with the proper selected value and successfully passes that value back to the Search View. At some point the data passed to the view doesn't seem to populate the selected value, was wondering if anyone had some ideas on why this is happening and what I can do to fix it.
Thanks
Didn't get much for answers on this so started digging into how I could fix this somewhat easily. Also in my research this seemed to be a common problem for many people with the DropDownListFor HTML Helper. I figured there had to be a way to get this working since I knew the selected value property from my ViewModel was actually getting passed to the View. So javascript and jQuery to the rescue, I ended up trying to set the selected value using the jQuery .ready function and was able to successfully get this to work. So here's my jQuery fix:
$(document).ready(function() {
$("#Manufacturer").val("<%: Model.Manufacturer %>");
});
For sake of making this easy to follow I used the full .ready syntax, or you can just use $(function () { 'code' });
If you want to solve this without using jQuery you can just use basic javascript syntax as well, it'll look something like this:
document.getElementByID("Manufacturer").Items.FindByValue("<%: Model.Manufacturer %>").Selected = true;
If you using the plain javascript call make sure to call this when the page is done loading data to the dropdownlist.
In either case all this code is doing is setting the selected value on the drop down list on the client side from the passed in Manufacturer value from the Model.
If you have any other ways to solve this problem please let me know, but this is working for me and hopefully it'll help someone else with their problem.
Thank,
I've done a similar quick-fix in JQuery today to fix this behaviour too :
$(document).ready(function() {
$(".wrapper<%: Model.Language %> option[value=<%: Model.Language %>]").attr("selected","true");
});
Though I could share it with others if needed.
I'd still like to see a real patch to this problem so many persons seems to have in a different way, maybe with an extension method of the already existing DropDownListFor Html.helper method.

Resources