We Keep Coding

How to get kendo window content from input text

I have a question about kendo window.
I have a input like this
<div id="windowForAssign"></div>
<div>
<p>Your name</p>
<input type="text" id="name" >
<button type="button" id="btnSend">Send</button>
</div>
And when I click on button, a window will pop-up. Here, I use Kendo window.
$('#btnSend').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Sample title";
var url = "";
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '120px',
iframe: true,
resizable: false,
title: title,
content: null,
visible: false
});
var popup = $("#windowForAssign").data('kendoWindow');
popup.open();
popup.center();
}
But I don't know how to get data from input for content.
Thank you for your help!

You can use the content method for this. From Telerik docs:
Gets or sets the content of a Window.
Just pass in the input's value by using popup.content($("#name").val());
Dojo example here
<div id="windowForAssign"></div>
<div>
<p>Your name</p>
<input type="text" id="name" />
<button type="button" id="btnSend">Send</button>
</div>
<script>
$(document).ready(function () {
$('#btnSend').click(createAndShowPopup);
var kendoWindowAssign = $("#windowForAssign");
var title = "Sample title";
var url = "";
function createAndShowPopup(){
kendoWindowAssign.kendoWindow({
width: "650px",
modal: true,
height: '120px',
iframe: true,
resizable: false,
title: title,
content: null,
visible: false
});
var popup = kendoWindowAssign.data('kendoWindow');
popup.content($("#name").val());
popup.open();
popup.center();
};
});
</script>

To get the input value, you can use jQuery as follows:
$("#name").val();
Learn more about jQuery's .val() method here
This will get you the desired value from the input field that you require to set the content for your window.
Now, set your content property that you are specifying in your initialization parameters for your kendo window.
Set the content property to following:
content: { template: kendo.template($("#name").val()) }
instead of: content: null
that you have set.
Learn more about kendo.Window's content method here
This should get you the input value for your kendo window on button click event.
Here I am using kendo.template method that kendo has to set the content for the kendo window and you can read more about that here

Enable/disable kendo ui control dynamically

I want to enable/disable a kendo combobox based on the user's selection from a checkbox, which I am storing in a variable.
I already tried setting the variable to the enable property, but this is useful only when the control is being built-in.
Does anybody know If I can do this while creating the control?
<div id="fund" class="col-xs-3">
input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.test,
widget: $parent.searchSource,
dataTextField: 'managerName',
dataValueField: 'managerId',
filter: 'contains',
autoBind: false,
minLength: 3,
enable: overrideGlobalMapping, //this does not work for me even though the variable holds the correct value
change: function(){ if(this.value() && this.selectedIndex == -1)
{
setTimeout(function () {$parent.selectedManagerId(null);}, 100);}},
dataSource: {
serverFiltering: true,
transport: {
read: $parent.retrieveManager
}
}
}" />
</div>

I ended up wrapping the kendo combox definition in a function, so it now looks likes this:
<input type="checkbox" id="overrideGlobalMappingCheck" onclick="SetFundsCombobox()" data-bind="checked: overrideGlobalMapping, enable: $root.canConfirmMapping" />
The kendo combobox is still wrapped and has an id, which I later use to manipulate it in javascript:
<div class="col-xs-3" id="funds">
<input class="required" data-bind="title: $parent.selectedFund,
kendoComboBox: {
placeholder: 'Start typing to search...',
value: $parent.selectedManagerId,
...
}" />
</div>
And this is the JavaScript function bound to the onclick checkbox's event:
function SetFundsCombobox() {
var fundsDiv = document.getElementById('funds');
var inputSelector = fundsDiv.getElementsByClassName('k-input');
var span = fundsDiv.getElementsByTagName('span');
if (document.getElementById('overrideGlobalMappingCheck').checked) {
document.getElementById('funds').disabled = false;
inputSelector[0].disabled = false;
span[1].classList.remove("k-state-disabled");
} else {
document.getElementById('funds').disabled = true;
inputSelector[0].disabled = true;
span[1].classList.add("k-state-disabled");
}
};
I'd have rather preferred to perform this via the view model, but it works for now.
EDIT:
I've been able to do this the right way (following the MVVM pattern), so now rather than wrapping the kendo combo box in a function, I added the following function in the view model:
$scope.overrideGlobalMappingChecker = ko.computed(function () {
if ($scope.entityMapping()) {
var checkboxChecked = $scope.entityMapping().overrideGlobalMapping();
$("#funds .k-input").prop('disabled', !checkboxChecked);
if (!checkboxChecked) {
$scope.selectedFundId(null);
}
}
});
So now, what the html only needs is the definition of the id in the div containing the combo box:
<div class="col-xs-3" id="funds">
<input data-bind="title: $parent.selectedFundName, kendoComboBox: {
autoBind: false,
...
}" />
</div>
And that's it, it's a much cleaner/correct way to handle this.

