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

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 ?

Related

Trying to programatically click a button on a web page with cefsharp

I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");

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

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?

Dynamic Confirmation Message on a confirm.html

I am trying to create a Javascript function to display a dynamic confirmation message, that will appear on a confirm.html page. It needs to be in an external Javascript file so that it can be used on a variety of pages. I've tried a variety of things but I just cant quite get it to work correctly. I'm trying to do it with only Javascript.
This is what I have currently, after doing some research
This is button I'm using to call the function
<input type="button" value="Remove" onclick="dynamicMessage('This product has been deleted')">
and the current function I'm using is
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_self");
test.document.write("test");
test.document.close();
}
Obviously, the dynamic content isn't added in yet, but if my thinking is correct, it should just be adding the argument somewhere in the long string of html I need to add to create the page. The "test is just do see what happens when calling the function.
What I want it to do is, write the "test" to the new window of confirm.html, but instead it overwrites the current window. But if I only call window.open, it opens to the correct window. It is the document.write part that is throwing me off.
I'm not sure if I'm far off base on my thinking, or if its just a simple mistake I'm missing after hours of looking at this code. Any Ideas?
I think I need to clarify what I am trying to do. I am trying to click a button, in this case a remove button, then open up the page confirm.html, edit the content in confirm.html with the argument, and have the current page now be confirm.html. What currently happens is one of two things either the current document is edited if the "_self" tag is placed, or the html page is open and thus an about_blank url.
Hope i understood your question | DEMO
Since you are using document.write method it will overwrite contents of your html page
function dynamicMessage(argument)
{
var test = window.open("./confirm.html","_blank");
test.document.write(argument);
setTimeout(function(){test.close()},2000); // after 2 sec it will close
}

Onclick event with an argument = Not implemented?

Hoping for some advice here, I'm quite new to javascript and coding in general so I'm sure there are better ways to do what I need, however any help much appreciated ....
I have a piece of javascript that creates a table, the amount of rows being dynamic.
When I call the javascript I'm passing a few bits of info over, and one of these is an array. The array contains in each element a long string of text.
So I create the table with X rows showing some identifying data. I also create a radio button for each row with an on click event. The idea being that when the user clicks on the radio button, then the long string from the array element will be displayed in a separate text box.
I have managed to get to the point that the table is created and that when the radio button is selected the onclick event fires and loads a piece of data into the txt box. However that piece of data is hardcoded (txtbox.value=array[1])
What I'm now trying to do is load the relevant string from the array, depending on what radio button is clicked.
If i change my onclick event to onclick=function(ID) and my function to function(ID) I'm getting an error 'Not implented'
It appears to be generated from the onclick event rather than the function ...
The following works :
R1.onclick=clicktest;
function clicktest()
{
txtbox.value=array[1]
}
The following generates the error
R1.onclick=clicktest(1);
function clicktest(id)
{
txtbox.value=array[id]
}
Apologies if this isn't so clear.
Using this code
R1.onclick=clicktest(1);
You're executing clicktest(1) and assigning the result as event handler.
You could change it by this in to make it work
R1.onclick = function() { clicktest(1) };

Categories

Resources