I've been using this notification magic
<div x-init="$notification({text: 'my message', variant: 'error'})"></div>
It is working when you load the page. My goal is to trigger it by calling via javascript function.
I'm looking for ideas on how to implement that. Thanks a lot.
Use default events or custom events. Code is untested but something like this will work.
<button x-on:click="$notification({text: 'clicked', variant: 'info'})">
Click me
</button>
<button x-on:click="$dispatch('add-error', {message: 'Something went wrong'})">
Click me
</button>
<div x-on:add-error.window="$notification({text: $event.detail.message, variant: 'error'})"></div>
Related
Below is my HTML
<div id="slectrole" class="collapse in" role="tabpanel" aria-labelledby="selectrole">
<div class="panel-body">
<div class="dropdown">
<input class="search-control jsSayt jsRolesFreeText" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Eg: Delivery, BPO, Driver'" placeholder="Eg: Delivery, BPO, Driver" value="" aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" type="text">
<ul class="jsSaytList jsRolesFilter">
<li id="jsFilter_subRole_1" class="checkbox-inline jsFilterSubRole jsRoleValue_1" data-value="Accountant">
<input id="Accountant" class="radio-custom jsFilterRadio jsRole" value="Accountant" name="Role" data-roleid="1" type="radio">
<label class="radio-custom-label" for="Accountant">Accountant</label>
Below is the code I am using to click the radio button:
wait.until(EC.visibility_of_element_located((By.XPATH, "//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']")))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/label[#for='Accountant']").click()
The code runs ok but it does not select the radio button.
OK, so I can understand your frustration, I tried your code and wasn't able to .click() (select) the element when located via xpath. See bellow print-screen:
As you can see, it was only clicking the radio-button when issuing a .click() via a CSS-located element.
Question No.1: Are you bound to the xpath locator strategy in one way or another?
If NOT, then just use a regulat CSS selector: 'input[id="Accountant"]'.
Else, you have to figure out what is wrong with the website you are testing, or switch to another WebElement locator strategy. (e.g.: ID, Class, CSS, LinkText, etc.)
If you would opt to go with the CSS locator-strategy, then your code would look like this:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("input[id='Accountant']").click()
Alternatively, you can try to click on the <label> tag attached to the radio-button, which in my console works the same way:
wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "label[for='Accountant']")))
driver.find_element_by_css("label[for='Accountant']").click()
Explanation: In a real-life scenario, you can select the radio-button both via the actual radio-button, or via its label. That's why your solution worked.
Question No.2: Why are you using such a long xpath selector?
In order to have a optimal selector, you should ALWAYS go with the shortest, combination of tags/attributes that will UNIQUELY identify your target element. Else you will be susceptible to website changes, flaky test cases, etc.
You can perform the click on the drop down and then wait for the radio button to appear, before clicking it. Hence, try following:
driver.find_element_by_xpath("//div[#id='slectrole']/div/div[#class='dropdown']/input[1]")).click()
wait = WebDriverWait(driver, 10)
wait.until(EC.visibility_of_element_located((By.XPATH, '//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]')))
driver.find_element_by_xpath("//div[#id='slectrole']/descendant::li[#data-value='Accountant']/input[1]").click()
Let me know, if above code works for you.
I am very new to cs cart. I have read their documentation about calling Ajax with form micrformats. I am able to create a Ajax request. But I would like to call a controller inside my add-on controllers/frondend/ directory names as mycheckout.php. I am using the a hidden file dispatch with the valu mycheckout.mymode. Can any one help me. I actually want to perform some action in my controller. But their documentation did not help me. Thanks in advance.
You can do something like this (use extra "cm-ajax-force" or "cm-ajax-full-render" classes if needed):
<form class="cm-ajax" name="your_name" action="{""|fn_url}" method="post">
<input type="hidden" name="result_ids" value="div_id_to_be_updated" />
{include file="buttons/go.tpl" but_name="mycheckout.mymode" alt=__("Ajax button")}
</form>
Or you can use any button you want (even <input type="submit" name="mychechkout.mymode" value="Ajax!">)
Note that the Ajax request can be also done via simple link:
<a class="cm-ajax cm-post" href="{"mycheckout.mymode?param1=value1¶m2=value2"|fn_url}" data-ca-target-id="div_id_to_be_updated">Ajax!</a>
I use the modal of Twitter's Bootstrap.
You can close the modal, by clicking on a button or something different with the tag data-dismiss="modal".
I would like to process my form in the modal with AJAX (by clicking on a submit button) and then close the modal.
So how do close this modal in AJAX?
Or is that not possible?
(sorry for my bad English...)
If you read further down the documentation:
$('#myModal').modal('hide')
Just get the ID of the modal, and replace myModal with it. Then place it in the AJAX success handler and there you have it.
You can use this script to close the modal
<button type="button" id="close_btn" class="close" data-dismiss="modal" aria-hidden="true">
<i class = "icons-office-52"></i>
</button>
$("#close_btn").trigger("click");
or
$('#my_model').modal('hide');
After a lot of trial and error and comparing the HTML before and after I have arrived at the following which works:
$('body').removeAttr("style");
$("#myModal").removeAttr("style");
$(".modal-backdrop").remove();
You'll have to forgive me for asking a somewhat trivial question here, but I'm generally curious if there's a better way of detecting if a button has been pressed. I'm guessing this would apply to anchor tags also.
Presently I have two submit buttons (so I cannot use $(form).submit in this case), both of which will change another field when they are activated:
<button id="accept" type="submit">Accept</button>
<button id="decline" type="submit">Decline</button>
To achieve this I have detected a click event, and the Enter keypress event separately:
$('#accept').click(function(){ $('#decision').val('Agree'); })
$("#accept").keyup(function(event){
if(event.keyCode == 13){
$('#decision').val('Agree');
}
});
I guess more than anything I'm wondering if there is a way to simplify this code, as it's rather cumbersome, especially if there's a lot of processing (you could create a function, but that's yet another step) and since jQuery seems to have most things covered, I'm surprised after trawling the internet I can't find a cleaner solution.
(with the above I was worried about other ways to mimic the button press, such as hitting space, although that seems to be covered!)
Thanks!
For a button element, both the spacebar and the enter key being presses on a button will generate a click event according W3C event specifications. You should not have to do any special processing to handle that.
As for using $(form).submit(), you can. Just change your buttons to not implicitly submit the form by chaning them to push buttons (W3C):
<button type="button" id="...">...</button>
Then in your handler you can do:
$('#accept,#decline').click(function(event){
$('#decision').val($(event.target).text());
$(form).submit();
}
If you need to you can do some processing on $(event.target).text() to make 'Decline' null/emptystring if necessary.
you can do something like this to make the click a little better: (using a function is necessary here to get something better):
function setDecision(value){
$('#decision').val(value);
}
$('button[type=submit]').click(function() {
var val = $(this).text();
setDecision(val);
});
$("button[type=submit]").keyup(function(event){
var val = $(this).text();
if(event.keyCode == 13){
setDecision(val);
}
});
I think I understand your question, and there may be some precedence to be found in this related topic.
jQuery: how to get which button was clicked upon form submission?
This method avoids adding the .click() event to each button, though that may be a viable option for your application.
Hope this helps!
Mason
Add name="decision" and value="Accept" / value="Decline" (accordingly) to the submit buttons
This way you do not need javascript to handle this at all...
And if the 'Accept' button is the first, then pressing enter inside any form field will also trigger that one
Sample:
<form action="1.html" method="get">
<input type="text" name="in">
<button type="submit" name="decision" value="Accept">Accept</button>
<button type="submit" name="decision" value="Decline">Decline</button>
</form>
I'm using Dojo 1.5, and I'm trying to create a context menu that can invocate a function myFunction passing the event and other arguments. So far I've the following code:
<div dojoType="dijit.Menu" id="bankerMenu" style="display: none;">
<div dojoType="dijit.MenuItem" onclick="copyDocuments('bankerFolder');" iconClass="dijitEditorIcon dijitEditorIconCopy">Copy to Client</div>
<div dojoType="dijit.PopupMenuItem" onclick="doNothing()" iconClass="dijitEditorIcon dijitEditorIconCopy">
<span><s:text name="CopyTo.label"/></span>
<div dojoType="dijit.Menu" id="bigsubmenu">
var="distributionList">
<div dojoType="dijit.MenuItem" onclick="myFunction(event,'bankerFolder',1)"><s:property value='distributionListName'/></div>
</div>
</div>
</div>
But it is not recognizing the 'event' that I want to pass to the function. I know I can susbtitute the call using this:
<div dojoType="dijit.MenuItem" label="Some menu item 2">
<script type="dojo/method" event="onClick" args="evt">
myFunction(evt,'bankerFolder',1);
</script>
</div>
but I would like to simplify it and used the first syntax. How can I do that?
Passing event literally would likely end up leaving you at the mercy of cross-browser inconsistencies. However, since events connected through Dojo worry about this for you, and since onClick is a widget event that already receives the event object as an argument, you should be able to get away with the following:
<div dojoType="dijit.MenuItem" onClick="myFunction(arguments[0],'bankerFolder',1)"><s:property value='distributionListName'/></div>
Also note the capital C in onClick - widget events always use camel case; they are not actual DOM events, though they are often mapped to analogous DOM events. I get the impression you were testing with capital C though, based on the problem you described encountering.
Here's a simplified example of the idea working (initially provided/suggested by Dustin Machi in the Dojo IRC channel): http://jsfiddle.net/xwFC5/5/
Following from Ken's comment to the answer above, I managed to figure this out as outlined here: http://blue-networks.net/wp/?p=37 It connects to onCellContextMenu and pulls the relevant information out of the event, saving it into the grid object.