Develop Reference

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

Avoid menu toggle to close when clicking

I'm using a .fadeToggle menu on my site.
I'm having some buttons that are showing a different div when clicking on them.
Everything's correct and you can be navigating on it but I want to avoid user to be clicking on the same button and close the info (it makes the screen be completely blank).
If I'm using the e.stopPropagation() I'm not able to navigate through it.
Thanks in advance.
HTML:
</div><div id="toggleContainer2">
<p><p>This is not an advertising platform, all selected agencies are more or less a subjective choice. The author reserves the right not to be responsible for the topicality, correctness, completeness or quality of the information provided. Liability claims regarding damage caused by the use of any information provided, including any kind of information which is incomplete or incorrect, will therefore be rejected. </p>
<p>All offers are not-binding and without obligation. Parts of the pages or the complete publication including all offers and information might be extended, changed or partly or completely deleted by the author without separate announcement.</p></p>
</div>
...
<a class="btn" id="trigger2">Disclaimer</a>
JS:
<script>
$(document).ready(function() {
// toggle advanced search
$("#toggleContainer2").hide();
$("#trigger2").click(function() {
$("#toggleContainer2").fadeToggle(1500);
$("#toggleContainer").hide();
});
});
</script>

Edit: I've been re-read your post, your problem is you didn't understand how .fadeToggle works, because what you describe is exactly what it is intented for.
What you need is to read that : fadeIn because it's the function that you need.
Older answer
What you need is to change the way you're tracking the target of the event.
Let say your dropdown as the class .dd and your button class is .menu_b, you will got something like this
$('body').on('click','.menu_b',function(e){
if($(e.target).hasClass('menu_b')) {
$('.dd').fadeToggle();
}
});

Actually register a "user" key input programmatically

Background:
I am writing a Chrome extension that programmatically replaces abbreviations with snippets of text. Like, it can auto-replace "brb" with "be right back".
The way (simplified to this question) I insert this snippet expansion is like this:
var newFullText = textBeforeAbbrev + expansionText + textAfterAbbrev;
textarea.value = newFullText; // OR
div.innerHTML = newFullText;
Problem:
The problem here is that although this correctly inserts the expanded text, the website does not catch it as an update to the textarea/div contents.
Some sites internally keep a track of textarea/div contents, updating it on input events. That means, if I do this expansion and submit the form, on some sites (like Facebook, Hipchat), this newFullText won't be registered - because it wasn't a user input event - so the website didn't catch it either!. So, the submitted value would be having the text prior to this expansion.
My attempts:
I've already tried firing the keydown and input events - on the concerned textareas - in this manner with NO luck at all:
function triggerKeypress(keyCode){
var ev = new Event("input");
ev.keyCode = keyCode;
this.dispatchEvent(ev);
}
My question:
Is these a way to achieve what I am requesting? Specifically:
Simulate a user keypress/keydown/input/whatever_necessary on the textarea/div/input element, so that the website internally catches it as an input/keypress(whatever event it is supposedly looking for), and updates its internal text, so that the submitted text correctly shows up
I'm looking for a native JS solution. My app is a Chrome extension so naturally I plan to support Chrome code, although cross-browser support is appreciated.
Minimum viable code sample:
Here's the zip file of the minimum code (11KB) you need to reproduce the issue. Please run it and try changing those two methods in the code to get them work, as stated in this question. I've confirmed the linked code does STILL NOT work on Hipchat, Facebook posts and comments. More details inside file README.txt.
How to use it?
1. Open Hipchat team chat, or Facebook.
2. Type "brb" into the team chat box/Facebook post/comments.
3. Press Shift+Space.
4. The expanded text "be right back" would clearly show up inside the textarea.
5. Press enter.
6. The submitted value will show up as "brb" instead of "be right back"
This question is not a duplicate question: please note that the other questions are about:
1. firing a keydown that fires their own custom handler, and which naturally do NOT work here
2. are way too out-dated and have become convoluted over time
3. use deprecated methods like Document.createEvent
Please let me know for more clarification. Thanks!

Modifying google analytics code event tracking with javascript one event per user with multiple scripts

I am very very new to Javascript so i do apologise if its simple.
On my site I have lots of pages with lots of information on them, the info is split into sections in an accordion format.
I want to be able to track if someone engages with the expandable sections but I only need to know one click/Event per user at this moment in time.
I just need to know where i would put my code and what javascript i would need to write in order to track if someone clicks on a section then stops tracking once they have clicked.
In my head I am thinking of having script per expandable section but if someone clicks on one, how will the other sections know not to track any more.
An example is http://www.disabledgo.com/access-guide/tower-hamlets-council/tower-of-london
I hope someone is able to help.
Thanks

If you want to only track on thing you can add a Boolean value to a variable inside an if statement and test that for each event.
So in basic language
lets say you have a button.
<button id='b1'>my button<button>
if you want to only track one of the button clicks you can do something like this. Note: I used jQuery so you need to link to the api in your head tags.
var boolval = true;
$('#b1').click(function () {
if (boolval) {
//alert('worked!'); for debugging
_gaq.push(['category', 'action','lable','opt_interaction','value'])
boolval = false;
}
});
I added an if statement based on the variable boolval that I set to false after the first click. Then when you click again it checks it and comes up false and does not fire the function.
Here is a working jsfiddle http://jsfiddle.net/nicomiceli/L2Efh/
You can do this for your accordion menu. Set the event listener to your class and after the first click make something false so if they try it again it won't fire.
Let me know if you have any questions.

Bootstrap + Chosen Multiple Select Dropdown Always Open

Is there a way to have "Standard Select" and "Multiple Select" from http://alxlit.github.io/bootstrap-chosen/ to be always open instead of acting like dropdown ? Thank you.

You need to manually add the open css class to the container when after you initiate the plugin in your code:
$(".chosen-container").addClass("chosen-with-drop chosen-container-active")
also you need to edit the close function in the source code to stop the css class from being removed inside the plugin file:
line 696: this.container.removeClass("chosen-container-active");
line 793: this.container.removeClass("chosen-with-drop");
It sure does not look the cleanest or easiest solution, but it's quick, looking at the source code will give you extra insight on how it works and how you can edit it to meet your requirements