Hold off on clicking any buttons until you have fully loaded the page using Tampermonkey

Is there a way to automatically click on a button that appears on a web page only after another button has been clicked? I have successfully automated the first click, but I am struggling with automating the second click once the button appears.

The code below works when I manually run it in the console after the button appears:

// ==UserScript==
// @name     Soundplate SUBMIT MUSIC Button
// @include  https://play.soundplate.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var TargetLink = $("a:contains('SUBMIT MUSIC')")

if (TargetLink.length)
    window.location.href = TargetLink[0].href

I am unsure how to trigger this code automatically after the initial click. I have heard of waitForKeyElements as a possible solution, but I am not sure how to implement it in this scenario. Any guidance or advice would be greatly appreciated.

javascriptajaxautomationgreasemonkeytampermonkey

Answer №1

// ==UserScript==
// @name     Soundplate SUBMIT MUSIC Button
// @include  https://play.soundplate.com/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==

waitForKeyElements (
    ".btn-lg", click
);

function click (TargetLink) {
TargetLink = $("a:contains('SUBMIT MUSIC')")

if (TargetLink.length)
    window.location.href = TargetLink[0].href
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Why when I click the register button, it redirects me to the register_db.php page instead of sending the data to the database and keeping me on the same register.php page? I want the data to be sent to the database without changing the webpage. register.p ...

javascriptphphtmlmysqldatabase

Exploring dynamic content with AngularJS: Navigating through AJAX-driven

After researching various articles on how to crawl ajax sites, I came across a document stating that in order to make ajax sites crawlable, we need to provide an HTML snapshot of the page. As I am utilizing Ruby On Rails as my server-side language, this in ...

ruby-on-railsajaxangularjsweb-crawler

I would like to know how to create a dropdown menu that shows the country name, flag, and code based on the

I have successfully generated the telephone input field. One requirement is to display the Country flag along with the country name as soon as the dropdown is selected. Another requirement is that once the country is selected, it should display the countr ...

javascripthtmlcss

Utilizing iOS Local Storage for Efficient Form Submission Handling

I feel like my brain is on the verge of exploding. I just can't seem to get this to work as intended, and I'm struggling to pinpoint the issue. Currently, I have a form that needs to be processed using AJAX. Before proceeding with that, I want ...

javascriptjqueryiosajaxforms

Would the Client fail to recognize the Server's response if it is in text/html format?

I attempted to remove a JWT token using the localStorage.removeItem() function, but encountered an issue when running the following code. I am developing with JavaScript and Express.js in Visual Studio Code, and using the Chrome browser. [Client] secess ...

javascriptnode.jsexpress

Entry Points for Logging In

After stumbling upon this pre-styled Material UI login page example, I decided that it was exactly what I needed. However, I ran into an issue when trying to figure out how to store the username and password values. Whenever I try to use 'State' ...

javascripthtmlreactjsauthenticationmaterial-ui

A guide on extracting and converting strings in React to display as HTML

I am in the process of developing a simple blog app using a MERN stack. Currently, I have the functionality to create posts with just plain text. Is there a way to incorporate HTML rendering within the content of these posts? For example, a post might con ...

javascriptreactjs

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

Iterate through a nested array in JavaScript and extract specific properties by comparing them to another array

Within my code, there is a kids object structured as follows: const kids = { name: 'john', extra: { city: 'London', hobbies: [ { id: 'football', team: &apos ...

javascriptarraysjsonecmascript-6mapreduce

Blend multiple images using Angular

Is there a way to combine multiple images in Angular? I came across some HTML5 code that seemed like it could do the trick, but unfortunately, I couldn't make it work. <canvas id="canvas"></canvas> <script type="text/javascript"> ...

javascriptangulartypescripthtml5-canvas

Using JSON in an AJAX request to log in

Currently, I am in the process of developing a straightforward login form that utilizes AJAX for server communication and PHP as the server-side script. However, I have encountered some challenges while trying to send login data to the server via JSON. Th ...

phpjqueryajaxjsonpost

Restarting an Angular app is necessary once its HTML has been updated

I've encountered an interesting challenge with an application that combines MVC and Angular2 in a not-so-great way. Basically, on the Index page, there's a partial view loading the Angular app while also including all the necessary JavaScript li ...

javascriptajaxasp.net-mvcangular

The proxy is unable to access the method within the subclass

Issues are arising as I attempt to utilize a Proxy. The structure of my class is as follows: export class Builder { public doSomething(...args: (string | number | Raw | Object)[]): this { // Do stuff return this } } export class M ...

javascripttypescriptecmascript-6es6-proxy

In my Vue watch method, I have two parameters specified, and one of them remains constant without any changes

Currently, I am attempting to access a method within my watch function with two parameters. Here is the code snippet for the method: onBoolianChange(value, willChange) { willChange = (value === false) ? true : false; }, watch: { "e ...

javascriptvue.js

The insertion of the script string from the ajax response was unsuccessful

When working with PHP, I encountered an array with two parts: array('threeRowHtml'=> '<HTML output string>', 'jsCode'=> '<script output string>' ) I decided to return this array for my ajax call. ...

phphtmlajaxresponsestring

Sending lambda expression to controller via ajax request

I'm curious if it's achievable to send a lambda expression from the view to the controller. For instance, imagine I have a model: public class CustomExpressionModel<T> { public Expression<Func<T, string>> Expression { get; ...

jqueryasp.netajaxjsonlambda

Trouble with Bootstrap table rendering in React code on Jsfiddle

I'm having an issue with displaying Bootstrap tables correctly in my React app on Jsfiddle. I made sure to use className instead of class in JSX, but the tables still aren't showing up properly. Can anyone please review my code and suggest what m ...

javascripttwitter-bootstrapreactjs

Looking to change the date format from 24/05/2021 to 24/May/2021 using jQuery or JavaScript?

My client prefers not to use a date picker, but wants to be able to type dates directly into a textbox and have them automatically converted to the format 24/May/2021 as they leave the field. I am looking for a solution using either Javascript or jQuery. ...

javascriptjquery

Mongoose: The aggregate method does not filter properly when using Model.field_1.field_2

Explaining a custom function: const getNotificationsForLounge = async (lounge_id) => { try { const notifications = await Notification.aggregate([ { $match: { "lounge_join_request.lounge": lounge_id, loun ...

javascriptmongodbmongooseaggregation-frameworkmern

I am looking to showcase the data retrieved from an API by arranging it into columns with automatic data filling in a project using React.js and MySQL

When using the onKeyUp event to trigger an API call without submitting the form, I successfully fetched data in response if the mobile number matched. However, I am struggling to understand how to display this data as a default value in columns. I have tri ...

javascriptmysqlnode.jsreactjsautofill