Current TabPanel ID in onClientLoad CSJS - javascript

I have client sided code in the onClientLoad event of my form that governs field hiding. Problem is, it depends on values in the first tabPanel. If I switch to the second tabPanel, it stops working. I can no longer switch back to any other tabPanel.
How can I within the onClientLoad event using CSJS identify which panel I currently am on?

In a tab panel whenever you switch between tabs the fields are recalculated.
So, I would rather suggest you to put a visibility formula on field instead.

Make sure all tab panels have a nice id. Then in your script block you can add something like:
var t1 = dojo.byId("#{id:tab1}");
if (t1) { // do your stuff }
Does it work for you?

Related

Unable to call angular function without setTimeout

I am trying to maintain the Back functionality. In our application, we have decided to put a back button and with the click of the back button, I have to maintain all the values of the form which a user has selected or filled. I am doing this in MVC with angularjs.
In the form, we have allowed a user to choose a color for the selected mobile model. So, the form is like the user will prompt to choose a Phone Model and then its Color and finally its Capacity. So, its a dependent fields which will be enabled only if the immediate field is selected.
The Color is created dynamically.
In my code below, which I have shared below is for the Color. After choosing the Color then I have enable the required capacities as well.
var elementName = modelName + '_Black';
var elementNameWithHash = '#' + elementName;
angular.element(elementNameWithHash).trigger("click", elementName);
modelName would be passed to it at dynamically.
The problem here lies is, the code is not executing to trigger a click for the Color section, so that it can be shown as highlighted and the below section of the capacity is enabled.
But, this code won't execute until and unless I am decorating it with setTimeout method like this:
setTimeout(function () { angular.element(elementNameWithHash).trigger("click", elementName) }, 1);
I am not able to understand why it showing this weird behavior to me.
Any light on this, would be greatly appreciated.
And, if I have to call this without setTimeout what I have to do?
It looks like your code is called before the page is loaded.
Angular has its own function to test on document ready:
angular.element(document).ready(function () {
// Your code
});

How to show devexpress popup control inside a user control from client side

I am using devExpress 11.2 and ASP.NET 4.0. Please bear with me for lengthy problem description.
I have created a user control which contains a ASPxPopupControl (ID = "myPopup")
<dx:ASPxPopupControl ID="myPopup" runat="server" ... </dx:ASPxPopupControl>
and other controls. I also implemented a public method ShowPopup() in which it executes the myPopup.ShowOnPageLoad = true in order to show this popup. This user control is then registered and referenced in my ASPX page. I put this user control into a cell of a table within ASPxRoundPanel with ID="myUC"
In this page, I have a ASPxGridView in which I created a custom command button as follows:
<dx:GridViewCommandColumn VisibleIndex="0" Width="30px" Caption="" ButtonType="Image">
<CustomButtons>
<dx:GridViewCommandColumnCustomButton ID="cmd">
<Image Url="~/Images/OK.png" />
</dx:GridViewCommandColumnCustomButton>
</CustomButtons>
</dx:GridViewCommandColumn>
ClientSideEvents is defined as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback">
I would like to popup my user control when this image button is clicked. Please note that this ASPxGridView also provide Insert/Editing/Delete function.
There are two ways to deal with this requirement.
1 In order to ensure ASPxGridView handling its built-in commands (Insert and etc) correctly, I need to set EnableCallBacks="True" then I set OnCustomButtonCallback="OnmyASPxGridView_CustomButtonCallback" to handle the clicking event of the image button from code behind. I called myUC.ShowPopup() from code behind and I debugged up to here. However, the popup is not shown. If I set EnableCallBacks="False" then the popup is shown exactly what I expected.
The problem of this approach is not acceptable because the built-in commands do not work properly. So the question is how can I show the popup control within my user control from code behind while EnableCallBacks="True" ?
2 Second approach is to show popup from client side.
I set EnableCallBacks="True" first to ensure my built-in commands work properly. then I defined ClientSideEvents as
<ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback" CustomButtonClick="jsfnShowPopUpControl"/>
and removed OnCustomButtonCallback event.
I implemented javascript function jsfnShowPopUpControl like this:
function jsfnShowPopUpControl(s, e) {
// next, find access control inside user control
**var myPopupName = document.getElementById('<%=myUC.FindControl("myPopup").ClientID %>');**
if (myPopupName != null) {
myPopupName.Show();
myPopupName.PerformCallback(e);
}
else {
alert("Data error encountered"); // cannot find popup
return; //
}}
The key part of this approach is to find the devexpress popup control which resides within a user control. Unfortunately that getElementById function could not find the underneath control in my user control and thus popup is not shown either.
Please help and let me know what I did wrong in my two different approaches.
Thanks a lot.
Reference these- Showing a DevExpress AspxPopUpControl when user clicks a button
How to show ASPxPopupControl's window on the client side
To solve this issue, I suggest you use the ASPxClientPopupControl.ShowWindow method.
For this same scanerio as you want to implement what i have done.
Assigned ClientInstanceName property to some unique name on the page
including the user control now you free to access that object anywhere
in the html through javascript.
Let you set the popup's ClientInstanceName to "MainASPxClientPopupControl". Thus, it should be possible to use it on you main page as follows:
MainASPxClientPopupControl.Show();
Reference on this topic: ASPxPopupControl - Cannot get an instance of the popup from a page

Javascript is done, but browser do not reflect these changes (ASYNC?)

I am using CEF and CefSharp.
I have one c# class that its purpose is to know if JS function call is done and then call call JS again on curent element xPath in
class test {
//array of Xpaths of elements
elementsXpaths
public IsDone(){
LoadNext()
}
LoadNext(){
call = string.Format("click('{0}')", elemenentsXpath[next])
browser.ExecuteScriptAsync(call)
}
}
Then JS something like this
function click(xpath){
elementFoundedByXPath.click()
elementFoundedByXPath.style.backgroundColor = "#FF0000"
test.isDone();
}
My problem is, that background color is not changed right after click().
So for example I have one element, clicking on this element reveal some other elements (fe I click on show login button and login and password input are shown after this click) and then click do not fails, but I cant see that login and password input. Very odd. I would guess that this will fail, because element is not founded (I am checking this in JS).
I am also checking this in debug, when I have breakpoint on LoadNext I can see that LoadNext is called and backgroundColor of previous element is not changed.
I assumed that if I do click on that element I can be sure that actual click was performed.
Is this problem with async calling of JS? Will EvaluateScriptAsync() help me ? In that case somebody show me some easy example and difference between these two functions ? Or is problem most likely somewhere else ?

changing id within javascript with onClick var?

I managed to get some js to work to my surprise, now I want to make it a little more complex which is way out of my expertise.
I have a button when clicked will reload a iframe that is on my page. I have multiple iframes all but 1 are hidden. Then I use jquery to display a different iframe and hidden the previous depending on the nav button clicked. e.g. "1-btn" (nav btn) tied to "1-win" (iframe), "2-btn" (nav btn) tied to "2-win" (iframe) etc. So when you click "2-btn", "1-win" iframe hides and "2-win" iframe is displayed. Now I want to change my code so this ties into my reload javasrcipt. Currently, my js only reloads 1 iframe via the iframe id. I want to change this id every time to a different iframe. This will allow my Reload btn to only reload the current iframe displayed and not any of the other that are hidden.
Here is my Reload js
function Reload () {
var f = document.getElementById('1-win');
f.src = f.src;
}
As you can see this reload script only works for iframe "1-win". When i click "2-btn" nav to display "2-win" iframe (and hides "1-win") the reload button still only works for "1-win". Therefore, I want it to also change. For e.g. when I click "2-btn" (nav) to display "2-win" iframe I want to change the Reload id to "2-win" also.
I was thinking of using onClick within my nav buttons which passed through the id of the iframe which that nav btn is tied to. However, I have no idea how to do this.
For full code see:
https://github.com/tmacka88/Service-Manager
Sorry if this doesn't make any sense, I cant think of an easier way to explain it.
Thanks
EDIT
This below answer may or may not still apply now that the problem has been better defined.
One approach you could try is having a hidden field on the page which contains a semi-colon separated list of the Id's of the iframes. E.g.
<input type="hidden" name="iframeids" value="1;2;3;4;5">
On the click event of your button, call some JavaScript which gets the value of the hidden field, takes the first token before the semicolon, and then reorganise the string. An example:
// Next value is 1
// Use 1 in your JS
// Put 1 to the end, next is now 2
<input type="hidden" name="iframeids" value="2;3;4;5;1">
You would contain the logic of re-arranging etc. in the JS function.
Now that the problem is better defined, we can work out a proper solution.
Here are some design considerations:
Ideally you do not want to manually add a new button for every iframe that you put on the page. Main reason being code maintenance. If you were to add a new iframe, or remove one, your code would not function correctly. Also the amount of mark-up required will be unnecessarily high
jQuery will make your life easier, although it's not required, it will cut out a lot of code. I can't stress enough the importance of knowing JavaScript basics first, but this is your responsibility to learn
For point 1, what we would like is a generic solution so that if you add more iframes, the buttons are added automatically. JavaScript is the way to do this (I'm assuming this is just HTML, not ASP.net or php or some other server side
Point 2 - jQuery will help with point 1.
Now we have this understanding, let's look at an outline of what we need to do:
In JavaScript, loop through the iframe tags on the page
For each iframe, generate a button using jquery, using the values like src and id in the iframe as attributes on the button
Add some click-event code to the button do define what it needs to do when clicked
Again using jQuery, add the newly created buttons to the DOM
This did the trick:
function Reload()
{
$("iframe").each(function()
{
if($(this).is(':visible'))
$(this).attr('src', $(this).attr('src'));
});
}

Inhibit a checkbox from changing when clicking it

I want a checkbox on a web page. When I click it, it sends an ajax request to the server. When the server replies, I want the checkbox to change. I can fix everything except the fact that the checkbox immediately changes state when clicked.
Are you sure you really want this? An Ajax-Request can take its time. When the user gets no feedback, they may be inclined to click again and again, until something happens. When this deactivates the button (again after some time) the user gets even more puzzled.
Rather think about providing immediate feedback (e.g. check the box) and display an indicator next to it, that signals communication with the server (e.g. the famous spinning wheel). When the result is back, hide the indicator and deactivate the checkbox if needed. You may also want to inhibit posting the form during the ajax request.
You could probably do something like this: when the checkbox is clicked, set the checkbox to "disabled" (this greys out the checkbox and makes it uneditable), make your ajax call, and once you get the ajax return remove the "disabled" from the checkbox. Something like this (using jQuery, untested):
$('#mycheckbox').click( function() {
var checkbox = this;
$(checkbox).attr('disabled','1');
$.post( url, data, function() {
// if successful
$(checkbox).removeAttr('disabled');
}
}
Add to your onclick "return false;" and it should not change.
<input id="theChkbox" type="checkbox" onclick="this.checked=!this.checked;sendAjaxRequest(this);">
this.checked=!this.checked will reset the state of the checkbox to what it was before it was clicked. This should work in all browsers without the state flickering (too much).
sendAjaxRequest() will do your magic and when the request comes back set the appropriate checked state of the checkbox. Passing this to sendAjaxRequest() should give you a reference to the checkbox so you can adjust its state. Failing that, just use document.getElementById("theChkbox") to retrieve a reference to it to set its state.
You could start your onchange method with checkbox.checked=NOT checkbox.checked (you may have to modify this for your language of choice), you'll probably get a flicker but it should put it back quickly enough.
I think you should use other approach indeed. Maybe a button/image button because you want to fire some actions for a click to represent a specific command (desire) from the user. I will try to explain better: i think you have some info in the page and some gadgets where the user can click and do something (add an item to a cart) and i think it is more usable if the gadget has more visual appeal to the user than a checkbox (i.e. a "add it" for instance).
Hope this help.

Categories

Resources