Unable to call angular function without setTimeout - javascript

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
});

Related

How can I change size on a website without getting "Cannot set property 'value' of null" error using only Javascript?

I am trying to make a browser automation program using html and Javascript for a website that has a "change size" select field. That field uses "s" as its ID. I tried putting the code in a one time use function or trying delays, but nothin works. In order to choose my size, I am using:
document.getElementById("s")['selectedIndex'] = 2;
When I run the code, it is able to change the size and go to checkout, but the code that I wrote for a check out form after the select size field does not get filled out. An example of that code to check out is below.
var email = "johndoe#gmail.com";
document.getElementById('order_email').value = email;
When I remove the select size code however, the whole program works except for the size selection (Program simple goes through everything except size selection, keeps default). Is there any possible work around or something that I am doing wrong?
Edit:
The console says that: "(anonymous function), Cannot set property 'value' of null" I am running the script through a chrome extension, and a button triggers it (hence the html), the current function that I have been constantly changing for the size selection to work is:
var once = function() {
if(once.done) return;
console.log('Doing this once!');
once.done = true;
document.getElementById("s")['selectedIndex'] = 2;
};
once(); once();
I also have the form fill out function (part of the same javascript) in the same one and done function, using the code mentioned above for the form.
Im new to this.
Thank you!

Why does the wrong ID keep Populating?

I have run into a very odd situation, that I have not experienced before. In our code, we wanting to check the value of BillingDomainID once the page is loaded. Wrapped in a function with many other jQuery functions inside, I have the following code:
var vBDID = ".BillingDomainID" + $("#BillingDomainID").val() + "";
alert(vBDID);
$(".BillingDomainID").show();
$(vBDID).toggle();
We are using vBDID to dynamically create a class that will hide certain fields in the form if the BillingDomainID != 1. The Value exists in a hidden field that is at the bottom of the page. Since we have 7 BillingDomainIDs in our system, Anytime the BillingDomainID = 1 it will show the fields, and anytime it is 2-7, it hides them because of the classes that we have placed on the fields that we want to hide.
So here is the issue that I having. The alert that appears in the code above will say that the vaule of vBDID is .BillingDomainID2 for example, but the real value of the #BillingDomainID is 1 in the Database. Why is it that the value is being presented as a different value in the website, that it is in the database? Everything else works as it should, with the exception to this part.
I should also mention, that we are using ajax to change value when the Office dropdown is changed. This part also works fine, and the BillingDomainID will actually be correct after it is changed once. It is only initially when the page loads that it is incorrect.
Thank you all so much for your help!

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 ?

Current TabPanel ID in onClientLoad CSJS

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?

How to preserve selected value in drop-down list after postback?

$("#county_id").change(function() {
$("#vice_county_id").html("<option value=\"\">-- Select One --</option>");
var co_id = $(this).val();
if(co_id != 0) {
$.getJSON('./php/includes/vice_county_web_service.php?co_id=' + co_id,function(data) {
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
});
});
}
});
Hi Guys,
I have the above code for loading options in one drop down based on the selection in another. It works fine but to finish this up I am trying to get it to be sticky. I.e. if the form is posted and county has a value already selected then the vice county pre loads with the relevant options. Basically fire the .change functionality on load. I have tried the .load and triggerhandler functionality but it does not seem to work. Any Ideas?? Thanks.
As far as I am aware, in order to prepopulate a form, you'll need to use server-side code. You say that the user posts his code somewhere, but you don't say how the form post is being handled.
I use ASP.net where I work, so I would have a server-side property for the value of each drop-down list. Then, when the page renders, I print the value of the property to my JavaScript code. You'll need to make your JavaScript code add the attribute selected='selected' to the option that you want to be selected when the page loads.
Update:
It sounds like you're saying that you select drop-down 1, and then the options for drop-down 2 are automatically populated. It sounds like the problem is that drop-down 2 cannot be preserved after the postback because its options are populated after the page loads (via AJAX). I believe that the solution to your problem is going to be to set the selected attribute inside code that runs when you successfully get the drop-down options via AJAX.
$.each(data, function() {
$("#vice_county_id").append($("<option></option>").val(this['vice_county_id']).html(this['vice_county_name']));
//Check if the option being added was previously selected.
});
Use the Cookies to store the value of the drop down change event.
and when the form loads use the same cookie to retrieve the value and display the user what ever he selected.
But maintaining cookie for this task is not recommeneded.
You can use the JSTL if its a JSP page.
Cookie creating guidlines
http://www.quirksmode.org/js/cookies.html

Categories

Resources