jQuery UI dialog closes on enter in input field

I open my dialog with a button then I place my cursor in a input field and presses enter my dialog closes and this line is inserted to the address bar:
jQuery:
$('#dialog').load("form-incident.php").dialog({
title: "Add Incident",
autoOpen: false,
resizable: false,
width: 800,
modal:true,
position: ['center', 'top+50'],
buttons: {
Add: function(){
$.ajax({
url : 'save.php',
type : 'POST',
data : $('form').serialize(),
context: $(this),
success: function (result) {
if (result === "true") {
alert('Incident has been added successfully');
} else {
alert('ERROR: Cannot insert data to MySQL table');
}
window.location.reload();
$(this).dialog( "close" );
},
error : function(){
alert('ERROR: Check database connection');
}
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
form-incident.php:
<form>
Name: <input type="text" name="name" id="name"><br><br>
Project:
<select name="project" id="project">
<option value="test">Test</option>
</select><br><br>
Incident:<br> <textarea name="incident" id="incident" style="resize:none; width: 100%;" rows="14" cols="94"></textarea>
</form>
How can I fix the problem so the dialog box does not close but still reacts to enter if there was some suggestions from earlier where the form was filled out?

Okay, I forgot that implicit submission will still happen if there is only a single input element in the form, even if there isn't a submit button.
So, it looks like the problem is happening from the form being submitted. But in that case, calling preventDefault() on the submit even will fix it.
I threw together a fiddle with your code snippets from above, and was able to reproduce the problem. Once I put in the preventDefault(), it stopped happening. Please check it out, and see how it differs from your live code.
https://jsfiddle.net/elezar/u0sfx22p/2/

how to change view /model on button click?

I make a simple demo in which one button present "openpopup" .On click button a pop up screen is display in which user can select multiple element .Initially first and second by default selected .If you run application you will notice there is two column also present. (It is because first two option are selected in multiple selected box).When you open the pop up and select third option it automatically create third column in view .I want this should happen only button click "select" button on pop up screen .In other words when user select or dissect the check box it automatically reflect in model and display in view .I want it will not reflect on view till user didn't press "select" button .I want every thing after "select" button
here is my code
<button ng-click="openPopover($event)">
openpopup
</button>
<script id="my-column-name.html" type="text/ng-template">
<ion-popover-view>
<ion-header-bar>
<h1 class="title">My Popover Title</h1>
</ion-header-bar>
<ion-content>
<ul class="list" ng-repeat="item in data">
<li class="item item-checkbox">
<label class="checkbox">
<input type="checkbox" ng-model="item.checked" ng-click="itemCheckedUnCheckedhandler(item)">
</label>
{{item.label}}
</li>
</ul>
<button ng-click="closePopover()">select</button>
</ion-content>
</ion-popover-view>
</script>

The best way, in my opinion, would be to bind the checked items to a mediating variable (checkedItems in this example), that doesn't immediately affect the view
<input type="checkbox" ng-model="checkedItems[$index]" ng-click="checkboxClicked($index)">
"checkboxClicked" function simply updates the checked status of the current item
$scope.checkcoxClicked = function(n){
$scope.checkedItems[n] = !$scope.checkedItems[n];
};
And on popup close (NOTE that function is invoked only on "select" button click and not when clicking outside the popup), we simply update the view-binded data variable with the new checked / unchecked statuses
$scope.closePopover = function() {
for (var i = 0; i < $scope.data.length; i++){
$scope.data[i].checked = $scope.checkedItems[i];
}
$scope.popover.hide();
};
Here's a working plunker.

you just change little bit on your code:
like:
//***for html template
<input type="checkbox" ng-model="item.tempChecked" ng-click="itemCheckedUnCheckedhandler(item)">
//*for Controller
//****Add one new field("tempChecked") on your data object*
$scope.data = [{
"label": "Invoice#",
"fieldNameOrPath": "Name",
"checked": true,
'tempChecked': true
}, {
"label": "Account Name",
"fieldNameOrPath": "akritiv__Account__r.Name",
"checked": true,
'tempChecked': true
}, {
"label": "Type",
"fieldNameOrPath": "Type__c",
"tempChecked": false,
'checked': false
}, {
"label": "SO#",
"fieldNameOrPath": "akritiv__So_Number__c",
'checked': false,
"tempChecked": false
}]
//****"some change on your select button"***
$scope.closePopover = function() {
for (var d in $scope.data) {
if ($scope.data[d].tempChecked == true) {
$scope.data[d].checked = true;
} else {
$scope.data[d].checked = false;
}
}
$scope.popover.hide();
};

Save form data if Apply Settings button is clicked, else revert to old data

I am using jQuery to make a search filter menu. This form contains several form elements like checkbox and input box. When a user make some changes to the form and click on a #apply-filters button, the form will be hidden, and its data will be sent to the server backend for processing via $.post().
If the user made changes to the form but closes it without clicking the #apply-filters button, the filter menu div will be hidden, and the next time the user reopens the filter menu, the initial settings will be shown, not the most recent settings that the user made but failed to click on #apply-filters.
Problelm: What is the best way to do this in jQuery?
HTML
<form id="filter-menu">
<input type="checkbox" id="free" name="free" /><label for="free">Free</label>
<input type="checkbox" id="sale" name="sale" /><label for="sale">Sale</label>
<input type="checkbox" id="rooms_1" name="rooms[]" value=1/><label for="rooms_1">1 Room</label>
<input type="checkbox" id="rooms_2" name="rooms[]" value=2 /><label for="rooms_2">2 Rooms</label>
<input type="text" id="price" val="100" />
<button id="apply-filers">Apply Filters</button>
</form>
jQuery
$('#apply-filters').click(function() {
$('#filter-menu').serializeArray(); // Gives an empty array
$.post('api/someplace',
{ free: 1,
sale: 1,
rooms: [1, 2],
price: 100
}, function() {
console.log('yay');
});
});
UPDATE
When I do
JSON.stringify($('filter-form').serializeArray())
I get
[{"name":"rooms[]","value":"1"},{"name":"rooms[]","value":"2"}]"
However I want to send it to server side via $.post() like
{rooms: [1,2]}
This way I will be able to do on the server side (PHP, after processing with the frameworks function)
$rooms = implode(',', $rooms_array) // gives `1,2`
and the MySQL query can be like
SELECT .... WHERE rooms IN (1,2)
Is this possible? What would be a good way to send to the server side? Also, how would I use the output from serializeArray() to feed into $.post()?

Your serializeArray method returns empty array as your form elements have no name attributes.
<input type="checkbox" id="free" name='something' />
If you want to reset the form values you can use JavaScript reset method.
$('#close').click(function(){
$('#something').hide()
$("#filter-menu")[0].reset();
})
$('#apply-filters').click(function() {
var room = $('#filter-menu input[name="rooms[]"]:checked').map(function(){
return this.value
}).get();
$.post('api/someplace',
{ free: 1,
sale: 1,
rooms: room,
price: 100
}, function() {
console.log('yay');
});
});