Lightswitch HTML Client
After a query has been executed, I'm curious how to perform changes on the client immediately after. For example, i have a search box (textbox) that takes the input and passes it along to a parameterized query. On the client, i would like to set the focus back to the search box after the query has finished. I have working java script code to set the foucs, i just don't know when and where to use it. I need something like the server methods _Executed and _Executing but on the client. Is this possible?
I don't think you'll know when the query has completed, since it's done asynchronously, and by default only loads a portion of the results. Have you tried putting the javascript to set the focus in the postRender of the control associated with the search box? You can find it in the designer for the screen by selecting the control, and selecting the drop down next to Write Code.
Don't forget to use the setTimeout method to ensure the element is properly rendered before your javascript is applied. For a proper explanation refer to Why is setTimeout(fn, 0) sometimes useful?.
I used the following and it shifted focus to the button:
myapp.BrowseMyEntity.MyButton_postRender = function (element, contentItem) {
setTimeout(function () {
element.focus();
}, 0);
};
If you really want to set focus after you've deliberately called a query and it has completed, use the promise mechanism ".then(...)", for example:
screen.details.dataWorkspace.ApplicationData.MyQuery().execute().then(function (result) {
// Do whatever you want here
}
});
Related
I have a kendo tabstrip, with multiple tab contents, each of them include Javascript function $(document).ready()...
However, it only executes at the very first time the tab is selected (the content loaded), when I select another tab and come back to this tab, as the content is already loaded, $(document).ready() is not called.
Is there any possible method to make $(document).ready() execute every time when a tab is selected? (Re-render the tab content every time is not an option due to performance consideration...)
Any suggestions is appreciated!
You could define a function for each of your individual tabs and wire up a client-side event to pick up when the TabStrip selection changed using some of the available events :
#Html.Kendo().TabStrip()
.Name("YourTabStrip")
.Events(events => events.Select("tabChanged"))
<script>
function tabChanged(e){
// Get your selected tab using (e.item);
var index = $("#YourTabStrip").data("kendoTabStrip").select().index();
// Based on the tab, trigger a function
switch(index){
default:
case 0:
LoadContentA();
case 1:
LoadContentB();
}
}
</script>
And you could refactor each of your $(document).ready() calls within your individual tabs to simply call one of the functions specified within the switch statement :
<script>
$(document).ready(function(){
LoadContentA();
});
function LoadContentA(){
// Do work here
}
</script>
I'm sure if you read through the available Javascript API documentation and ASP.NET MVC API documentation, it might help provide some additional insight on a better way to tackle this.
Right now I have a radgrid that is filled with checkboxes. If I click on a check box it calls my code behind checkchanged. In check changed it checks and see if that item is active if its not it throws an alert. I want to change that alert to a confirm but the radajaxpanel doesn't appear to have a method for confirm so I figure I need to create one in javascript and call it in the code behind.
What I have now
else
{
RadAjaxPanel1.Alert("The event you selected is currently In-Active");
}
So I assume I would need to change that to a call of the javascript or something similar to call for a confirm and then return the response in the codebehind to either continue or stop.
EDIT: If this helps maybe what I am trying to explain is. On codebehind trigger a javascript method to run and return a value for my codebehind to evaluate and continue or stop running.
EDIT 2:Or what I want to change is on clientclick it calls the javascript and if the javascript return Yes then it calls the codebehind. Maybe that is more likely and possible.
I have a Function Which will send the emails to different recievers say Actor1, actor2 etc. Before sending the auto generated email the user should be able to edit it.
I have used a placeholder to display the autogenered email content and a textbox to add the new content.
My function looks like this
public void SendEmail(var content)
{
...
display1= actor1content;
....
....
dsplay2=actor2content;
}
Here display1 and display2 are the controls which i am putting to placeholder. Now after function execution two displays will come together. How can I make the function to make display1 to appear first and then continue function execution and again make display2 appear.
You could use an UpdatePanel to prevent a full PostBack , and a Timer to trigger an async PostBack every 5 seconds or so. When the async PostBack occurs, you could check the status of your background operation and if you need user input (eg: if the operation has completed), register a startup script to display an alert/prompt.
I'm creating this form (.net) where i have a select with a postback, that will trigger a action depending on which option i select. I'm trying to use the jQuery Validate Plugin (plugin website) to validate my form.
My problem is, when i validate the form, and my select is marked as invalid, the validation plugin overwrite it's onChange method to make it unmark when i change the value, the thing is that it's deleting my __dopostback from the onchange, making the form 'useless'.
Is there a way to the plugin validate my selects without deleting my postback action from the onchange?
I know this is an old post, but I had a similar situation and was able to resolve it like this. Just thought I'd post it just in case someone else found there way here. I'm using jQuery Validation Plugin 1.9.0:
$('#aspnetForm').validate({
errorLabelContainer: "#messageBox",
wrapper: "li"
});
$("input[id$='myButton']").click(function () {
SetRules();
if ($('#aspnetForm').valid()) {
// form passed validation
} else {
$('#aspnetForm').resetForm();
return false;
}
});
function SetRules(){
$("select[id$='myDropDown']").rules("remove");
$("select[id$='myDropDown']").rules("add", {required:true});
}
My validator is set up so errors display together in one designated div. When I click the button, the validation fires and displays all the elements in that div and marks the fields that are invalid, including the select (all choices are red), and when I change the selection my autopostback fires and the colors of the select change back to their old value (assuming the choice passed the validation).
I am pretty new at this plugin, so I can't explain it too well but my thought process was to try and get the form to validate and show the errors, and then reset the controls back to their original state while still keeping the error messages visible. I was expecting to lose the red error highlighting, but somehow that retained while also bringing back the select's postback.
Also, I do not know if setting the rules in this manner contributed to this working or not; I had to set them like this for various reasons, the biggest one due to needing the selector for .NET's automatically generated IDs.
In my current asp.net-mvc project one of my pages allows the user to select a value in a dropdown box after wich a post request is made that updates several values.
To make sure the delay from the postback doesn't confuse the user into selecting another value (and thus creating another post, creating another delay etc) I set the select's disabled attribute to true.
Disabled inputs aren't submitted to the post call however.
How can I make it visually clear to the user that work is in progress and make it imposible to select a new value without removing the input from the post?
Yes, this annoys me too.
Basically what you need to do is hide the old button and replace it with a disabled one so it looks the same to the user. That way it's still submitted but can't be doubly submitted.
Actually I've found what seems to be a duplicate of this at Problem with disabling submit buttons on form submit.
From your answer, I gather you are already using jQuery. In that case why don't you get the value of the select box, disable it, then post the value yourself?
Bonus : BlockUI is a nice jQuery plugin to, well, block the UI.
None of the answers I found in Cletus' post was entirely what I was looking for.
Here is what I came up with. It's not 100% reusable, but it does what I need and feel free to improve/edit.
$('#productMixSelectorForm').change(function() { $(this).ChangeSelection() });
jQuery.fn.ChangeSelection = function() {
var html = $('<div class="hidden">');
$(this).find('select, input').each(function() {
if ($(this).hasClass('hidden') == false) {
//Clone the original one into the hidden div
html.append($(this).clone());
//Disable the original (visible) one and make it's name unique again
$(this).attr("disabled", true);
var name = $(this).attr("name");
$(this).attr("name", name + "disabledDummy");
}
});
//Add the collection of clones to the form so they get submitted
$(this).append(html);
$(this).submit();
}