I have learned how one can open jQuery UI dialogs via KnockoutJS custom bindigns as answered in this question: integrating jquery ui dialog with knockoutjs
If my dialog has an input text field, how can I access data from it upon dialog close to alter the main view model based on the text filed contents? What is the general idea and even handler code place?
This is pretty straightforward. Just put an input in your dialog div with a value binding. Same as you would capture input from any binding. Here is the fiddle from that answer with an input binding.
<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog
<input data-bind="value: dialogEntry" />
</div>
Just make both fields bind to the same knockout js observable. Then they will always be the same values.
<a href="#popupLogin" class="site_title" data-position-to="window" data-rel="popup" data-bind="text:Title">
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<input type="text" data-bind="value:Title" />
</div>
When you change the text in the modal and click away or close it in some fashion you will see that the value in the other input will have changed as well.
Related
I'm new to Angular2 and not able to explain the behavior observed where a change in an input form of one browser shows up immediately on a different one (even on a different device) showing the same page. What exactly is my "model" in this case?
And how is communication done from Client->Server->Clients, is this through an opened WebSocket? What server component is "forwarding" the changes?
"parameters" here is an array of {name, {value,unit}} retrieved through an http.get call.
<li *ngFor="let parameter of parameters">
<div>
<label>{{parameter[0]}}</label>
</div>
<input type="text" class="form-control"
[(ngModel)]='parameter[1][0]'>
</li>
Thanks
Let's assume I've got Polymer custom control like:
<template if="{{editMode}}">
<input id="myInput" type="text">
</template>
<div on-doubleclick="{{setEditModeToTrue}}">
some stuff here
</div>
Now I want #myInput to be text focused everytime editMode is true. The problem is that in the setEditModeToTrue handler #myInput is not yet in DOM tree so I can't focus it by:
root.QuerySelector('#myInput').focus();
(And yes I tried setting autofocus attribute on input but it works only for the first double click)
Is there any event or something else letting me know that template-if content is in DOM tree ?
You can wrap or extend the input element and put your code in the attached or ready lifecycle method or use MutationObserver.
I'm using jQuery mobile and Knockout JS (latest versions of both).
I cannot seem to style a horizontal list after knockout updates the dom.
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
<h2>Static</h2>
<div id="staticControlgroup" data-role="controlgroup" data-type="horizontal" data-mini="true">
3G
SD
HD
HD+
/div>
The "Static" looks good, but the "dynamic" is not styled by jQuery mobile. I've tried several methods of trying to make this work, and I am missing something... after knockout runs, I do:
$("#dynamicControlgroup").trigger("create")
$("#dynamicControlgroup").children('a').buttonMarkup({ inline: true,mini: true,corners: true, type: "horizontal"});
But here is what it looks like:
Thoughts?
After appending new items, use the below code.
$('[data-role="controlgroup"]').controlgroup().trigger('create');
Note: Creating completely new controlgroup doesn't get enhanced corners dynamically. However, appending new items into existing controlgroup corners get enhanced. This problem can be solved by adding ui-first-child and ui-last-child classes.
$('[data-role="controlgroup"] a').first().addClass('ui-first-child');
$('[data-role="controlgroup"] a').last().addClass('ui-last-child');
Demo
Turns out with Knockout you need to remove the controlgroup from the div so you dont get the "empty wrapper". So the dynamic code looks like:
<h2>Dynamic</h2>
<div id="dynamicControlgroup" data-type="horizontal" data-mini="true" data-bind="foreach: Labels">
</div>
and then on page load, you can call
$('#dynamicControlgroup').controlgroup().trigger('create');
$('#dynamicControlgroup a').first().addClass('ui-first-child');
$('#dynamicControlgroup a').last().addClass('ui-last-child');
and this works. Thanks to Omar for the help on the first/last rounded classes tip!
I'm new to all this so please bear with me.
I've been using some jQuery UI widgets and I'm wanting to create category (adults) radio buttons with their own set of subcategories (children) that only appear when the appropriate adult is selected.
Here's the code I have so far: http://jsfiddle.net/99azd/
The problem is only the formatting of the initial set of children work, the others show up as plain checkboxes. I think it has something to do with the div id="format" but I'm not sure.
<div style="display: none;" id="Adult1Children">
<div id="format">
<input type="checkbox" id="child1" value="child1"/><label for="child1">child1</label>
<input type="checkbox" id="child2" value="child2"/><label for="child2">child2</label>
</div>
</div>
Got some help from the IRC channel - here's the fixed code:
http://jsfiddle.net/w6qFC/
I had a duplicated id "format" so it only ran the first one. All I had to do was change the id to a class instead and then in the js change from #format to .format. Simple.
$( ".format" ).buttonset();
and
<div class="format">
Here is my code, simplified:
<form id="form1" style="height: 759px" runat="server">
<%= Html.TextBox("txtDateFrom")%>
<input type="button" value="Add" id="btnAdd" onclick="return btnAdd_onclick()" />
</form>
I want to add a validator on client side. For example, it will control the entered text's in the textBox length.
Important: I don't have a model passed in that view.
If you are open to use Jquery use JQuery Validation Plugins
eg.Jquery Validation Plugin
and Position Absolute Jquery validation plugin
Any reason not to use jquery validation add-in?