I'm running a nuxtjs application in production and it's causing some VueJS functionality to break, particular with DOM events. However, development mode works just fine as it should flawlessly, though it is slower than production mode due to the code not being minified and compiled and all that.
#click events do not fire their functionality
.prevent does not prevent anything
Here's my source of an example section that does not work.
The #click event calls that change the view do not do anything.
Upon hitting enter to fire v-on:keydown.enter="login" it does not get prevented and the form gets submitted as a GET request to the same page ( the URL shows the GET ?variables )
After looking at the HTML code in the browser to see if there's any logged warnings or errors, there's nothing and nothing on the server side logs.
Plus, the <button> tags that have the #click to fire the login or signup methods do not have any events on them, basically not doing anything; just HTML.
On my production server after running nuxt build by executing npm run build, there are no errors or warnings.
<template>
<div class='card'>
<div class='tabs 2-col'>
<span :class="{active : view != 'signup'}" #click="view = 'login'">
Login
</span>
<span :class="{active : view == 'signup'}" #click="view = 'signup'">
Sign Up
</span>
</div>
<div class='card-body'>
<form v-show="view == 'login'" v-on:keydown.enter="login" novalidate>
<!-- my other html -->
<button #click.prevent="login">Login</button>
</form>
<form v-show="view == 'signup'" v-on:keydown.enter="signup" novalidate>
<!-- my other html -->
<button #click.prevent="signup">Sign Up</button>
</form>
</div>
</div>
</template>
<script>
export default {
data : function(){
return { view : 'login'};
},
methods : {
login: function(){
// my functionality
},
signup:function(){
// my functionality
},
}
}
</script>
Thank you for any help! I've been banging my head for hours.
data proprerty should be a function that return the object. try to do this:
data: function () {
return {
view: 'login',
}
}
Related
I'm writing a Flask application that allows a user to select a project and project version from two dropdowns, then process and download an Excel document with information relevant to the selections made. I've been able to make this work, but my code causes the browser to show the refresh animation until the file is fully processed and begins to download. Ideally, I'd like the browser to process the file without showing the refresh animation. My current code is as follows:
The user makes the selections and hits the export button using this HTML:
<form method="POST" action="">
<h2 class="text-center">Select Project and Version</h2>
{{ form.hidden_tag() }}
<div class="form-group">
{{ form.projects(class="form-control-sm") }}
{{ form.versions(class="form-control-sm") }}
</div>
<div class="form-group">
<button type="button" id="export" class="btn-primary form-control">Export</button>
</div>
</form>
Upon hitting export, the following JavaScript is ran:
let export_button = document.getElementById('export')
export_button.onclick = function() {
project_index = project_select.value;
version_index = versions_select.value;
location.href = '/' + project_index + '/' + version_index;
}
The following route is called to process then send the file for download:
#app.route("/<project_index>/<version_index>")
def export(project_index, version_index):
# Call functions to process file
return send_file(output, attachment_filename="testing.xlsx", as_attachment=True)
The processing of the file includes various API calls that cause the process to take up to roughly 30 seconds. Is there a way I can make this work without having the browser show the refresh animation? Perhaps using AJAX?
In Bootstrap v5, how do I submit a form via Post method first, and then after the form is submitted, show the form is being processed? I've found lots of examples for Bootstrap v4 and jQuery but Bootstrap v5 does not have jQuery and the documentation says there could be issues with jQuery.
Here is a striped down version of my form:
<form action="" method="post" id="reqform">
<div class="input-group">
<div class="form-floating mb-3">
<input class="form-control " id="nameInputId" placeholder="name" name="name" aria-describedby="basic-addon1" type="text">
<label for="nameInputId">Name</label>
</div>
</div>
<button type="submit" id="submitBtnId" class="btn btn-primary">Submit</button>
</form>
I tried this in a script block at the bottom of the file:
//when click submit button, show loading
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener("click", function () {
// disable button
submitBtnElm.disabled = true;
//disable rest of form
document.getElementById("nameInputId").disabled = true;
//add spinner to button and change text to "loading'''"
submitBtnElm.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>Loading...'
});
In Chrome on CentOS 7, the form never gets submitted to the backend; I just get the loading button. On Firefox, the form gets submitted but the name field does not have a value on the backend. If I strip out this JavaScript, everything works fine.
I tried the form field onsubmit but I get the same results:
<form action="" method="post" id="reqform" onsubmit="return disableForm(this);">
I'd like to first post to the backend server and then after the post, show the loading button and disable the other fields. I want a way that the JS does not interfere with what is sent to the backend server. In other words, I'd like to be able to submit to the backend server when JS is disabled. I've found people asking the same with jQuery but none of them work for me.
Update:
I also tried:
submitBtnElm.addEventListener("submit", function ()
I setup a breakpoint on the backend server. The JS does not execute while the server is processing the information. As soon as the form gets submitted to the server, I want to change the button and form so the user can not do anything.
Update 2
I found this article that wraps the code that disables the form in a setTimeout:
https://chasingcode.dev/blog/javascript-disable-submit-button-form/
For me, it works in both Chrome and Firefox on CentOS 7. I don't have a mac to test. Here is my updated code that worked:
submitBtnElm = document.getElementById("submitBtnId")
submitBtnElm.addEventListener('click', function(event) {
setTimeout(function () {
event.target.disabled = true;
}, 0);
});
Do any Javascript gurus know if this is a good cross browser solution? If not, what is? The next best solution I found was where the functional button is swapped out with a non-function one that said something like 'loading'.
you can use Javascript, create a function that triggers when the form is summited. you can add a disabled class to the form. with a simple, if statement.
I'm working on TYPO3 migration from 6.2.31 to 8.7.19.
In my templates I'm using a navigationbar which should filter a list of videos based on categories. The navigationbar is a formular:
<f:if condition="{loggedIn}">
<f:then>
<form name="audit_vw_filter" method="post" id="audit_vw_filterForm"
action="?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedMember&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo">
</f:then>
<f:else>
<form name="audit_vw_filter" method="post" id="audit_vw_filterForm"
action="?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedPublic&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo">
</f:else>
</f:if>
...
<f:for each="{categories}" as="category" iteration="i">
<div>
//list the category
<span id="fontRed{category.uid}" class="vw_navigationbarFilter filterLinkCategory" onclick="setActualCategory('{category.name}','{category.uid}')">{category.name}</span>
</div>
...
</f:for>
</f:form>
In JavaScript I declared every category as a submit when click on it.
...
$("#vw_filterForm").submit();
So now the action from my form should be executed and call my 'FrontendVideo' Controller which should give me a feedback in form of a debug.
public function listSelectedMemberAction () {
DebuggerUtility::var_dump("Hello World");
...
}
It seems like the function of the Controller isn't reached.
Instead there is a friendly "Page not found" :/
As Expected the URL is:
http://example.de/.../.../?tx_vidverwaltung_vidverwaltungfrontend[action]=listSelectedMember&tx_vidverwaltung_vidverwaltungfrontend[controller]=FrontendVideo
On the old version 6.2.31 it worked fine. So maybe there is a change of how I call a Controller function or maybe a problem with realurl etc....
Thanks in advance!
I found the problem:
In the older TYPO3 versions TYPO3_CONF_VARS['FE']['pageNotFoundOnCHashError'] was set to true by default, so if the cHash is empty the error message is outputed.
So I tend to revert the pageNotFoundOnCHashError to "false" as default value.
to do this go into your
Install Tool > All configuration > Frontend
and change pageNotFoundOnCHashError to false
[FE][pageNotFoundOnCHashError] = false
I'm trying to use PayPal's in-context checkout in a single page app, but having issues whenever visiting a page with a PayPal button for the second time.
I've just lifted PayPal's sample code from here http://plnkr.co/edit/2GGEyNEFUPCZ7jIIGk9X?p=preview and put it onto a page in my app:
<div>
<div class="container">
<div class="row product">
<div class="col-md-4">
<h3>Toy Story Jessie T-Shirt</h3>
<p>
<a href="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm" id="t1">
</a>
</p>
</div>
</div>
<div class="row product">
<div class="col-md-4">
<h3>Toy Story Jessie T-Shirt</h3>
<p>
<form id="t2" class="ajaxasync" method="POST" action="http://166.78.8.98/cgi-bin/aries.cgi?live=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm">
</form>
</p>
</div>
</div>
</div>
<script>
window.paypalCheckoutReady = function() {
paypal.checkout.setup("6XF3MPZBZV6HU", {
environment: 'sandbox',
click: function(event) {
event.preventDefault();
paypal.checkout.initXO();
$.support.cors = true;
$.ajax({
url: "http://166.78.8.98/cgi-bin/aries.cgi?sandbox=1&direct=1&returnurl=http://166.78.8.98/cgi-bin/return.htm&cancelurl=http://166.78.8.98/cgi-bin/cancel.htm",
type: "GET",
data: '&ajax=1&onlytoken=1',
async: true,
crossDomain: true,
//Load the minibrowser with the redirection url in the success handler
success: function (token) {
var url = paypal.checkout.urlPrefix +token;
//Loading Mini browser with redirect url, true for async AJAX calls
paypal.checkout.startFlow(url);
},
error: function (responseData, textStatus, errorThrown) {
alert("Error in ajax post"+responseData.statusText);
//Gracefully Close the minibrowser in case of AJAX errors
paypal.checkout.closeFlow();
}
});
},
buttons: [
{ container: 't1' }, { container: 't2' }]
});
}
</script>
<script async src="//www.paypalobjects.com/api/checkout.js"></script>
</div>
This works great the first time I visit the page. However, on subsequent visits (without a hard reload in between), I get
Uncaught Error: Attempting to load postRobot twice on the same window
This is because it's trying to load the checkout.js script twice. So if I put a conditional to not run the checkout.js script on subsequent pageviews and instead jump straight to paypal.checkout.setup, I get
Error: You are calling paypal.checkout.setup() more than once. This function can only be called once per page load. Any further calls will be ignored.
And the button is never generated.
I need to maintain the in-context experience (the window that pops up) when the button is clicked. I've searched all through PayPal's docs and have inspected the object thoroughly in the console, but hoping I'm missing something.
How can I "reload" the button on a new page if I've already loaded checkout.js and called paypal.checkout.setup() on a prior page?
I ended up writing a directive to solve my own problem, as it does not appear that PayPal has any kind of single-page functionality.
paypal-checkout directive
The directive runs the PayPal instantiation code once, and then subsequent directive placements will simply show the already-primed button on future page/state loads.
I want to be able to show a message and gif every time a page post method is taking a little while to process. I want this to happen on every form in the app not just one.
Therefore I have put the the following Javascript file processing.js into my scripts folder
$(document).ready(function() {
var submitprocessingmsg = "<strong>Processing</strong><br /><img src='~/Images/processing.gif' />";
// Block UI when submitting forms
$("input:submit").click(function() {
if ($("form").valid()) {
$.blockUI({
message: submitprocessingmsg
});
}
});
});
And I call it in the _Layout.cshtml page using this:
#Scripts.Render("~/Scripts/Processing.js")
An example of the page I'm trying to fire it on is:
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
//Various form inputs here
<div class="form-group">
<div class="col-md-10">
<input type="submit" value="Accept Terms and Enter Event" class="btn btn-default"/>
</div>
</div>
</div>
}
I have it working in debug mode, but when I deploy it to the server it doesnt work, not even an error message
It's not firing because input:submit isn't an event. You'd need form:submit.
Although it looks like jquery does have :submit, in their documentation they recommend using input[type="submit"]
I'm not sure about the .blockUI portion. Instead, would simply hiding the button and showing the spinner in your case work? If the page is going to postback and refresh anyway it might be just fine to do something like
https://jsfiddle.net/syu00jxt/1/