I am using amp-states on jsp page. I change text of button to 'Loading...' on submitting form, then redirects me to another page. When I click to go back, I see that the button text is still 'Loading...'. That is, the state is not reset to the initial value. I use submit-success for reseting state(isLoading), but it is not work. This bug is reproducible in Safari and Firefox, it is not reproduced in Google Chrome. Why is this happening? How to fix it? I am ready to consider alternative options, without amp-states.
<amp-state id="testState">
<script type="application/json">
{
"isLoading": false
}
</script>
</amp-state>
<div class="my-class" role="button">
<form
id="test"
class="buysell-form"
action="nextPageUrl"
method="GET"
target="_top"
on="
submit:
AMP.setState({testState: {
isLoading: true
}});
submit-success:
AMP.setState({testState: {
isLoading: false
}});
submit-error:
AMP.setState({testState: {
isLoading: false
}});
invalid:
AMP.setState({testState: {
isLoading: false
}});"
custom-validation-reporting="show-first-on-submit">
<div class="inputs">
<input type="text" class="location-input" title="Enter your city">
<input
type="submit"
value="My button"
[value]="testState.isLoading ? 'Loading...' : 'My button'"
class="next-button"
[class]="testState.isLoading ? 'next-button disabled' : 'next-button'"
[disabled]="testState.isLoading">
</div>
</form>
</div>
Related
I am a newbie to VueJs
I would like to use Vue2 to create a validation form
Index.html
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm">
<label for="username">Name</label>
<input type="text" name="username" v-model="username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
but When I click the previous or next page, then back to index.html form page.
The input field's data is auto-remove.
How to using keep-alive in vuejs to save user input?
Is there any simple example?
Thank you very much
When you click on the previous or next page (I think you mean the browser's arrows) the page it's reloaded, so the javascript (and vue) too. To keep the data, you must "save" the form's state. A simple solution can be to save the form object in sessionStorage and check if there is a sessionStorage Item (let's say with a key 'formData') and fill the form object with these values.
Example:
<html>
...
<body>
<div id="app">
<form action='process.php' method="post" name="submit_form" id="submit_form" v-on:submit="validateForm" v-on:change="saveFormDataState">
<label for="username">Name</label>
<input type="text" name="username" v-model="formData.username" placeholder="Username"/>
<br><br>
<input class="submit_button" name="submit_form" type="submit" value="Submit">
</form>
</div>
<script>
new Vue({
el: '#app',
data: () => ({
formData: {
username: ''
}
}),
methods: {
initFormDataState(){
const formData = JSON.parse(sessionStorage.getItem('formData') || '');
if(formData){
this.formData = formData;
}
},
saveFormDataState(){
const formData = JSON.stringify(this.formData);
sessionStorage.setItem('formData', formData);
}
},
created(){
this.initFormDataState();
}
});
</script>
</body>
</html>
Note that I have added the on-change listener to the form to save the form's state when the user focuses on another input element or presses the submit button.
I am using ionrangeslider in a modal
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="width: auto;margin: 0 auto">
<!-- Modal body -->
<div class="modal-body">
<input type="text" id="mySlider"/>
</div>
</div>
</div>
</div>
I get some values from ajax and after that i set the to and from for the slider like
$(document).ready(function () {
$('#mySlider').ionRangeSlider({
grid: false,
type: 'double',
min: 1,
max: 10,
force_edges: true,
drag_interval: true,
step: 1,
});
$.ajax({
url: "/get_schedule_for_zone/",
type: 'POST',
headers: { 'X-CSRFToken': csrftoken },
data: {"deviceassigned_id": parseInt(deviceassigned_id),"zone_number": parseInt(zone_number)},
success: function(res) {
$('#mySlider').data("ionRangeSlider").update({from: res.to})
$('#mySlider').data("ionRangeSlider").update({to: res.from})
$('$myModal').modal('show')
},
error : function(xhr,errmsg,err) {
console.log(err)
}
})
})
what i found it the modal open and then shows the slider without to and from, and then updated the to and from. the user can see that they are changing from nothing to some values
how to set them before i open the modal and show them there.
if your slider is inside a div, just hide it:
<div id="slider">
<input type="text" class="js-range-slider" id="test" name="my_range" value=""
data-min="40"
data-max="210"
data-from="{{row2.7}}"
data-grid="true"
data-hide-min-max="true"
data-postfix="'F"
data-type="double"
/>
</div>
$("#slider").hide();
and after displaying you modal, (or just before)
$("#slider").show();
other solution is to play with opacity
The script fails with this error.
Error: element (".WONDERESC") still not displayed after 30000ms
Tried different combinations for Xpath, (relative, fixed, text()} and CSS selectors, but the button not clicked. The sign-in button div in the code block:
<div>
<div class="WONDERBSC" role="form">
<div>
<div class="WONDERJ1B" data-automation-id="userName">
<div class="TOM-Label WONDERP1B"
title="Username">Username</div>
<input type="text"
class="TOM-TextBox WONDERM1B" aria-label="Username">
<button type="button" class="TOM-Button WONDERN1B"/>
</div>
</div>
<div>
<div class="WONDERJ1B"
data-automation-id="password">
<div class="TOM-Label WONDERP1B" title="Password">Password</div>
<input type="password" class="TOM-PasswordTextBox WONDERM1B" aria-label="Password">
<button type="button" class="TOM-Button WONDERN1B"/>
</div>
</div>
<button type="button"
class="WONDERESC"
data-automation-id="goButton">Sign In</button>
</div>
</div>
Kindly suggest the workarounds - the other conditions are also meeting- visibility-true, display-block, opacity not zero.
Thanks,
Tan
If element is not displayed then you have to make it visible
Case 1
The element takes some time to be visible automatically
In this case, you can use webdriver wait
WebDriverWait wait = new WebDriverWait(driver,Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("xxxx"));
Case 2
Element is visible after some interaction like mouse movement or click or type
Then you have to perform that action with selenium. For mouse movements you can use action classes
As it was told in the comments, you are using invalid selectors.
Assuming you have the latest WebdriverIO v6, the following works like a charm
// open page
browser.url('https://impl.workday.com/wday/authgwy/accenture_dpt2/login.htmld?redirect=n')
const form = $('[data-automation-id="authPanel"] [role="form"]')
// make sure form is visible
expect(form).toBeVisible()
// define form data
const formData = [{
id: 'userName', value: 'test'
}, {
id: 'password', value: 'password'
}]
// fill form
formData.forEach(f => {
form.$(`[data-automation-id="${f.id}"] input`).setValue(f.value)
})
// submit form
form.$('button[data-automation-id="goButton"]').click()
// make sure error message exist
const errorMessage = $('[data-automation-id="alertMessage"]')
expect(errorMessage).toBeVisible()
expect(errorMessage).toHaveTextContaining('Invalid user name or password')
I am still fairly new to using Laravel and Vue.js and have been having some problems when trying to submit data to be used in a modal form.
overview.vue is displaying some information and triggering the modal component
My modal element:
<EditTeamModal :existing="existing_team"/>
In my template I am triggering the following function
#click="getExistingTeam(membership.team)"
Which triggers the following method:
getExistingTeam: function (team) {
this.existing_team = team;
this.$bvModal.show('edit_team');
},
EditTeamModal.vue
In my modal component I have several inputs like the one following:
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ $t('team.name') }} <span class="text-danger">*</span></label>
<div class="col-md-8">
<input type="text" v-model="form.name" :class="{ 'is-invalid': form.errors.has('name') }" class="form-control" id="name" name="name" required/>
<has-error :form="form" field="name" />
<small id="nameHelp" class="form-text text-muted">Unique name of your team (155 character limit).</small>
</div>
</div>
and am setting my props and vForm data as follows:
props: {
existing: {
type: Object,
required: true,
default: {}
}
},
// middleware: 'auth',
data () {
return {
form: new Form({
id: this.existing.id,
name: this.existing.name,
region: this.existing.region,
website: this.existing.website,
about: this.existing.about,
membership_password: "",
membership_password_confirmation: "",
avatar: null,
}),
}
},
However, my form inputs are always blank...
I can access this.exists.name directly and get the proper expected data output, however it will not seem to populate into my form fields?!
Is there a proper way to pull data from a vue property into vForm form data?
Was able to get the modal form data to update by adding the following to my EditTeamModal.vue
watch: {
existing: function(val) {
this.form.fill(this.existing);
}
},
I started to use Pubnub for making video group chats. However, when I was testing it, I found a little problem: As I connect my computer to their servers, my webcam turns on and never turns off, unless I leave the page.
However, I wish to be able to close a video chatting, and turning off the webcam at the same time. How to do it?
Thank you very much!
EDIT: Here is a code I'm using for my tests, I'm using the one given in the tutorial:
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/pubnub-3.7.18.min.js"></script>
<script src="js/webrtc.js"></script>
<script src="js/rtc-controller.js"></script>
<div id="vid-box"></div>
<div id="vid-thumb"></div>
<form name="loginForm" id="login" action="#" onsubmit="return login(this);">
<input type="text" name="username" id="username" placeholder="Pick a username!" />
<input type="submit" name="login_submit" value="Log In">
</form>
<form name="callForm" id="call" action="#" onsubmit="return makeCall(this);">
<input type="text" name="number" placeholder="Enter user to dial!" />
<input type="submit" value="Call"/>
</form>
<div id="inCall"> <!-- Buttons for in call features -->
<button id="end" onclick="end()">End</button> <button id="mute" onclick="mute()">Mute</button> <button id="pause" onclick="pause()">Pause</button>
</div>
<script>
var video_out = document.getElementById("vid-box");
var vid_thumb = document.getElementById("vid-thumb");
function login(form) {
var phone = window.phone = PHONE({
number : form.username.value || "Anonymous", // listen on username line else Anonymous
media : { audio : true, video : true },
publish_key : 'pub-c-c66a9681-5497-424d-b613-e44bbbea45a0',
subscribe_key : 'sub-c-35aca7e0-a55e-11e5-802b-02ee2ddab7fe',
});
var ctrl = window.ctrl = CONTROLLER(phone);
ctrl.ready(function(){
form.username.style.background="#55ff5b"; // Turn input green
form.login_submit.hidden="true"; // Hide login button
ctrl.addLocalStream(vid_thumb); // Place local stream in div
}); // Called when ready to receive call
ctrl.receive(function(session){
session.connected(function(session){ video_out.appendChild(session.video); });
session.ended(function(session) { ctrl.getVideoElement(session.number).remove(); });
});
ctrl.videoToggled(function(session, isEnabled){
ctrl.getVideoElement(session.number).toggle(isEnabled); // Hide video is stream paused
});
ctrl.audioToggled(function(session, isEnabled){
ctrl.getVideoElement(session.number).css("opacity",isEnabled ? 1 : 0.75); // 0.75 opacity is audio muted
});
return false; //prevents form from submitting
}
function makeCall(form){
if (!window.ctrl) alert("Login First!");
else ctrl.dial(form.number.value);
return false;
}
function end(){
ctrl.hangup();
}
function mute(){
var audio = ctrl.toggleAudio();
if (!audio) $("#mute").html("Unmute");
else $("#mute").html("Mute");
}
function pause(){
var video = ctrl.toggleVideo();
if (!video) $('#pause').html('Unpause');
else $('#pause').html('Pause');
}
</script>
Note that I tried to find the function through the console in addition to my searches, but I was unable to find it...