Hi I've a kendo grid with country and state details. And I've a toolbar with add button. When I click on add new button, I'm getting a popup with country and state dropdowns. Now I want to select country then state. But here I want to load states based on country selection. Here is my sample code. It is not working.
function loadStates(element) {
// here I want to update below model
StateModel.StatesByCountry
something like this.
StateModel.LoadStatesByCountry($(element).val(), function () {
});
}
<script id="popup_editor" type="text/x-kendo-template">
<div class="k-edit-label">
<label for="Country">Country</label>
</div>
<input name="CntryName"
data-bind="value:CntryName"
data-value-field="Value"
data-text-field="Text"
data-source= CountryModel.AllCountries
data-role="dropdownlist"
onChange="loadStates(this)"
/>
<div class="k-edit-label">
<label for="State">State</label>
</div>
<input name="StateName"
data-bind="value:StateName"
data-value-field="StateID"
data-text-field="StateName"
data-source=StateModel.StatesByCountry
data-role="dropdownlist" />
</script>
Every time you have a country selected, you can filter the states available, so you don't have to care about it in the next popup.
See examples here http://docs.kendoui.com/api/framework/datasource#methods-filter
Related
I am using Materialize css to design my post. Suppose I have a form in modal and I and post it to server.
In that form I am checking if all fields are having value.
<form>
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
</div>
The title field is required. But when I click on a submit button in modal it is closing even if title field has empty value. Is there any way to keep the modal open for validation error in Materialize css v1.
Think about this is in separate steps. The form submission only takes place at the end of the chain, when our criteria have been met.
User Submits form
We check the form
We feedback to user
Depending on the results of 2, we may either go back to step 1, or on to step 3.
Modal Structure:
<div id="modal1" class="modal">
<div class="modal-content">
<div class="input-field">
<input type="text" id="title" class="validate" required="" aria-required="true">
<label for="title">Title</label>
<span class="helper-text" data-error="Please enter your name" data-success="Thankyou!"></span>
</div>
</div>
<div class="modal-footer">
<a id="submit-button" href="#!" class="btn">Submit</a>
close
</div>
</div>
We add optional helper-text span for user feedback, as per the documentation.
The Javascript:
document.addEventListener('DOMContentLoaded', function() {
// init modal
var elems = document.querySelectorAll('.modal');
var instances = M.Modal.init(elems);
// get button
var button = document.querySelector('#submit-button');
// Run our own function when clicked
button.addEventListener("click", checkForm);
// Function checks for input
function checkForm() {
var input = document.querySelector('#title');
if(input.value) {
// submit form
// add valid class to show helper
input.classList.add('valid');
// close modal
instances[0].close();
// clear form
input.value = '';
// remove valid class
input.classList.remove('valid');
} else {
// prompt user for input
input.classList.add('invalid');
}
}
});
We grab the value of the text input, and based on that, add a valid or invalid class - this is the built in materialize stuff that hides or shows the relevant message that we set in data-error and data-success.
The only thing you need to add to this is the actual form submission - so something like form.submit().
Codepen.
I have 2 strange problems. I have a large form with lots of input fields. That works fine. I want to add a slide toggle at the bottom which changes a variable that will affect styles on the whole form.
My first problem is that the variable will not display until the slide toggle is clicked.
HTML
<mat-slide-toggle [(ngModel)]="ifPrint" name="ifPrint" id="ifPrint" ></mat-slide-toggle>
<div>
{{ifPrint}}
</div>
COMPONENT
export class PrintReviewDetailsComponent implements OnInit {
ifPrint = true;
}
the ifPrint variable is blank on page load
The second problem is
when the slide toggle is clicked the div containing the variable shows as true but when I click the toggle to the off position the ifPrint variable stays as true and does not change.
I have created a blitz and it is working fine there with the same code so I am unsure as why I am having these issues on my page.
The console says:
Error: No value accessor for form control with name: 'ifPrint'
EDIT: I updated the stackblitz to include the html of the form and now it is not working.
Your updated stackblitz couldn't recreate the issue which you shared... But from your question, the following 2 issues are addressed for a form and styling is also done:
the toggle value was not displayed by-default until the toggle was clicked
the toggle value didn't change when you toggled it
the style is now being updated based on the toggle value
relevant TS:
model:any;
constructor(){
this.model = {name: '' , age: null, ifPrint: false};
}
relevant HTML:
<form (ngSubmit)="formSubmit()" #demoForm="ngForm" >
<div [ngClass]="model.ifPrint === true ? 'trueClass' : 'falseClass'">
<input type="text" placeholder="Enter Name" #name="ngModel" [(ngModel)]="model.name" name="name" />
<br/>
<input type="number" placeholder="Enter Age" #age="ngModel" [(ngModel)]="model.age" name="age" /> <br/>
<mat-slide-toggle #ifPrint #age="ngModel" [(ngModel)]="model.ifPrint" name="ifPrint"></mat-slide-toggle> {{model.ifPrint}} <br/>
</div>
<button type="submit"> Submit </button>
</form>
check a minimal, working demo here for what you're trying... hope it helps...
I removed everything in your template except the mat-slide-toggle and it works as expected.
I believe the issue is because your html template is referencing methods or properties that your component does not have, or trying to access a property of null or undefined somewhere is causing the issue.
Check your console for the errors and if you fix those up, the slide toggle should work as expected.
I have a page with table. Each table row, has two links "delete", and "edit". "delete" works fine.
I would like to do this scenario:
When user clicks on row "edit" link, a small window appears with the fields of this row.
User decide to edit or not.
User may press "Save Changes", or "Cancel".
I did the option of small window with JavaScript document.createElement(), and the window appears successfully.
But I would like to add helpers for "Save Changes", and "Cancel" buttons.
I can't do this using helpers
Template.codesList.events({
'submit form#newForm': function (events) {
// some actions
};
},
'click #edit': function () {
var px = 'px';
// Create an Overlay
var myOverlay = createOverlay();
document.body.appendChild(myOverlay);
// Create edit window display it over the Overlay
var editWindow = createPopup(300, 400);
// Create elements and append it to edit window
var editForm = editWindowForm(this._id, this.name);
editWindow.appendChild(editForm);
document.body.appendChild(editWindow);
},
'click #delete': function () {
if (confirm("Are you sure?")) {
Codes.remove({_id: this._id})
}
},
'submit form#editForm': function (event) {
event.preventDefault();
console.log("Clicked"); // This doesn't displayed
}
});
And this is the form after displaying it.
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">
<div class="form-group">
<label for="itemCode" class="control-label">Code</label>
<input id="itemCode" name="itemCode" class="form-control" placeholder="Enter code">
</div>
<div class="form-group">
<label for="itemName" class="control-label">Name</label>
<input id="itemName" name="itemName" class="form-control" placeholder="Enter name">
</div>
<input type="submit" value="Save Changes" class="btn btn-primary">
<input type="button" value="Cancel" class="btn btn-info">
</form>
But when I press on "Save Changes" button, no print from console.log() and the form is making the normal submit and the page reloads again.
So, what I'm missing?
By the way that's the output of the console:
document.querySelector('form#editForm')
<form id="editForm" style="margin-right: 3em; margin-left: 3em;">…</form>
Define edit form as a template. Use event handlers as usual to handle save and cancel button clicks.
To render it, either just put it inside the page template with '#if sessionEditPopup' or if you must do it yourself then use UI.renderWithData docs here
BTW manually modifying DOM using jquery etc is something to be avoided unless there is no other way and is not the Meteor way of doing things.
Add event on click save the data into Session because Session can access globally.
And Take the data from Template.name.Healper using session,
So when u change the session value that will automatically change your page content.
Here is the link may be useful for U
http://meteortips.com/first-meteor-tutorial/sessions/
Here's my case: I'm developing a little widget, and I was looking for a way to hide/show different DIVs on selecting a set of radio buttons. I found the proper code and adjusted it to my needs. The only problem is that the hide/show feature stops working after clicking on save while configuring the widget :S
Here's the JS:
jQuery(document).ready(function($) {
$(document).ready(function() {
$('input[type="radio"]').click(function(){
if($(this).attr("value")=="link_to_image"){
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page"){
$(".radio-option").hide();
$(".linked-page").show();
}
});
});
});
And the HTML:
<p>
<label>Link:</label><br>
<label>
<input type="radio" name="link_to" value="link_to_image">
Link to image
</label><br>
<label>
<input type="radio" name="link_to" value="link_to_page">
Link to page
</label>
</p>
<div class="linked-image radio-option">
<label for="linked_image">Linked image:</label>
<p>
Content for linked_image DIV
</p>
</div>
<div class="linked-page radio-option">
<label for="linked_page">Linked page:</label>
<p>
Content for linked_page DIV
</p>
</div>
And the [JSFiddle] (http://jsfiddle.net/ccwsy5z4/)
Could you give me a hand with this, guys?
So finally I found out that the problem was that the JS stopped working after the AJAX started by clicking on the Save button.
And the solution for that was to recall the JS function after AJAX finished it job. To do that first I had to give a name to the JS function, called it after that, and then call it again after AJAX stopped. Like this:
jQuery(document).ready(function($) {
function radioButtonShow() {
if($(this).attr("value")=="link_to_image") {
$(".radio-option").hide();
$(".linked-image").show();
}
if($(this).attr("value")=="link_to_page") {
$(".radio-option").hide();
$(".linked-page").show();
}
};
$('input[type="radio"]').click(radioButtonShow);
$(document).ajaxStop(function() {
$('input[type="radio"]').click(radioButtonShow);
});
});
Hope this may be useful to somebody :)
I am new to jQuery, trying to populate a GridView or Telerik RadGrid using jQuery. Not sure how to go about it and unable to find any examples. Any help is appreciated. Thanks.
Essentially I am trying to display a modal window with a textbox and button. The user enters a search criteria presses the button and a gridview in the same modal window is populated with the results.
The user than selects records in the grid presses another button and the selected users are inserted into the database table, modal window is closed and a grid on the parent page is refreshed showing the new added users.
<input type="button" id="btnAddNewUserj" value="Add New User" />
$(document).ready(function() {
$("#btnAddNewUserj")
.click(function() { ShowNewUserDialog(); return false });
$("#btnSearch")
.click(function() { FindUsers(); return false });
});
function ShowNewUserDialog() {
$("#newuserDialog").dialog({ modal: true, bgiframe: true }).dialog("open");
}
function FindUsers() {
// HOW TO DO THIS?
// Show selectable list of users from the database in grid.
}
<div id="newuserDialog" title="Add New User" style="display:none;">
<div>
<input id="txtSearchFor" type="text" />
<input id="btnSearch" type="button" value="Search" class="Button" /></div>
<p> DISPLAY RESULTS HERE </p>
<div style="margin:10px 6px;">
<input type="button" id="btnjAdd" value="Add" class="Button" />
<input type="button" id="btnjCancel" value="Cancel" class="Button" />
</div>
</div>
A couple of thoughts here. You cannot populate a GridView or Telerik Grid using jQuery. jQuery is a client side technology and those two grids are server side.
You can use jQuery to hit a web service and build out and HTML table with the results (which is basically what a GridView does).
I'm guessing however, that you would be better served just using native GridView databinding. You can use a .Net UpdatePanel around the grid if you want to prevent full post backs.
I think telerik is not the answer.
Use telerik radgrid's client side binding, see this for an example: http://demos.telerik.com/aspnet-ajax/grid/examples/clientbinding/defaultcs.aspx
Note that sample shows how to bind to a WCF Web Service and an ADO.NET Data Service. There are other samples around.
Other variations of binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/declarativedatabinding/defaultcs.aspx
More on client side binding: http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx