The following code worked as expected, however on the paging click, it still execute and display message "Please select a record first, then press this button". Is there anyway to prevent this unless the export button click. Thank you
$(document).ready(function () {
$("#Product").on("click",function(){
var $exportLink = $('#export');
var href = $exportLink.attr('href');
var grid = $('#Product').data('kendoGrid'); //get a reference to the grid data
var record = grid.dataItem(grid.select()); //get a reference to the currently selected row
if(record !=null)
{
href = href.replace(/refId=([^&]*)/, 'refId='+record.ID);
$exportLink.attr('href', href);
}
else
{
alert("Please select a record first, then press this button")
return false;
}
});
});
Defining a click handler as $("#Product").on("click",function(){...}) you are actually defining it for any click on #Product not just on you Export button. You should define the on for the button and not for the grid
Related
I have a textbox called txtMobile.text. It offers a list of items for a user to select from a auto suggestion box. This works great until a user goes back to the textbox after selecting the autosuggestion, they can change the text and it doesnt prevent them. Any ideas how i can only get the user to be able to only select items from the auto suggestion and not let them edit the selected text?
<script>
//var txtMobile
var isItemSelected = false;
//Handler for AutoCompleter OnClientItemSelected event
function onItemSelected() {
isItemSelected = true;
}
//Handler for textbox blur event
function checkItemSelected(txtMobile) {
if (!isItemSelected) {
alert("Please select item from the list only");
document.getElementById("form1").reset();
//txtMobile.focus();
}
}
</script>
I'm fairly new to kendo and facing a problem with kendo dropDownList.
I have Channel list kendo dropDown in my Add/Edit popup form. And every time I save my form and click on new Add/Edit I want that saved channel name in that dropDownList.
I'm calling the dropDown data from a SP and then populating that DropDown.
Here is my kendo DropDown:
function buildChannelDropDown(){
$('#ddlChannelSelect').kendoDropDownList({
dataTextField: 'Text',
dataValueField: 'Value',
optionLabel: "Select Main Station",
dataBound: function(e){
if(!onDataBound_SelectByDefaultIfOnlyOneItem(e)) {
var dropdownlist = $("#ddlChannelSelect").data("kendoDropDownList");
var mainChannelDataSource = dropdownlist.dataSource;
if(mainChannelDataSource._data.length > 0){
dropdownlist.select(0);
}
}
},
change: function(){
var selectedChannel = 0;
if($('#ddlChannelSelect').val() != ""){
selectedChannel = $('#ddlChannelSelect').val()
}
GetDataForSelectedChannel(selectedChannel);
},
filter: 'contains'
});
}
And this my function which brings all channel list from backend
function setChannelDropDown(){
var paramObj = {
ChannelGroupId = $("#ddlChannelGroup").val();
}
InvokeAjaxMethod('/Channel/GetChannelList', 'Get', true, paramObj, function(response){
var channelDropDown = $('#ddlChannelSelect').data('kendoDropDownList');
channelDropDown.setDataSource(response.Data);
});}
i'm calling setChannelDropDown() function on Add/Edit button click. Everything is working fine and newly added Channel gets shown in dropDown. Except when I search/type in Filter box in Dropdown(I have kept fiter: "contains"). When I search and select an option and save the form, Popup Form gets close but DropDown opens up. See this Image.
This is how it looks
This DropDown opens up on grid after saving and closing form. After Debugging it came to known that dataBound gets hit again. This happens only when I type in filter box and save.
Does anyone know I can solve this and prevent it from happening?
I am doing a popup window using Bootstrap modal that is triggered by the click of a checkbox in the main page. The popup window contains several textboxes for searching from the database based on user's input. Then after the input and the click of a search button, a table will display the data retrieved on the same popup window. Then, after the user chooses a row from the table, the chosen data will be displayed in their respective textboxes in the main page and the checkbox will be checked.
My plan is to uncheck the checkbox on a second click (thinking if the user suddenly decided to cancel their decision - checking the checkbox). I tried but it didn't uncheck the checkbox. Instead, the popup window comes out at every click of the checkbox and the checkbox won't uncheck anymore.
$('#inputNew').on('hidden.bs.modal', function (e) {
document.getElementById("inputNewCheckbox").checked = true;
document.getElementById("inputMother").style.display = 'block';
document.getElementById("inputMotherlabel").style.display = 'block';
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
$('#inputNew').on('click', '#SearchMother', function () {
var value = $('#myPopupInput1').val();
$('#inputMother').val(value);
$('#inputNew').modal('hide');
});
if ($checkbox.data('waschecked') == true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
$('#inputNewCheckbox').prop('checked', false);
}));
}
This is the checkbox input in the view page:
<input type="checkbox" name="inputNew" value="inputNew" id="inputNewCheckbox" data-toggle="modal" data-target="#inputNew" data-waschecked="false"> New
For the checkbox unchecking part, i also tried
if ($('#inputNewCheckbox').prop('checked', true) && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
But when i run, the checkbox is checked by default and unchecking doesn't work. Plus the modal popup window appears.
I also tried
if (document.getElementById("inputNewCheckbox").checked = true && $('#inputMother') != '') {
if ($('#inputNewCheckbox').on("click", function () {
document.getElementById("inputNewCheckbox").checked = false;
}));
}
Also same output as above code..can anyone help me out please? How can i fix this?
You're probably better off listening for a change event on the checkbox, and only showing your modal if the checkbox is checked:
$('#inputNewCheckbox').on('change', function(e){
var _this = $(this);
if(_this.is(':checked')){
/* show your modal */
}
});
See change - Event reference and the :checked pseudo-class on MDN.
I have two json files "a.json" and "b.json". I need to show a different form when the user clicks each of the different buttons. My issue is that when I click on the first button it show the first form, but when I click on the second button it doesn't show the second form. I need to show one form at a time, i.e. when I click the second button it removes the first form and shows the second form.
$scope.getFromAFile= function () {
// body...
var inputs=[];
$http.get('a.json').success (function(data){
var a=changeData(data);
$scope.formFields=[]
console.log('pp');
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
$scope.getFromBFile= function () {
// body...
$http.get('b.json').success (function(data){
var a=changeData(data);
console.log('pp');
$scope.formFields=[]
console.log(data.studentName);
console.log($scope);
$scope.formFields = a['input'];
}).error(function(err){
alert(err);
});
}
here is plunker
http://plnkr.co/edit/tuMl02QcvZkCCIJPTW0r?p=preview
Dont mix JQuery with AngularJs
you can use ng-click and ng-show for achieving such Task
<button ng-click="hideFormOne()">Hide Form One</button><!-- Hides Form One & Shows Form Two -->
<button ng-click="hideFormTwo()">Hide Form Two</button><!-- Hides Form Two & Shows Form One-->
<form ng-show="showFormTwo">
:
:
<form ng-show="showFormOne">
:
:
script
$scope.hideFormOne = function()
{
$scope.showFormOne = false; // Hides Form One
$scope.showFormTwo = true; // Shows Form Two
}
$scope.hideFormTwo = function()
{
$scope.showFormTwo = false; // Hides Form Two
$scope.showFormOne = true; // Shows Form One
}
If i understand u can use hide() function:
on document load u need hide both forms:
$('#form1').hide();
$('#form2').hide();
And on button click:
$('#button1').click(function(){
$('#form1').show();
$('#form2').hide();
});
$('#button2').click(function(){
$('#form1').hide();
$('#form2').show();
});
You can have two forms, eg formA and formB.
And then if user click on formA, hide formB or click on formB then hide formA.
Example if clicked formA:
$('formA').hide();
$('formB').show();
And example if clicked formB:
$('formA').show();
$('formB').hide();
Here is Plunker Demo
I am not a JS expert hence I am asking for some guidance. I have following scenario
page loads and commondiv is hidden
if user clicks button showeditform, I load editform in commondiv and show the commondiv
if user clicks button showeditform and editform is visible, remove it and hide commondiv
if user clicks button showpasswordform and if the editform is visible and I remove editform and show passwordform
if user clicks button showpasswordform and if the passwordform is visible, remove it and hide the common div
if user clicks button showeditform and if the passwordform is visible and I remove passwordform and show editform
As of now, I have set up flags and if elses but its not very good way to do it. How can I achieve this using minimum of jQuery code?
Update: Following is my attempt
$('a.editpo, a.resetpass').click(function(event){
event.preventDefault();
var urlToCall = $(this).attr('href');
var hyperlinkid = '#'+$(this).attr('id');
var targetId = $(this).attr('id').match(/\d+/);
var targetTrDiv = '#poformloadertr_'+targetId;
var targetTdDiv = '#poformloadertd_'+targetId;
var toToggle = $('#resetuserpassform_'+targetId).is(':visible') || $('#account-home-container-'+targetId).is(':visible') ;
console.log(toToggle);
if(toToggle == true || $(targetTdDiv).html()==''){
$.ajax({
url:urlToCall,
success: function(html){
$(targetTdDiv).html(html);
$(targetTrDiv).show();
}
});
}else{
$(targetTrDiv).hide();
$(targetTdDiv).html('');
}
});
The editpo and resetpass are classes applied on hyperlinks in column of table, namely Edit personal info and reset pass, clicking these load up the form in a tr>td.
Try this
$(function(){
var $commonDiv = $("#commondiv");
//Add the edit and password forms into common div and hide them initially
$("#editform").hide().appendTo($commonDiv);
$("#passwordform").hide().appendTo($commonDiv);
//Editing answer based on your comments.
$(".showeditform").live('click', function(){
if($("#editform").hasClass("loading")){//If form is already loading just return
returnl
}
if(!$("#editform").is(":visible")){
$("#editform").addClass("loading").load("EditFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#editform").hide();
}
//Always hide the passwordform
$("#passwordform").hide();
});
$(".showpasswordform").live('click', function(){
if(!$("#passwordform").is(":visible")){
$("#passwordform").addClass("loading").load("PasswordFormUrl", function(){
$(this).removeClass("loading").show();
});
}
else{
$("#passwordform").hide();
}
//Always hide the editform
$("#editform").hide();
});
});
I have done this like a week ago, but the code is at home, where I am not at right now. But basically, you give your forms names in a array, and hide the ones that are not selected and if the one that is selected is clicked again use .toggle(); function to hide it.
You can give this a try. This is assuming you are storing your form HTML in JS. If you are storing it in a hidden container I can show you how to move that into the new parent or just copy the html into it.. hope this helps!
$("#commondiv").hide();
$("#showeditform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(editformHTML).show();
}
});
$("#showpasswordform").click(function(){
if($("#commondiv").is(":visible")) {
$("#commondiv").html("").hide();
} else {
$("#commondiv").html(passwordformHTML).show();
}
});
You would do something like this:
$('#showeditform').click(function()
{
if($('#commondiv').is(':visible'))
$('#commondiv').hide();
else
$('#commondiv').html('The text you want to set').show();
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#editform').show();
}
});
$('#showpasswordform').click(function()
{
if($('#editform').is(':visible'))
{
$('#editform').hide();
$('#passwordform').show();
}
if($('#passwordform').is(':visible'))
{
$('#passwordform').remove();
$('#commondiv').hide();
}
});
Honestly, it sounds like your page is doing far too much on a single page. The rules shown above give me a kind of a headache.