document.getElementById('hello').click();
The above code works when inserted into the google chrome console - It displays the dropdown of 'hello' - What I'm trying to do is open up a dropdown when I click a whole table row, using the following code
<tr onclick="document.getElementById('hello').click();">
Here is the dropdown I'm trying to activate
<a href="#" id="hello" data-toggle="dropdown" class="btn dropdown-toggle"><i class="icon-cog">
Infact I do see the button being clicked when I click the row, but the dropdown does not toggle. Whats the best way to toggle the dropdown (The dropdown works if I simply click it, I'm trying to toggle it using javascript)
Thanks!
Try like:
<tr onclick='$("#hello").trigger("click");'></tr>
I am not sure about scenario, but this is what I came up with. Please note that I have changed tr to p for the demo. Change it back to suit your needs.
var helloID = document.getElementById("hello");
function initDropdown() {
helloID.click();
}
helloID.addEventListener("click", function(evt) {
alert ("Click triggered on ID : " + evt.target.id);
});
<p onclick="initDropdown();">Click Me</p>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<tr onclick="$('#hello').click();">
Related
I would like to know if it would be possible to select the menu item from one created almost entirely with javascrip with selenium. As html tags for this table are only available in view source
<table id = "table_id"> <tr> <td> <script> *** </script> </td> </tr> </table>
and instead of asterisks there is a javascript that dynamically creates this menu with
with (milonic = new menuname ('menu_name'))
and aI () strings. When you click on a menu item, a submenu opens. My question - how can i for example select item no.2 from the menu and then item no.3 from the submenu? Such a construction as
driver.find_element_by_id ('table_id').click ()
does not help, only the menu item in the middle is selected, but not clicked.
Ok i got solution, i used F12 in FF and found all the links i needed. The instability can be solved with this code:
wait = WebDriverWait (driver, 10)
wait.until (EC.element_to_be_clickable ((By.ID, "id"))). click ()
I've made a stackblitz example here to show the issue:
https://stackblitz.com/edit/primeng-toolbar-demo-u21zmt?file=src%2Fapp%2Fapp.component.html
When clicking the remove button the popup menu shows in the wrong place.
I don't want to have to write custom CSS to position the menu every time I want to use it.
What am I doing wrong?
Switch the order in your html so
<p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
(click)="removeMenu.toggle($event)"></p-button>
<p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
becomes
<p-menu #removeMenu [model]="removeMenuItems" [popup]="true" appendTo="removeBtn"></p-menu>
<p-button class="p-mr-2" #removeBtn type="button" icon="pi pi-chevron-down" label="Remove"
(click)="removeMenu.toggle($event)"></p-button>
This will make the menu appear under "remove"
I have table structure has created in
https://jsfiddle.net/u8sdko1a/1/
in Button Click i want to set value in table input fields.
Js Code:
$('#regform tr#cny-1131').each(function() {
$(this).find("input.dedicate").val(name);
$(this).find("input.chinese_name").val(chinese_name);
});
This code is working in Firefox but not in IE and Chrom.
Please anyone help to resolve this issue
There are plenty of errors in your jsfiddle. First you have not included the JQuery to load on the page load. Then you have used the id selector regform-0 and regform which is id for <td> and from that you have used $('#regform-0 tr#cny-cny-1130') which will look for a <tr> that is the child of element with id #regform-0. Since the element with id regform-0 is itself a <td> how can it find a <tr> as a child. Another mistake was in the class name for dedicated, it's dedicate. Overall the working code is like this
$(document).ready(function () {
$(".cny_order").on("click", function(e) {
$('#chinese tr.cny_item').find("input.dedicate").val("Tesst");
$('#chinese tr.cny_item').find("input.chinese_name").val("erer");
});
});
For your workaround here is the link to JSFIDDLE
I have a simple html menu, when a menu item is clicked a class of `mg_cats_selected" is added to the anchor tag (which is the menu item).
I would like to copy the text value of the active/selected anchor tag and display it in another div on the page, but I would like to only display it once. When a new item link is clicked, I want to remove the old value from the separate div that I've created it and display the new value of the new selected menu item.
I hope that makes sense.
This is the HTML menu
<div id="mgf_165" class="mg_filter mg_new_filters">
<a rel="163" id="163" class="mgf_id_163 mgf mg_cats_selected left_menu" href="javascript:void(0)">Bathrooms Sinks</a>
<a id="164" rel="164" class="mgf_id_164 mgf left_menu" href="javascript:void(0)">Bowed</a>
</div>
This is the jQuery and the div where I wanna display the text values.
<script type="text/javascript">
jQuery(document).ready(function(){
console.log('test');
jQuery("a.left_menu").click(function(){
var txt = jQuery("a.left_menu").text();
//$(this).attr('rel');
jQuery("#category").append(txt);
});
});
</script>
<div id="category">
</div>
At the moment when I click on, say, "Bowed", this displays in the div
Bathrooms SinksBowed
And if I click again on "Bathroom Sinks", the same thing repeats
Bathrooms SinksBowedBathrooms SinksBowed
How can I deal with that? And did I follow the correct logic here?
You are currently getting the text of all the menu items and then appending it to the div.
You need to get the text of the clicked menu item, and then set the content of the div to the text value of that menu item.
jQuery(this) // the clicked menu item
jQuery('#category').text('VALUE') // set the text content of the tag to VALUE
Working solution on JSFiddle..
See Inside the Event Handling Function to learn more about jQuery event handling.
I have three buttons which are automatically generated with a jQuery plugin.
<button class="execute">Invoice1</button>
<button class="execute">Invoice2</button>
<button class="execute">Invoice3</button>
I want to write jQuery (JS) code to update form textbook only click Invoice2 button.
So, I want to write jQuery to identify it using text on button. I can write jQuery to update text box, but I don't know how to separately click Invoice2 button from others. I can't add another class or id because the buttons are generated automatically.
Try to use :contains like,
$('button:contains("Invoice2")').on('click',function(){
alert('Invoice 2 clicked');
});
This demo can help you more.
You can use below code:
$('.execute').click(function(){
if($(this).html() == 'Invoice2') {
//Do your stuff
}
});
Use :Contain function in the jquery and check weather the text contains Invoice2 or not if yes than execute the code. Here is the sample of the code
<script>
$(document).ready(function(){
$('button:contains("Invoice2")').on('click',function(){
alert("Invocie2 input was clicked");
});
});
</script>