I have a problem with the button, downtime, after click - javascript

<div class="col-md-3 text-right">
<button type="submit" id="ok" class="btn btn-primary btn-lg">Submit</button>
</div>
The application can be accessed by multiple users working in separate profiles, solution I need is that after clicking on a button by specific user, that same button must be blocked for the next 5 seconds. So not every user can click a button at the same time.

Related

Page keeps refreshing when I click on a Bootstrap Modal

I have a page with two buttons connected to two different bootstrap modals. They were all working fine but all of a sudden stopped. Whenever I click on either button now, the page just keeps refreshing as opposed to displaying the respective modal. I do not know what the problem is as there is no error in the console.
The site is hosted on https://storzy.netlify.app/
I have searched high and low but can't seem to find what might be stopping the modal from displaying correctly now.
Please how do I go about stopping the page from refreshing and showing the correct modal instead?
Thank you.
change the form to div for your login and signup parents
<div class="form-inline mt-3 mt-lg-0">
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal">Sign up</button>
</div>
If the button is within a form, the default behavior is submit. If the button is not within a form, it will do nothing.
Hence to avoid the page refresh, add type="button" to the buttons to prevent it.
<button class="btn btn-outline-primary" data-toggle="modal" data-target="#loginModal" type="button">login</button>
<button class="btn btn-primary ml-3" data-toggle="modal" data-target="#signupModal" type="button">Sign up</button>

Net Read Timeout error appears after click action in Selenium Ruby

I am automating my application using Selenium Ruby.The application has a 'Add Files' button to attach files. On clicking it, a system modal popup to Upload Files is displayed.However, just after that the code is stuck and i see the error "Error:#'<'Net::ReadTimeout: Net::ReadTimeout'>'" in the console.
Here is the html dom:
<div class="row fileupload-buttonbar">
<span data-test-id="button-add-files" class="btn btn-success fileinput-button mq">
<span>Add files...</span>
<input type="file" name="files[]" multiple="" data-enterkeydisabled="true">
</span>
<button data-test-id="button-delete-all-files" type="button" class="btn btn-danger delete mq">Delete All</button>
</div>
The xpath used to get the button is "//*[#data-test-id='button-add-files'].
I also tried using the Javascript functions
driver.execute_script("arguments[0].click();",xpath)
driver.execute_script("document.getElementsByClassName('btn btn-success fileinput-button mq')[0].click()")
Can someone help me on this?
Thanks

Anchor tag - open new location in the same window/tab, and pass values with POST

Related:
Make a link use POST instead of GET
Making href (anchor tag) request POST instead of GET?
How can I make it so that, when a user clicks a link, he is redirected to a new page, along with whatever was the input on the previous page? I have to work with POST requests, and I do not want to use any hidden forms (or any additional forms for that matter), as was suggested in the linked (and many other SO) answers. Is this even doable?
My current setup (which I'm not allowed to change much) is as follows:
<form role="form" id="myForm" method="post" action="stuff.php">
<div class="form-body form-body-dark">
<div class="form-actions">
<div class="row">
<!-- various inputs go here -->
<input type="text" name="userID">
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="submit" id="doStuff" class="btn btn-primary btn-lg btn-block"><i class="fa fa-check"></i> Submit</button>
</div>
<div class="col-md-6 col-xs-6">
<a href="index.php" id="cancel" class="btn btn-danger btn-lg btn-block"><i class="fa fa-refresh"></i> Cancel
</a>
</div>
</div>
</div>
</div>
</form>
Now, I need to add another way of submitting part of the same input, but to another php page. I'd like to do that with an anchor tag, and with POST request. The block of code which should that is inserted before the first button (Submit), but in the same form:
HTML
<div class="col-md-4 col-xs-4">
<a onclick="goToOtherPage()" id="details" class="btn btn-success btn-lg btn-block">
<i class="fa fa-table"></i> Details
</a>
</div>
jQuery
function goToOtherPage() {
var otherPage = "details.php";
$.post(otherPage, {
'userID': $('#userID').val()
}
}
Adding window.location.href = 'details.php' inside the function, right after passing userID, opens the new page, but without the parameters I'd like to pass.
I've thought about setting and unsetting cookies, and bypassing the whole POST/GET issue, but that's not a viable option.
Instead of cookies, you can use SessionStorage API to save some data on one page, and access that on another. Take a look at sessionStorage MDN.
Simply in your goToOtherPage callback save any data as such:
sessionStorage.setItem('formData', {});
And later on, on the next page, you can access the data saved on the previous page via:
sessionStorage.getItem('formData');

MVC #foreach and JavaScript Confusion

I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>
So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help

Google Translate font tag

When I start translating on my web page (right click -> Translate to English), and then click on submit button on my form, the text in the button is multiplied. I realised that google translate wraps text in my button in double font tags, and if I click on the button more than one time, the text will mulitply.
Here is code before translation:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
Update app details
</button>
After translatation and clicking on button 3 times:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<font><font class="">
Update app details
</font></font>
<font><font>
Update app details
</font></font>
<font><font>
Update app details
</font></font>
</button>
I am interested if there is way to intercept a function that adds font tags, or somehow to not add font tags at all?
Add the 'notranslate' class to the element you wish to block from containing the Google <font> tag:
<button type="button" class="btn btn-success-ox btn-block btn-spin">
<span class="notranslate">Update app details</span>
</button>

Categories