I need to create a custom click event that fires off an ajax call on a date entry within the Scheduler. (The "event" holds data I need to perform the ajax call). This part is easy enough.
The problem is that the "change event" triggers for anything and everything including selecting the different day, week and month views. Resulting in a rather annoying popup for every little click.
I need to find a way of knowing what was clicked, so that I only fire off the ajax call on actual date entry clicks. How would I go about doing that?
EDIT
The reason the event is fired for the day, week and month view clicks as well as a scheduled entry click is that when selecting a scheduled entry, that entry remains selected regardless of the view been clicked resulting in the "changed event" containing the same data for that selected scheduled entry.
So the solution is possibly to deselect the selected entry or know what clicked element triggered the event. If the event was triggered by clicking on the "day" view for example. Don't do the ajax call, if the event was triggered by a click on a scheduled event this Monday for example, then do the ajax call.
The function I am working with is here:
http://docs.telerik.com/kendo-ui/api/web/scheduler#events-change
Altho I would have preferred to use the event change functions. The solution is to use an "event template" instead that holds an anchor tag that can trigger the modal window and ajax call when clicked on:
<script id="event-template" type="text/x-kendo-template">
<a onclick="calendarCall(#: id #);">#: title #</a>
</script>
<script>
function calendarCall(id){
$("#modal").modal("toggle");
$.ajax({
url: 'someurl' + id,
success: function(data){
$("#modal .modal-body").html(data);
}
})
}
</script>
Related
Simple situation. I have form with textboxes, bound to observables. Observables has subscriptions to do some logic (server validation, whatever, just some ajax call).
There is also a button on form with some "save data" logic. Data should be saved only when all callbacks are finished.
Subscribtions are fired when value changed, mostly on focus lost, not just on every change.
Now you can simply type anything to textbox then immediately click on save button. What happens? Click event is called, and data are saved. But it is sometimes faster then subscribtion event is fired and server returns data.
How to "synchronize" click with "done" promise of subscriptions? I need to prevent to save data before everything is done. But there is no relation between subscription of textbox value and button. Everything is async, so I can't just call something like "wait for function" in click event. Other problem should be that subcription is fired later then click event.
Any solution for this?
Add a variable to manage the button state -
<button data-bind="disable: serverSideCheckInProgress">Save Data</button>
Within your ajax call -
//declare serverSideCheckInProgress false on init
saveData = function(){
serverSideCheckInProgress(true);
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
serverSideCheckInProgress(false);
});
}
I have been following this example, http://www.ok-soft-gmbh.com/jqGrid/DependendSelects2.htm, as it is just what I need. I have got it working but it doesnt work when scrolling through records. If you bring up the form and scroll from a UK record to a US record, the list doesnt change. The onChange event only fires when the user selects from the select drop down.
Is there a way around this?
Thanks for your help.
James
My old demo uses 'change' event handler defined in the dataEvents property of the editoptions. In the dataEvents array one can define other event handlers.
You need just bind keyup to the column exactly like it's described in the answer. In the body of the event handler you can do the same actions as in the body of the 'change' event handler (you can place the code in a function and call it from the both handlers). In the way you should be able to solve the problem.
UPDATED: I updated the old answer and another one which was origin for the demo which you used. The new demo support the navigation buttons (the buttons to edit the 'next' or the 'previous' row) in the editing form.
My page is divided into two parts vertically.Left part is like a menu section. Clicking on
any menu brings the proper data related to that menu in the right part of the page. I am
doing it using ajax call and the only div on the right part get refreshed. I am using jquery click event for that ..
say:
$("#left_part").click(function() { // ajax call here });
Now I have some more jquery action on the right part. (say Show hide some div which also work on click event.)
But when new div reloads on the right part those click event on the right part is not working.
But when I bind the click event it works.
say:
$("#some_right_part").click(function() {/ some hide show here )}; Not working
$("#some_right_part").bind('click', function(event){ // some hide show here )}; works fine
Important: When I am on fresh page (no ajax call yet to bring right part) $("#some_right_part").click(function() {/ some hide show here )}; works fine.
But what I know is: $().click(function) calls $().bind('click',function)
So, What is the reason behind this? Or What is the perfect way to solve such problem
Thanks
When you assign a click event via $().click when the page loads, the click event is bound to all matching elements. However, when you do the ajax call and recieve new markup - the new elements are not bound to the click event because they did not exist when you first called $().click.
There is a way to get a click event to be bound to all elements and all future elements that may be created. You must use the live method like so:
$('#elements').live('click', function() {
// do logic
});
I try to implement the link from one grid to the modal dialog of another grid. I made an example
to illustrate this problem. If you choose in a context menu (right mouseclick) of each row of the picture grid, you will find some Actions. One of them is "Go to scan info". Here I would like to have a link to modal dialog of grid "Scans" and modal dialog should put the user depending whether the scan record for the selected picture allready exist or not, to the Add/Edit modal dialog.
Does anybody already implemented something like that?
Let us we have two grids on one page: one with id="grid" and another with id="scan". Exactly like you call jQuery('#grid').jqGrid('editGridRow',id) on double-click on the first grid you can call jQuery('#scan').jqGrid('editGridRow',id) in the context menu "Go to scan info". The only thing which you have to know is to know the ids on the second grid. Before calling of jQuery('#scan').jqGrid('editGridRow',id) you can impelemt any additional logic (like testing whether "the scan record for the selected picture allready exist or not").
If I understand, you need insert another jqgrid into modal dialog. Did you try to insert jqgrid function into open event of jquery dialog?
You have to call jqgrid function on demand, not in document.ready statement in this case.
Imo this could work (not tested yet):
$( ".selector" ).dialog({
open: function(event, ui) {
$("#grid").jqGrid({
... all of options...
});
}
});
I have the following setup:
index.html with <div id="container"></div> using anchor method I load different html content into this container.
My content contains div for modal dialog "dialog-form" and I initialise it with the custom function from the javascript included in index.html on successful ajax load using the callback $.get("callback.php",query, function(data){
$("#container").html(data);
initPos(); // here we run javascript to initialise modal dialog
});
Everything is ok until user click other menu (we load different content) and after that again clicks menu with this modal dialog, so page loads again, we call script again (everything is ok yet), dialog opens, information from the dialog is submitted to server and on sucessful sumbit I want to close the dialog with ('#dialog-form').dialog('close');it worked first time, but no longer works because we initialised this dialog twice and using Firebug I can see two different instances of ui dialog with the same name in the
div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable"
How to clean this up when the user selects different menu item?
What is the right way to do deal with this? Is there any way to close multiple dialogs with the same name?
Figured it out.
To remove this DIVs from body - before initPos() in ajax callback insert function InitializeDialog()
function InitializeDialog() {
$("div").remove(".ui-dialog");
$("div").remove("#dialog-form");
}
In general
When your Jquery UI dialog is returned along with <script> tag in response to ajax call. On this situation you have to remove dialog div as said above and then make a ajax call.
Hope this helps!