I am trying to simulate a button click in Python on a website, when that button is clicked it adds some stuff to the end of the URL and returns false. If I add the stuff to the end of the URL it takes me to the right place but doesn't register that the button was click which is why I think I need to use the return false part.
Here is the exact code for the button and the button area. I don't know if this is actually doing anything or just setting up the button and waiting for the javascript to actually do the execution.
<div class="contractLink"><button type="button" value="upgrade to level 3"id="button533e24e4d7c79" class="green build" onclick="window.location.href = 'dorf1.php?a=16&c=fb5ad7'; return false;">
<div class="button-container addHoverClick">
<div class="button-background">
<div class="buttonStart">
<div class="buttonEnd">
<div class="buttonMiddle"></div>
</div>
</div>
</div>
<div class="button-content">upgrade to level 3</div>
</div>
</button>
This is where the script is that gets run when the button is clicked. I basically want to simulate the button being clicked through a python script which should go to a different URL and say "it's upgraded" (not literally say "it's upgraded" but make the website think it is and start the upgrading process)
<script type="text/javascript">
window.addEvent('domready', function()
{
if($('button533e24e4d7c79'))
{
$('button533e24e4d7c79').addEvent('click', function ()
{
window.fireEvent('buttonClicked', [this, {"type":"button","value":"upgrade to level 3","name":"","id":"button533e24e4d7c79","class":"green build","title":"","confirm":"","onclick":"window.location.href = \u0027dorf1.php?a=16\u0026amp;c=fb5ad7\u0027; return false;"}]);
});
}
});
</script>
Any help would be great, thanks for your time.
This is an alternative to using Python; this might be useful to those wishing to have a button click simulation without having normal subsequent action take place at the testers discretion.
Assuming that the id of the button to be simulated is "button533e24e4d7c79", the jQuery library has the trigger method to trigger the click (or any supported event for that matter) of this button:
$("#button533e24e4d7c79").trigger("click"); // This will mimic the clicking of the button (programmatically) -- requires Jquery
My understanding is that the trigger method will invoke the "click" event and stop at the event handler (i.e., won't follow links, won't continue with form submission, etc.). I haven't fully tested, but that's my understanding.
If it's desired to fully simulate the button click, jquery.simulate.js library (https://github.com/eduardolundgren/jquery-simulate/blob/master/jquery.simulate.js) provides the simulate method to allow following of links, etc.
The jQuery learning page at http://learn.jquery.com/events/triggering-event-handlers/ provides the proper explanation.
Related
I'm working on automating a task (filling a form and submitting data then getting the result message where the data is being read from a txt file line by line).
While running my JS code via the console, everything works fine until before the clicking on submit button. after the click on the submit button, I can see the HTML is being reloaded with new data and the URL is changed from www.example.com to www.example.com/requests/12345 and then the next step after the click is not respected.
I thought may be because I was using:
document.getElementByID("btn-submit").click();
and changed it to
$("#btn-submit").click().trigger('change');
But still same issue.
I tried to use sleep functions and setTimeout to wait for the new HTML to load but this didn't help at all :(
The task is simple steps until button click all works perfect, I'm stuck only at after the submit button as I want to get the results that shows on the page after clicking the submit button.
Any ideas please what is being done wrong from my side?
The Elements I'm trying to get are in a div that is empty before the submit button is being clicked like this
<div id="message-bar">
</div>
After the submit button is clicked it is filled like the below (also the URL is changed to something link www.example.com/requests/12345 - of course the result elements won't show if the button is not clicked:
<div id="message-bar">
<div id="alert-success" class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<div class="text alert-text">Request approved!</div>
<ul id="bullet-items"><li>Thank you</li></ul>
</div>
</div>
I tried to check if the element is not empty, then get the elements innerText, but seems like my code is being removed when the page URL changes after the submit button:
if (document.getElementById("message-bar").innerText != "") {
// do something
}
Thank you so much
Try
$("#btn-submit").click(function(event){
event.preventDefault();
})
Or without jQuery
var btn = document.getElementById('btn-submit');
btn.addEventListener('click',function(event){
event.preventDefault();
})
Try using the .preventDefault() event
https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault).
From what I understand you need the content not after the click, but after what the click is triggering. Here’s the same Q, answered. Basically you wait for the mods to happen then “read” the element content.
to fix my issue, I thought of using window.open("URL") by creating a variable for it and then using it to process my the whole automation process on the new window and I was able to get all the result message from the new window
var newWindow = window.open("the URL");
newWindow.$('input[id="input"]').val("1234").trigger('change');
etc...
I have a very simple html page which has a file upload button as well as a modal popup to show loading status and a cancel button. My problem is that the cancel button seems to be blocked while it's processing the file (making it useless). How can I have a button which will cancel the form submission.
HTML:
<body>
<div id="myModal" class="modal">
<div class="modal-content">
<p>Processing File.</p>
<div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div>
<div id="progressbar" ></div>
<input type = "button" name="cancel" value = "cancel" onclick = "cancelRead()" />
</div>
</div>
<div>
<input type="file" id="logSelector" name="log" title="Select a log file" onchange="logSelected();"/>
JS:
function cancelRead() {
console.log("cancelRead"); //never see this message even though the button is clicked
fileReader.abort();
operationAborted = true;
document.execCommand('Stop');
}
The logSelected() method is quite lengthy and I omitted it from the above code mostly to eliminate clutter. That method uses FileReader to read the selected file than create a table from the data. However I do signal to this method to stop via the operationAborted variable. however like i said in the comments, this method is never called by clicking my button. The cancel button doesnt even animate like it was clicked.
The promise api was mentioned below, here is my attempt at it. Although it works it did not fix the issue of the cancel button not clickable due to the main/only thread being used.
var promise = $.Deferred(function (dfd) {
FILE_READER.onload = function (event) {
var contents = event.target.result;
dfd.resolve(contents);
};
FILE_READER.readAsText(file);
}).promise();
$.when(promise).then(function (contents) {
processFile(contents.split('\n'));
});
And it's almost sure that it will never work, due to how event loop works in javascript browsers.
This could be because the file reader is using up all of the thread leaving to time to process the function to be called - you see, JavaScript only has one thread & thus can only handle one thing at a time, & this one thing is the file reader!
edit
However you could use a promise (as explained here) to run the file reader asynchronously & cancel the promise.I don;t have much experience with using promises so I can't give much advice, but it is worth a look.
You page remain blocked until this thead (uploading the file) its done. Since its a blocking function, your user won't be able to do anything until this task end.
Your alternative is to use non-block io
I have a site that uses AJAX to dynamically load content into a div.
The links to do so are anchors with href="#" and an onclick event to trigger the AJAX.
This leaves me without a history when I click back, so if I load one page, then another and click back, it does nothing.
A basic version of the code is this:
<script type="text/javascript">
function loadXMLDoc(url)
{
<!-- Load XML Script here. -->
}
</script>
</head>
<body>
<div id="myDiv">
<!-- Target div. -->
</div>
Click Me.
Click Me.
Click Me.
</body>
What I would like to know is, can I give each link a different "#" and then use a popstate handler to call the appropriate event, so if I click link 1, 2 and then 3 and then start hitting the back button, it'll go back to 2 and then 1 etc..
I was going to use history.js and start using pushstate in the loadXML script but I think the whole manipulating history thing is a bit dirty and unreliable.
Am I thinking on the right lines or is there a better way?
Currently all my links just use "#" so that it pops back to the top of the page when loading more content but I'd like to be able to go back if possible.
Any help would be great.
Browser saves hashtags to history properly. Just add hashtag #1 to this question page, hit enter, change it to #2, hit enter, change it to #3, hit enter. Now click back button, and you'll see hash changes from #3 to #2. I recommend to change only hash itself on link click and react on page hash change and page load events.
function react() {
var hash = window.location.hash.replace("#", "");
loadXMLDoc(hash + ".txt");
};
document.body.onload = function() {
react();
window.onhashchange = react;
};
Click me
Click me
Click me
Please note that onhashchange event does not supported by old IE. The only way to deal with it if you want is to define timer with setInterval and check hashes equality.
Try to use combination of LocalStorage and HistoryAPI.
When you load XMLDoc store it in LocatStorage, when back is pressed - load data from storage, not from web.
A bit code above.
/* Handling history.back added */
window.onpopstate = function(event) {
yourHandleBackFunction(event.state);
};
function yourHandleBackFunction(renderTs) {
/*Check TS and load from localStorage if needed*/
};
Firefox4 has a new feature → 【Prevent this page from creating additional dialogs】
But it was also a trouble with me when I hope an alert dialog opened more than once.
Now, A new problem has appeared ...like below ↓
1) I call the alert dialog more than once , and check the
【Prevent this page from creating additional dialogs】
2) I click a download button , My web application is down....
(my button' event is below.... and because it hasn't into the action , so I'm just write the client source....)
My Button Event
getDownloadFile:function(){
$('xform').submit();
}
My Page Code
<div style="display:none;">
<form id="xform" action="down.do" method="post" target="xfra">
</form>
</div>
<iframe id="xfra" name="xfra" src="/?scid=dummy.htm" style="width:0px;height:0px;visibility:hidden;"></iframe>
Hope anybody can help me ...thanks...
I am guessing the $ on your code means you are using jQuery (you should mention it in the tags if this is the case).
If you are not using jQuery, then I don't know much of the other frameworks' selectors. However, if it is jQuery, your selector is not correct, it should be:
$('#xform').submit();
not
$('xform').submit();
Since you are using PrototypeJS, the above is incorrect.
Here's a simple fix:
function myAlertMsg() {
alert("Whatever message you want");
location.reload(); /*This prevents the browsers pop-up disabler*/
}
Suppose you have a lightbox, and you want to allow the user to middle-click, which would open a new tab, and the same content that shows-up in the lightbox on left-click is now on a standlone page (complete with header, sidebar, etc).
Anybody have a snippet or technique handy they can share?
Otherwise the technique I was going to try first was just to add a conventional href to the link, then add a click handler that cancels the default action on left click. I think this'll work but I'm not sure so honestly it was easier to pound out a question than to write it up and test it in the 14 browser/os combinations I have to support.
I finally found time to work this out and it was pretty easy:
This is how I made it work using jQuery & FancyBox:
Give your desired link a 'has-overlay' class and give it a custom attribute that will tell it what it should load in the overlay
Login
Be sure you have the overlay code available (this is standard FancyBox stuff)
<div class="hidden" id="loginform"> <!-- Form Goes Here --> </div>
And put this snippet in your on ready event:
$('.has-overlay').bind('click', function(e) {
var overlay = $(this).attr('overlay');
$('').fancybox().trigger('click');
return false;
})
When a user left-clicks, this 'click' handler will be called. It will load the overlay and then return 'false' so the browser won't follow the href in the link.
When a user middle-clicks or right-clicks, the click handler doesn't fire, and it works as a normal link would.