I am trying to integrate ckeditor with vue js in my application. Everything is working fine but when i click on submit button, all the data is saved in database and all fields are empty.
but in this case , i am not able to edit the ck-editor if i refresh or change the dom and again come to same page then working fine.
I think it needs to re-binding of ckeditor but I am not sure how we can do it.
I followed this link -> https://vuejsexamples.com/ckeditor-using-for-vue-js-2/
to integrate the ck-editor and also using js file of ckeditor on index page.
I assume that the Form which you are using is submitted by the browser - native html behaviour. To avoid that, the input field with type submit should look like (both #submit.prevent so as #click.prevent):
<form #submit.prevent="">
<input type="text" />
<input type="submit" value="ok" #click.prevent="" />
</form>
Related
I have read through many answers on this topic but none seem to apply to what I am trying to do (or I am misunderstanding the problem entirely). Where a lot of my confusion lies is around whether it's the parent window or the iFrame that needs settings changed.
We have a small portal that allows users of our customers (asp mvc core 6 multi tenant app) to login and view their data. So far it works great, all but 1 of our customers do not iFrame the portal, we are trying to make it so they can frame our portal. They have their own domain.
Our authentication is the regular ASP Identity using cookies that is built in to the framework.
I've recreated a similar setup, I have a simple parent site that has this (the sub domain is their own sub domain to our site and if you go there you get the regular portal).
<div class="text-center">
<iframe src="https://sub.ourdomain.com" width="525" height="800" name="b3iframe"></iframe>
So far anything I do other than link to a new page fails within the iFrame. I can't POST a form, use AJAX, etc. Another problem is even if try to log them in (without POSTING a form, just hardcoded login for testing) the cookie does not set and the portal returns to the login page.
I have tried setting 'same-site=none' on both the parent and the framed site. (like what this describes).
I have tested simple things like making a fetch request and that fails (I get a 302)
All POST calls fail (even ones that don't require authentication, just test pages fail with a 400). When I get the 400 response code it is displayed within the frame.
I am aware and have used the ability to pass messages between the parent and iFrame but I don't think that can solve the cookie/POST problem.
I have tried using the 'target' attribute on the form to point to the iFrame but it appears that is for situations where the form is not inside the frame
The iFrame code can be just a simple login form:
<form method="post" id="loginForm">
<div class="form-group">
<label>Email Address</label>
<div>
<input asp-for="UserName" class="form-control" />
</div>
</div>
<div class="form-group">
<label>Password</label>
<div>
<input asp-for="Password" type="password" class="form-control" />
</div>
</div>
<div class="mt-5">
<button type="submit" style="width:100%" class="btn btn-primary tenant-custom-button">Log in</button>
</div></form>
What's frustrating is even in a mock parent website that I made and have full control of I can't seem to set it up so that the iFrame can use cookies or POST/GET (the test parent website is also ASP MVC CORE). The only thing I can do is have links to other pages without auth or POSTS.
Thanks for your time,
Brian
I am trying to hide/show a div if a form-input has a value. This works just fine with a regular form but if I implement it with netlify-forms I get the following error:
Unhandled promise rejection TypeError: "setting getter-only property "message""
<form name="newsletter" method="POST" data-netlify="true">
<input #input="email = $event.target.value" type="email" name="email">
<div :class="{'hidden': email === ''}">
<div data-netlify-recaptcha="true" />
</div>
</form>
I also tried #focus and #blur instead of #input but the error is always the same.
Without the data-netlify="true" it works as expected so I suspect it to have something to do with Netlify injecting something into the form.
In Netlify's guide on Netlify Forms + Vue, they say that the way SPAs are rendered can prevent Netlify's bots from HTML-editing the form to link it with their services.
By default Vue renders client side but the Netlify post processing bots expect HTML on site deploy. Any netlify form attribute tags included in a Vue app would only be inserted into the DOM client-side, rather than in the HTML and thereby runs the risk of being totally overlooked by the build bots.
To handle this, you have two options. You can either pre-render your application or add the netlify form to your static HTML file in your public folder.
So either pre-render your HTML (which gives an added speed and SEO bonus), or give netlify a static form to attach itself to, which you can then hide and replace with your nice Vue form on the client.
i am trying to automate the login functionality of a site.I want to verify whether the tooltip is present or not and to capture the tooltip text displayed for the textboxes.The tooltip is displayed when trying to click on the login btn without filling the textboxes.The tooltip text is attached to the input elements via bootstrap javascript.No tilte attribute is present for the textboxes
https://elasticbox.com/login/ is the site address.Any ideas on how to capture the tooltip text .Thanks in advance
This is not a bootstrap tool-tip as you commented for #Varun's reply.
This is just the HTML5 form validation which comes into action when you put "required" as the attribute of textfield.
Make an html file 'test.html' file using the below code:
<html>
<body>
<form name='form1' post="http://www.google.com">
<input type='email' required placeholder='email address please' />
<input type='password' required placeholder='password please' />
<input type='submit' value='button1' />
</form>
</body>
</html>
Herein, when you click on "button1" (after opening the file in browsers like: Chrome, Firefox, etc.), you will see the necessary validation under the textfield(s).
But, there is no possible way to inspect them.
You can, however, use Sikuli/Autoit to check the presence of that validation text, but that again will be a lost cause as the image of the validation messages/tooltip differs from one browser to another.
Looks like developer needs to be consulted for this.
In javascript it seems like the signin button will remain disabled until both values are filled i.e. username and password.
I am not much into javascript, may be you can consult the developer in order to understand this more.
You can refer image below:
I'm creating one web application using ASP.NET MVC 4.0 and Jquery .
Me use uploadify for uploading files from client and i want to upload file on post action of my form, so basically my problem is while i'm selecting file it shows progressbar with file list and uploading progressbar but i want to show only file not progress bar.
stuck at this point - Any suggestion ?
so you don't need uploadify you just want multi file select
make form like this
<form action="processThem.php" method="post" enctype="multipart/form-data">
<input type="file" value="" name="upload[]" multiple>
<button type="submit">Upload!</button>
</form>
Square brackets in name of input type file are important also attribute multiple
see this post
http://www.hyperorg.com/blogger/2012/09/09/beginner2beginner-javascript-multi-file-upload-php-to-process-it/
I have a modal window using jqmodal. I need a button within that modal to load a different page in the modal. I have this functioning in all browsers except safari.
JS
<script language="javascript">
function shipCalc() {
$('.jqmWindow').load("/ash/shop/shipping.php");
}
</script>
HTML
<form name="form9" id="form9" method="post">
Zip: <input type="text" size="5" name="zip">
<a href="#" id="submitbtn" onclick= "shipCalc();" >zip</a>
</form>
KEEP IN MIND! The class .jqmWindow is a modal window using the jqmodal jquery plugin. It is NOT just a div on a page. I am using the method .load() to change what has been loaded in the modal window after it has popped up. The html shown above is inside the page that is originally loaded in the modal. I am having trouble understanding why this works in all browsers besides safari. I posted earlier and got some responses that weren't quite addressing the real problem here, which is that I can not use the .load() method to load anything into my modal window in safari. (Ive stripped some non-important information regarding future modifications I will make to further make this suite the needs of the site, just to keep this nice and simple to understand...)
function shipCalc() needed to be on both the initial page AND the page that gets loaded into the modal for safari to load everything properly. All other browsers did not require that. All is working now, so I figured I would post my own answer in case anyone was ever searching for something similar!