The attached Node Red Flow with the attached HTML and Javascript Code is working as follows:
msg.payload sending from the buttons is displayed in the textarea and can also be send out correct to the debug node
I also can change the content of the textarea and then send out correct to the debug node
But after I have changed the content of the textarea, all further msg.payload inputs from the Buttons are ignored until I make re deployment of Node Red.
<textarea name="textentered" id="textentered" rows="8" cols="25">{{msg.payload}}</textarea>
<input type="submit" value="Save Comments" ng-click="send({payload:test()})">
<script>
(function(scope) {
scope.test = function() {
var text = document.getElementById("textentered").value;
alert(text);
return "E:"+text;
}
})(scope)
</script>
I have made several modification but never could fix this problem. So I hope somebody in this community can help me.
I now alone have found the solution. Problem: HTML code for Dashboard already had the new msg.payload, but Dashboard was not refreshed.
With Dashboard refresh nodes at each msg.input it works fine !!!
New Node Red Flow
Related
I often use this site but it had never happened to me to ask a question. Now I am blocked and so it is time to ask the first one.
I need to test a sign up form created with vue 2 and vuetify, server side rendered with ruby on rails, webpack 5.
I configured capybara with selenium chrome headless driver, it works when it comes to interacting with text fields and buttons but when I try to check the checkbox:
(byebug) check('Accept')
*** Capybara::ElementNotFound Exception: Unable to find visible checkbox "Accept" that is not disabled
Vuetify hides the input and replaces it with beautiful div but, what is the best approach to check a v-checkbox?
Signup form
If I add the visible attribute, the input is found but nothing happens. I think I need to interact with some other element?
(byebug) check('Accept', visible: false)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">
I also tried this but still nothing happen:
(byebug) page.find('input[type=checkbox]', visible: false).set(true)
#<Capybara::Node::Element tag="input" path="/HTML/BODY[1]/DIV[1]/DIV[1]/DIV[1]/MAIN[1]/DIV[1]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/FORM[1]/DIV[2]/DIV[2]/DIV[1]/DIV[1]/DIV[1]/INPUT[1]">
So I also tried the click way but getting this error:
(byebug) page.find('input[type=checkbox]', visible: false).click
*** Selenium::WebDriver::Error::ElementClickInterceptedError Exception: element click intercepted: Element <input aria-checked="false" id="input-96" role="checkbox" type="checkbox" value=""> is not clickable at point (234, 531). Other element would receive the click: <div class="v-input--selection-controls__ripple"></div>
(Session info: headless chrome=85.0.4183.121)
I tried also executing the raw script:
page.execute_script("window.uiApp.$data.terms_and_conditions = true")
The vue app is mounted in this way:
window.uiApp = new Vue({
i18n,
vuetify,
store,
router,
el: id,
render: h => h(App, {
props
})
})
But window.uiApp.$data is empty, so this attempt also seems to fail :( How to access vue component data (without vue web tool)?
I don't know what else to try, thanks in advance
Looking at the HTML shown in your linked image (in the future when asking questions it would be helpful if you included the relevant HTML directly in your question) it looks like you have a label associated with the hidden checkbox that the user can click. In that case you can use
check('Accept', allow_label_click: true)
which, when the actual checkbox is hidden, will click on the associated label instead. If you want that behavior to be on by default you can set Capybara.automatic_label_click = true.
Your other option is to determine exactly which element is actually being shown as the 'checkbox' and use find(...).click to locate that element and click on it.
I changed the checkbox in this way:
<v-checkbox v-model="terms_and_conditions"
#input='$v.terms_and_conditions.$touch()'
#blur='$v.terms_and_conditions.$touch()'
:label="$t('commons.accept')">
</v-checkbox>
<div class="ml-2">
<v-tooltip bottom>
<template v-slot:activator="{ on }">
<a
target="_blank"
href="/users/terms_and_conditions"
#click.stop
v-on="on"
>
{{ $t('session.sign_up.terms') }}
</a>
</template>
{{ $t('session.sign_up.terms_hint') }}
</v-tooltip>
</div>
Thank you
I'm experimenting with ZAF V2 and ran into some issues, I'm using the app scaffolding at: https://github.com/zendesk/app_scaffold. I've been looking at documentation and tutorials the last few days with no luck.
I have two files:
form.hdbs
<form id="myForm">
<label for="name" class="sr-only">Name</label>
<input type="name" class="form-control" id="name" placeholder="Name">
<button class="btn" id="sendBtn">Submit</button>
</form>
Hello {{name}}
and index.js:
import ZAFClient from 'zendesk_app_framework_sdk';
import View from 'view';
var client = ZAFClient.init();
const view = new View();
view.switchTo('form');
$('#sendBtn').on('click', function (e) {
e.preventDefault();
var name = $("#name").val();
view.switchTo('form', {
name: name
});
});
The first time I run the app and type a name / submit, the view reloads and the message shows Hello xxx, the second time I type in a name and hit submit, the app goes blank, no errors in console.
Has anyone run into this issue?
Any insight is greatly appreciated.
Likely what happened is, the click event fired which rendered the page as you would expect but then the form submits to an empty page. You'd need to avoid the form rendering as well.
This is a "fancy hello world" style app. Most probably once you start actually building a useful app you won't build it like this anyway :)
I have tried all the options i found on the forum, but could not get it to work.
I even tried click event but that is also not getting called.
I wonder what is wrong with my code.
<script type="text/javascript">`enter code here`
$('#test.role.list').change(function(){
alert("here");
});
<div>
<form:select id="test.role.list" path="name">
<form:option value="none" label="none"/>
<form:option value="my none" label="none"/>
</form:select>
</div>
I have a list of permissions which are keys from the messageresource properties file, so the same thing i am using as id as well. The reason it is not working is correct as mentioned by the Lee. It considers the dots as different properties of the element with id "test" which is first string before dot and the next string as probably class. So i used the onchange event as
var Ele = document.geteElementByID("test.role.list");
ele.onchange = function(){
alert("here");
}
it is working fine now.
Yes the problesms are with dots in id.
You can use it as below,
$('#test\\.role\\.list').change(function(){
alert("here");
});
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it
I have a page with a ticket list. In it, there is a <td> that is either a grab or release link. That link inside the '' is wrapped in a '' for an ajax html replacement. Like:
<td>
<div id="ticket_grab_release_<%= ticket.id %>">
*---- either a grab or release link here ----*
<div>
</td>
So, the user clicks on 'grab': They are assigned the ticket, the worklist is updated with their info on the page via HTML replacements, and the grab link is replaced with a 'release' link.
Next to this is a 'complete' link. When the user clicks on that, a small complete form opens in a jQuery UI-Dialog window. I ran into a problem though because along with the grab/replace link changing I also had to toggle this 'complete' link with a grey non-link 'complete' or an actual 'complete' link (if ticket released - disable complete link or visa versa).
The problem is that if this 'complete' link was greyed out and I replaced that with a 'complete' link, the UI Dialog window would not open. Like (no idea what I'm saying) the link wasn't in the DOM.
I got frustrated for a bit and then tried wrapping the script in a <div> and doing an html page replacement on the whole script. I HTML replaced the greyed out 'complete' with a 'complete' link and then HTML replaced the script right after. Interestingly that worked, but I'm really curious as to why it worked. When you ajax insert a script through an HTML replacement, does that inserted script have access to the modified DOM where the original script only has access to the what was the original DOM from the page load?
<div id="html_replace_sript">
<script type="text/javascript">
$('.complete_ticket_link' ).click(function(){
var url = $(this).attr("href");
$("#form_load").load(url,
function() {
$(this).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: ' Complete Ticket ',
position: [125, 50]
});
});
return false;
});
</script>
</div>
Thanks - much apprecaited!
Check out live()'s much less recource-demanding counterpart: delegate()
Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
That means that instead of having to look through the entire window for an element, it starts at the specified root, significantly reducing overhead. This is the best solution for your issue.
The answer is YES.
But if you want to bind events to elements that match the selector now and in the future, you can use .live()
So you'd do:
$('.complete_ticket_link' ).live('click' function(){
...
});
Using this, your code can be on your main page and it will work.
Hope this helps. Cheers