I have a datatables instance on a web page that has full numbers pagination. This includes First,Previous,Next and Last buttons plus the individual numbered buttons.
Each row in the table has an 'Edit' link. When I click it, I want to disable the pagination from working. When I click a 'Cancel' button, I want to restore the pagination functionality. I can do the first part easy enough, but I cannot restore the pagination click functionality. Here's my code:
function ghostPage(state)
{
// In this method, 'state' will be either true or false
// If it's true, remove the click handler
// If it's false, restore the click handler
if(state)
{
$('#displayTable_paginate').find('a').each(function(e){
$(this).off('click');
})
}
else
{
$('#displayTable_paginate').find('a').each(function(){
$(this).on('click');
})
}
}
Try this if you want to save the click handler and restore it later.
function saveClickHander(){
var $this;
$('#displayTable_paginate').find('a').each(function(e){
$this = $(this);
$this.data().originalClick = $this.data("events")['click'][0].handler;
})
}
function ghostPage(state)
{
// In this method, 'state' will be either true or false
// If it's true, remove the click handler
// If it's false, restore the click handler
if(state)
{
$('#displayTable_paginate').find('a').each(function(e){
$(this).off('click');
})
}
else
{
var $this;
$('#displayTable_paginate').find('a').each(function(){
$this = $(this);
$this.on('click', $this.data().originalClick);
})
}
}
Related
This is my logic, here I am trying to disable the save changes button and prevent click event on it if the user enters a duplicate value and enable it again if the user changes the values but after enabling it the update / save event does not occur am I doing something wrong? This is my code
function OnChange(data) {
//data.preventDefault();
$(".k-grid-save-changes")
.attr("role", "button")
.removeClass("k-state-disabled")
//.addClass("k-grid-save-changes")
.click(function () {
return true;
});
//console.log("data", data.items["0"].ProviderTypeName);
var name = data.items["0"].ProviderTypeName;
var Id = data.items["0"].Id;
var grid = $("#grid").data("kendoGrid");
//console.log("Grid ", grid);
grid.tbody.find('>tr').each(
function () {
$(this).css('background', 'white');
var dataItem = grid.dataItem(this);
//console.log(dataItem.ProviderTypeName)
if (dataItem.ProviderTypeName == name && dataItem.Id != Id) {
$(this).css('background', 'red');
$(".k-grid-save-changes")
//.removeClass("k-grid-save-changes")
.addClass("k-state-disabled")
//.removeAttr("role")
.click(function () {
return false;
});
}
});
}
This is where is call the on change event
.Events(events => events.RequestStart("OnRequestStart").Change("OnChange").RequestEnd("OnRequestEnd").Error("onError"))
If I remove the "return false;" it is working as expected but this allows duplicated values to be saved. So I have used this.
If I understand correctly in your code you do exactly what you mention as a problem. At every change you disable the save functionality with the return false. You don't enable it again at any point.
If you add an event handler to the button then you have to undo it at a later point. Since though I don't believe that the validation should occur at the change event but at the button click I would suggest to use the grid Save event where you could iterate dataSource.data() of your grid (much better) do your check and if anything happens return false.
One other way to go since you probably want the css effect with the background is to keep your code and discard the click event. Just set a flag that you could use in the save event. Something like this:
if(// your control){
$(this).css('background', 'red');
duplicatedValue = true;
}else{
.removeClass("k-grid-save-changes");
duplicatedValue = false;
}
And in the save event
function onSave(){
if(duplicatedValue){
return false;
}
}
In SilverStripe (3.1.4) I'm doing a complex admin interface for one of my DataObject, where - depending on the DropDown's selected option - one or two TextFields get disabled or enabled for admin input. What I still need to do is to make the appropriate fields required when they get enabled.
I tried the following code which attempts to hook up to the Save button action:
(function ($) {
$.entwine('ss', function () {
$('#Form_ItemEditForm_action_doSave').entwine({
onclick: function (e) {
alert('submitting')
var selectedItem = $('#Form_ItemEditForm_Symbol option:selected').text();
if (selectedItem.indexOf('%1') > -1 && $.trim($('#Form_ItemEditForm_Placeholder1').val()) == '') {
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
}
});
});
})(jQuery);
This does not seem to work - the form still submits, the alert never shows up.
Is there anything I'm missing?
I also tried to add:
Behaviour.register({
'#Form_ItemEditForm' : {
initialize : function() {
this.observeMethod('BeforeSave', this.beforeSave);
},
beforeSave: function() {
alert("You clicked save");
}
}
});
But ever since the form has not been loading at all.
I'm trying to figure out how events works and how to wait for a second event to trigger before the original event is being executed.
$.fn.customConfirm = function (message){
// Create modal
// then ...
$(confirmModal).find("modal-footer a").click(function(e2){
e2.preventDefault();
return ($(this).hasClass("dialogConfirm")); // Returns true if option has class dialogConfirm
});
};
$("a[data-confirm]", click(function(e){
if (!$.customConfirm($(this).attr("data-confirm")))
return false; // Only if customConfirm returns false
// Continue
});
This works like a charm. customConfirm creates a bootstrap modal with 2 buttons (confirm/cancel) and sets the data-confirm attribute value as the modal-body html.
What I don't know how to solve is how to handle the event e based on the user interaction with the modal. As of now it just shows the modal dialog and the original event seems to do nothing.
I solved it by adding the attribute data-confirmed to the clicked element if the user confirms and then triggering a second click() on the original element.
$.fn.customConfirm = function (message){
var handle = $(this);
// Create modal
// then ...
$(confirmModal).find("modal-footer a").click(function(e2){
e2.preventDefault();
$(handle).attr("data-confirmed", ($(this).hasClass("dialogConfirm")))[0].click();
return false;
});
};
$("a[data-confirm]").click(function(e){
if ($(this).attr("data-confirmed") !== "true")
{
e.preventDefault();
$(this).customConfirm();
return false;
}
$(this).removeAttr("data-confirmed");
// Continue
});
I found a related post which did not help:
Twitter bootstrap:Popovers are not showing up on first click but show up on second click
The difference is in my page I have several elements which require popover (several tips-icon), so I need to loop over them..
My markup:
<img class="help_icon" src="http://media.mysite.com/pub/images/help/tips-icon.png">
This is my javascript:
var h=document.getElementsByName("click_help_container");
for (i=0;i<h.length;i++)
{
$('#'+h[i]['id']).click(
function ()
{
var id=$(this).attr("id");
getHelp(id,$(this),function(t,elem)
{
var isVisible = false;
var clickedAway = false;
$(elem).unbind('click');
$(elem).popover(
{
"title":t.title,
"content":"<p class='popover_body_text'>"+t.content+"</p>",
"html":true,
"animation":true,
"placement":"bottom",
"trigger":"manual"
}).click(function(e)
{
$(this).popover('show');
clickedAway = false;
isVisible = true;
e.preventDefault();
});
$(document).click(function(e) {
if(isVisible & clickedAway)
{
$(elem).popover('hide')
isVisible = false;
clickedAway = false;
}else
{
clickedAway = true;
}
});
//$(elem).popover('show');
});
});
}
The problem is when I click on the tips-icon.png button, the popover doesn't show up on first click (I guess it's because I have 2 .click() calls When I click on the button the second time popover shows up and it then maintains it's toggle behavior from there onwards.
You don't need to loop through all elements and initialize popovers one by one, you can apply popover to all items with this name at once (same as you're doing in loop).
And you don't need to show/hide popovers manually by yourself, bootstrap can do it for you.
I think this should work for you:
$("a[name='click_help_container']").popover(
{
"title":t.title,
"content":"<p class='popover_body_text'>"+t.content+"</p>",
"html":true,
"animation":true,
"placement":"bottom",
"trigger":"click"
});
In my VB.NET project, I have a UI with some text input fields and a save/submit button. I want the save button to be in a disabled state on page load, and remain that way until a change is made to one of the inputs. And the save button should get disabled again if the values entered by the user are the same as they were at page load. So basically, the save button should be enabled only when there is an actual change.
How can I do this using jquery?
$(':input').change(
function(){
$("#submitButtonId").prop("disabled",false);
}
);
since you said it is dynamic, use on.
$(document).on("change", ":input",
function(){
$("#submitButtonId").prop("disabled",false);
}
);
You can handle that in the change event
$('input[type="text"]').on('change', function() {
// Change event fired..
$('input[type="submit"]').prop('disabled', false);
});
//This will bind all existing and dynamically added selects onChange to the handler
$(document).on('change', function(e) {
onChangeHandler();
}
// handle the event
function onChangeHandler() {
if (checkValues()) {
$('#yourButtonId').prop("disabled", false);
}
else {
$('#yourButtonId').prop("disabled", true);
}
}
// check all values against originals - data-* attributes are a good way to store data on
// an element. So have you can have:
<select id="id1" data-originalvalue="myValue"></select>
// compare the current value to the original value - if any one of them differ, return
// true
function checkValues() {
$.each($('select[data-originalvalue]'), function() {
if ($(this).val() !== $(this).attr(data-originalvalue){
return true;
}
return false;
});
}