I have used Ajax.BeginForm / Html.BeginForm for a view which sends an object to the controller on clicking submit. There are some telerik controls which are disabled conditionally. On clicking submit, the object is unable to retrieve the already existing value in the control since it is disabled. Hence object is made with null values. Any help?
Im using jquery to disable these telerik controls on loading the page.
Change.setDropDownValues = function () {
if (condition) {
$("#A").data('tDropDownList').enabled = false; $("#A").data('tDropDownList').disable();
}
}
else if (condition) {
$('#Pop').attr('disabled', 'disabled'); //text box
$('#ShortDesc').attr('disabled', 'disabled'); //textarea
$('#LongDesc').attr('disabled', 'disabled'); //text area
$('#Cont').attr('disabled', 'disabled'); //text box
$('#iDate').attr('disabled', 'disabled'); //datepicker division
$('#C').data('tDropDownList').enabled = false; //drop down list
$('#C').data('tDropDownList').disable();
}
};
Can anyone say how to remodify so that I can fetch the disabled field values?
That's how disabled inputs work. They never send the value to the server. You could use readonly instead if you want to prevent the user from modifying the value and yet send the old value to the server when the form is submitted.
you can use something like this
$(":disabled", $('#yourform')).removeAttr("disabled");
before submit.
Related
I have a kendo grid with filterable = true, mode=row.
I would like a way to have a button click, fire an event that will toggle hiding and showing the filter row.
Right now, I have it working by editing the innerHTML, but this is not what I want to do in the end, for several reasons.
1) I need to have a saved version of the filter row values before they are removed.
2) After they are removed and re-added they will not work
...
many other reasons, just bad practice and there has to be a better way.
A button that fires the event: toggleFilterClick:
<script type="text/x-kendo-template" id="gridFilter">
<button type="button" class="k-button" id="kendoFilterButton" data-click="toggleFilter"><span class="k-icon k-i-funnel"></span>Filter On/Off</button>
</script>
The Javascript code:
//Gets the innerHTML values before they are removed
var filterRowValues = $(".k-filter-row")[0].innerHTML;
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row")[0].innerHTML == '')
{
$(".k-filter-row")[0].innerHTML = filterRowValues;
}
else
{
$(".k-filter-row")[0].innerHTML = '';
}
});
Any thoughts suggestions would be appreciated/
I would just like to hide the actual filter row in the header
I'm not sure if i get the point but if you just want to hide it just simply remove everything except$(".k-filter-row").show(); and $(".k-filter-row").hide();. I create an example where when i hide the filter, the filter condtion will removed, but when it showed again the grid will refiltered with the previous value used to filter
$("#toggle").kendoButton({
click:function(){
if($(".k-filter-row").css("display") == "none"){
$(".k-filter-row").show();
//show again filter and execute previous filter condition
$("#grid").data("kendoGrid").dataSource.filter({field:"ShipName",operator:"contains",value:vm.get("filterOptions.ShipName").toString()});
$("#grid").data("kendoGrid").dataSource.filter({field:"OrderID",operator:"eq",value:vm.get("filterOptions.OrderID")});
}else{
//store the previous filter value
//autocomplete
vm.set("filterOptions.ShipName",$("input[data-role='autocomplete']").data("kendoAutoComplete").value());
vm.set("filterOptions.OrderID",$("input[data-role='numerictextbox']").data("kendoNumericTextBox").value());
//hide filter row
$(".k-filter-row").show();
//to reset filter of the grid when filterable hidden
$("#grid").data("kendoGrid").dataSource.filter({});
}
}
});
See the details in action
DEMO
Have you tried just hiding the row instead of removing it?
//fired when the button is clicked
var toggleFilterClick = $('#kendoFilterButton').on("click", function () {
if ($(".k-filter-row").is(":visible")){
$(".k-filter-row").hide();
}
else{
$(".k-filter-row").show();
}
});
I am newbie to jqgrid. and for one requirement, I need to hide edit form that poped up when we click edit button of navbar(pager). How can I hide it based on condition.
on click of Edit button, I am checking how many rows are selected by user. if it is more than one, I need to hide edit form and need to show alert message that, they can only edit one record.
I did following but did not work.
beforeShowForm: function(form){
form.hide();
$("#editmodlist").css("display", "none"); // where I hardedcoded div that surounds edit form
}
just adding my solution here for better formatting of code.
beforeInitData: function(form){
var selRowIds = jQuery('#list').jqGrid('getGridParam', 'selarrrow');
if(selRowIds.length>1)
{
alert("Error");
return false;
}
else
{
return true;
}
}
I use a tabView component with many tabs. In many of them, I have form which are submitted by primefaces commandButton component.
By default, PF commandButton using ajax mode but when I submit my form, my page seems to be fully loaded and my tabView component lost its index view (index 0 is rendered).
Is that normal behaviour please ?
I though that I would stay in the same index because it's ajax...
Looks like there is some naming container (p:tabView maybe) that you better assign an id to it , so instead of getting prefix like j_idt16 (which could vary from time to time) you will get myTab0 , myTab1 etc prefix...
for example <p:tabView id="myTab"
Another thing you could do to be on the safe side is checking if the element exists before trying to select it with jquery and access its value, like this
if($('#j_idt16\\:register_location_choice_2_input').length > 0){
//some code here
}
Ok, my problem is the JS validateRegisterForm function. When I remove it, it works but I need it...
I use it to check if validation form can be launched.
function validateRegisterForm(){
if($('#j_idt16\\:register_location_choice_2_input').attr('checked')){
if($('#j_idt16\\:register_galaxies_input').val() == 0){
var galaxie = MUST_CHOOSE_GALAXY;
alert(galaxie.charAt(0).toUpperCase() + galaxie.slice(1));
return false;
}
if($('#j_idt16\\:register_solar_systems_input').val() == 0){
var ss = MUST_CHOOSE_SOLAR_SYSTEM;
alert(ss.charAt(0).toUpperCase() + ss.slice(1));
return false;
}
if($('#j_idt16\\:register_positions_input').val() == 0){
var position = MUST_CHOOSE_POSITION;
alert(position.charAt(0).toUpperCase() + position.slice(1));
return false;
}
}
return true;
}
So how can I check fields values before sending and allowing or not validation form with ajax please ?
EDIT :
Ok, I solved my problem by launching validation inside my JS function with button type passed to button not submit and using remoteCommand component :
My JS function :
function validateRegisterForm(){
if(...)
validateForm();
}
And my remoteCommand :
<p:remoteCommand name="validateForm" actionListener="#{login.registerAccount()}"/>
I know how to grab the index, but that doesn't appear to be what I need to post into the tab itself.
This is a continuation, but different question, from my previous post: Submiting jQuery form results back into dynamic tab
My tab form is submitting now with 100% success, internal to my jQuery validate, but I want my reply to appear in the tab it came from.
At the end of my jQuery validation I have:
submitHandler: function(form) {
var thisTab = $tabs.tabs('option', 'selected'); // what index are we?
var options = {
target: '#thisTab',
};
$(form).ajaxSubmit(options);
return false;
}
It's close, but what I'm doing is actually grabbing the index of the selected tab, this does not appear to be what I need for the ajaxSubmit to post into.
As I understand you want to set target to thisTab, but you are setting target as a jQuery selection string #thisTab,
this means target is the element with id "thisTab".
From Jquery Form Plugin API
target
Identifies the element(s) in the page to be updated with the
server response. This value may be specified as a jQuery selection
string, a jQuery object, or a DOM element. Default value: null
So you should set thisTab as the target.
Update : The main problem is that you are trying to set tab as target element, you should set the selectedPanel as target.
submitHandler: function(form) {
var thisPanel = $tabs.tabs('option', 'selectedPanel'); // what index are we?
var options = {
target: thisPanel,
};
$(form).ajaxSubmit(options);
return false;
}
Hum, maybe I wasn't clear and I'm not explaining it.
What I want is for the output of update.cfm to be shown in the same dynamic tab body that held the details I just updated. I tried what you suggested and all it does when I hit submit is blink. It does submit, I can use firebug to see the post and response, but the response is not shown. So I do want the tab as the target.
What you did do however is show me a new term "selectedPanel" that I did not know, and that lead me to this post which I had not seen before: How to get the selected tab panel element in Jquery UI Tabs?
And that led me to make the following change:
submitHandler: function(form) {
var selectedPanel = $("#tabs div.ui-tabs-panel:not(.ui-tabs-hide)");
var options = {
target: selectedPanel
};
$(form).ajaxSubmit(options);
return false;
}
I'm using a YUI2 DataTable.
Some of the rows of the tables have an icon button that when clicked on will popup additional details for the row.
I'm doing the following to define the panel which gets displayed with the additional information:
MyContainer.panel2 = new YAHOO.widget.Panel("popupPanel2",
{ width:"650px", visible:false, constraintoviewport:true, overflow:"auto" } );
MyContainer.panel2.render();
YAHOO.util.Event.addListener("showButton2", "click",
MyContainer.panel2.show, MyContainer.panel2, true);
So, everything works well with that. Then I added a button that when clicked on filters out some of the rows.
MyContainer.oPushButton1.onclick = function onButtonClickp(p_oEvent)
{
var filter_val = "xxx";
myDataTable.getDataSource().sendRequest(filter_val,
{success: myDataTable.onDataReturnInitializeTable},myDataTable);
}
This filters and redraws the table. But after doing that, the buttons on the remaining rows that should popup a panel no longer work.
Nothing happens when I click on the buttons.
I'm sure I've done something wrong, but I don't know what. The buttons and panels with the correct id's still seem to be available on the page.
Do I somehow have to re-enable the listener for the click event after the datatable redraw? I'm not sure where to look for trying to debug the failed listener.
I got this working by making a call to addListener again after resetting the data for the Datasource.
MyContainer.oPushButton1.onclick = function onButtonClickp(p_oEvent)
{
var filter_val = "xxx";
myDataTable.getDataSource().sendRequest(filter_val,
{success: myDataTable.onDataReturnInitializeTable},myDataTable);
YAHOO.util.Event.addListener("showButton2", "click",
MyContainer.panel2.show, MyContainer.panel2, true);
}