I'm trying to click on a button using protractor.
My HTML looks like this:
<button class="_btn--block _btn _btn--primary" ng-transclude="" sw-type="submit" swed-busy-click="" sw-priority="primary" type="submit">
<span>
Continue
</span>
</button>
I have tried using this but it didn't work:
element($('button[name="Continue"]')).click();
element(by.partialButtonText("Cont")).click()
element($('button[name="Continue"]')).click(); this is not a correct css since name of the button is not available COntinue is the text
You could try
element($('button[sw-type="submit"][class^="btn--block _btn"]')).click()
Related
I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I'm using the Bootstrap-wysihtml5 jquery plugin (https://github.com/jhollingworth/bootstrap-wysihtml5/) to convert textareas to WYSIWYG. I would like to be able to activate and deactivate the editor by clicking on 2 buttons, so far i can show the editor, please will you let me know how i can deactivate the editor and leave just the textarea and its value. My code is as follows:-
HTML
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<input type="button" id="button1" value="Show Editor">
<input type="button" id="button2" value="Hide Editor">
Script
$("#button1").click(function(){
$('textarea').wysihtml5();
});
$("#button2").click(function(){
// this is where i'm stuck
});
Thank you
A few lines of custom JS code. I think they can help you.
var content = $('#content');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
I had the same problem trying to disable/hide the toolbar and editor and had luck with the following commands (to disable the editor). I'm using version wysihtml5-0.3.0_rc2.js)
$('#editorId').data('wysihtml5').editor.composer.disable();
$('#editorId').data('wysihtml5').editor.composer.enable();
or (to hide the editor)
$('#editorId').data('wysihtml5').editor.composer.hide();
$('#editorId').data('wysihtml5').editor.composer.show();
To do the same to the toolbar you do the following to hide/show (can't find a wat to disable the toolbar):
$('#editorId').data('wysihtml5').editor.toolbar.hide();
$('#editorId').data('wysihtml5').editor.toolbar.show();
Good Day
I am using an ASP.NET webform where I have wrapped the following button inside the form tags:
<form runat="server">
<button class="btn btn-primary" onclick="window.location='http://google.co.za';">Login</button>
</form>
ISSUE: The problem is that when clicking on the button, it just directs to the current page...does not redirect. However, when I remove the form tags, the button works. If I leave the form tags and I use an anchor tag to relocate, it works as well...It is just the button that is giving me issues.
Why is that?
I am using Twitter bootstrap as well(extra info..)
Thank you
Add type="button" attribute to your button tag. Without it button works as submit.
I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>