Using Javascript how to disable a link after clicking it once.
The scenario is that:
I have a left navigation pane, having links to distinct JSP's which get displayed in .What I want to accomplish is that after I click a link it should open in the center and the hyperlink should be disabled in the left pane.
I am able to navigate through the left navigation pane. But not able to disable the link of the page which shows up in center.
Any help would be greatly appreciated.
create an hidden span next to the link.
your link
<span style="display:none">your alter link text</span>
then on the script do
$("#myLink").click(function(){ $(this).hide().next().show(); });
You need to declare a hidden element and give it a flag value that keeps if the link is disabled or not. Now whenever you click on the link the hidden element will be read by the server and in the second load you can disable your link according to the value of the flag with a simple check in the jsp.
Something like the following should work:
<a onclick="
var el = this;
setTimeout(function(){el.onclick=function(){return false;}},1);
" ... >link</a>
You can do that way:
jQuery(document).ready( function() {
jQuery("a#yourLinkId").click( function(event) {
jQuery(this).attr('disabled', '');
// You can optionally prevent default processing and implements your own:
event.preventDefault();
});
});
$("#click").click(function(e){
...
e.preventDefault();
$(this).unbind('click');
});
Related
I'm trying to click a checkbox but it's keep clicking the link 'terms and conditions'. Although my xpath (mentioned below) work on a minimized window but it's failing to click the checkbox when the window is maximized because the href (image) appears in the second line next to checkbox. Looking for some suggestions on clicking the checkbox widget on maximized window. I need to get a focus on it.
Interestingly, when i hover over the ::before (css selector) only than the widget gets highlighted.
<div class="checkbox u-mar-bot-5">
<div class="checkbox__container">
<input class="checkbox__input" type="checkbox" id="basket-contact-terms" required data-parsley-multiple="basket-contact-terms" style>
<label class="checkbox__label checkbox__label--has-link checkbox__label--small" for="basket-contact-terms" style>
::before
"I have read and agree to " <a class="text-link text-link--base text-link- small" href="/terms-conditions" target="_blank">Terms and Conditions</a>
</label>
</div>
</div>
image: Terms and Conditions
I tried a few options that keep failing to check the box and instead the link 'terms and conditions' gets the click. I must be missing something basic.
driver.findElement(By.xpath("//label[#for='basket-contact-terms']")).click();
driver.findElement(By.xpath("//label[contains(#class,'checkbox__label checkbox__label--has-link checkbox__label--small')]")).click();
I did looked around and found someone suggested to use this (below) so i tried but didn't work:
WebElement elem = driver.findElement(By.xpath("//div[contains(#class,'checkbox u-mar-bot-5')]"));
Actions action = new Actions(driver);
action.moveToElement(elem).click().build().perform();
Any suggestion would be appreciated.
Since you tried the ID of the INPUT and it threw an error that it wasn't visible, I would first try a wait to see if it will become visible. (I'm assuming it won't but it's worth a try first).
new WebDriverWait(driver, 10).until(ExpectedConditions.elementToBeClickable(By.id("basket-contact-terms"))).click();
If that doesn't work, I would next try to click a different position on the element. By default, Selenium clicks on the center of the element. In your case, I think this is what's causing the issue. You can use Actions to click the upper left (1,1) of the element.
WebElement label = driver.findElement(By.xpath("//label[#for='basket-contact-terms']"));
new Actions(driver).moveToElement(label, 1, 1).click().perform();
You can try with
WebElement elem = driver.findElement(By.id("basket-contact-terms"))
enter image description hereI am using bootstrap modal plugin for an inquiry form and am using "ng-submit" directive to save the details of the form, but when i click on the submit button the form gets submitted but the modal window does not gets closed. How can i close the modal when details have been submitted.
Please find the image for modal reference.
Thanks for help in advance
For a quick hack around, in your callBackUser() method in controller add the below piece of code,
$('#exampleModal').modal('hide');
Again not advisable to mix jQuery and Angular.
EDIT As per your comments, clear all your form data like this,
$scope.callback.firstName = "";
$scope.callback.useremail= ""
And so on.. for all the fields!
I'm using Selenium web driver 3.0 and want to click to OK button from active dialog from opened two dialogs (one is in background and second is in foreground). How can I click to foreground dialog OK button from parent div from below html? I tried using nth-child and nth-of-type but click always finds first dialog showing in background and web driver fails to click to OK button.
When I check we.isDisplayed() then it finds first OK button too, I want method for we.isDisplayed() for 2nd dialog OK button.
Html
<div id="z_shell" class="DwtShell">
<div id="Dialog1" class="DwtDialog">
<td id="ErrorDialog_button1_title" class="ZWidgetTitle">OK</td>
<td id="ErrorDialog_button2_title" class="ZWidgetTitle">Cancel</td>
</div>
<div id="Dialog2" class="DwtDialog">
<td id="ErrorDialog_button2_title" class="ZWidgetTitle">OK</td>
</div>
</div>
Note: Dialog div id can be anything, but class name is fixed: DwtDialog.
Tried code:
WebDriver webDriver;
WebElement we = webDriver.findElement(By.cssSelector("div[class='DwtDialog']:nth-child(2) td[id$='_button2_title']:contains('OK')"));
visible = we.click();
// Click fails here
Tried locators:
By.cssSelector("div[class='DwtDialog']:nth-child(2) td[id$='_button2_title']:contains('OK')")
By.xpath("//div[#class='DwtDialog'][2]//td[#id='ErrorDialog_button2_title' and contains(text(), 'OK')]")
By.xpath("//div[#id='z_shell']//div[#class='DwtDialog'][2]//td[#id='ErrorDialog_button2_title' and contains(text(), 'OK')]")
Problem
How can I click to OK button of dialog which is visible? Mostly this dialog is loaded later. I meant nth-child(2) and for 3rd dialog nth-child(3) as a hint.
EDIT:
I missed the comment about the id's changing... try #2. I think something like this should work but I can't test it without the page. Basically we grab all the buttons td.ZWidgetTitle on dialogs div.DwtDialog. If it is visible and contains "OK", click it.
List<WebElement> dialogButtons = driver.findElements(By.cssSelector("div.DwtDialog > td.ZWidgetTitle"));
for (WebElement dialogButton : dialogButtons)
{
if (dialogButton.isDisplayed() && dialogButton.getText().equals("OK"))
{
dialogButton.click();
break;
}
}
EDIT 2:
After getting more info, here's another approach. It's hard to figure out if this stuff will work without access to the site but this will hopefully point you in the right direction if it doesn't work. This will get all the OK buttons on error dialogs. The problem is, which one is clickable? We can eat the exception that is thrown when another element would receive the click until we find one that doesn't throw... that's the right one. I did some local testing and this code seems to work for me.
List<WebElement> dialogButtons = driver.findElements(By.xpath("//td[starts-with(#id, 'ErrorDialog_button') and text()='OK']"));
System.out.println(dialogButtons.size());
System.out.println(dialogButtons.size());
for (WebElement dialogButton : dialogButtons)
{
try
{
dialogButton.click();
}
catch (WebDriverException e)
{
// do nothing
}
}
We want to give option to author to create multi steps tabs or wizard. This number of steps/tabs should be configurable in Form Start component in Edit button. Once author selects the number of steps/tabs then steps/tabs will be created automatically and then author can drag and drop other components like "File Upload", etc.. Please refer to the attached screenshot.
Kindly let me know how to proceed on this.
You can try to leverage the OOTB tabctrl component provided in geometrixx-outdoors along with the OOTB form component. The only customization needed would be changing the form end component to accomodate prev and next buttons, and then adding a bit of javascript to navigate the tabs on click of those buttons.
Steps to create this.
Drag and drop the default form component on page.
Inside the form drag and drop the tab control component.
Configure the number of tabs required and the contents within each tab in the tab control component.
Modify the form end component to accomodate the previous and next buttons.
Attach handlers for the previous and next buttons using the following JS(currently consists only of the basic functionality. Can be modified according to your requirements).
JS:
jQuery(function ($) {
$(document).on('click', '.prev', function(){ // 'prev' is class of previous button
var tabctrl = $(this).closest('form').find('.tabctrl');
var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
$(currentItemHeader).prev().find('a').click();
});
$(document).on('click', '.next', function(){ // 'next' is class of next button
var tabctrl = $(this).closest('form').find('.tabctrl');
var currentItemHeader = $(tabctrl).find(".tabctrl-header li.active");
$(currentItemHeader).next().find('a').click();
});
});
NOTE: Try to include the appropriate clientlibs in geometrixx site before testing this, else tabctrl wouldn't work properly. Or else, you can check this dierctly in geometrixx-outdoors site.
Below is my sample code. i want to load loading.jsp. The div default is not slide down.
When the <%=msg%> is not empty. then the div wll slide down.
Flow: loading.jsp -> servlet (detect error) -> loading.jsp (div slide down)
$("#errorLoading").load(function() {
if(<%=msg%> != ""){
$('#errorLoading').slideDown('slow');
}
});
<div class="alert alert-error" id="errorLoading" name="errorLoading">
<%=msg%>
</div>
Can anybody help me about this.
You can use this to slide down/up div tags
See you have to use $.trim function of jquery to check if div is filled with the message you are printing in that. then check that in a condition and just slide your desired div.
Note: div has to be hidden first.
fiddle you can find :
http://jsfiddle.net/wZ6Br/
you can check with putting some dummy text there.
var divErr = $.trim($('.alert-error').text());
if (divErr) {
$('#errorLoading').slideDown('slow');
}