Am building a Wordpress plugin and am Using Vue Js.
I set up a variable that will be set to true on a button click
Then another div which is a modal that will remaining hidden with v-if as long as the variable is false. The is also a form in the div modal(pop up)
The problem is that once the value changes, on button pressed, the form submits immediately.
This has been happening but I usually ignore it because there was always a required field which will prevent the form from submitting automatically.
Vue.js Data object
{
selected_to_show : false,
}
The modal div
<div v-if="selected_to_show === true" class='mp-modal'>
<form on:submit.prevent="xhrSubmit()">
<form>
</div>
<button v-on:click="selected_to_show = true"></button>
This works but once the modal opens, the form submits immediately.
Note: There is only two button elements in the form where are all set to type="button"
The target is to prevent the form from submitting automatically when shown
If any one still uses this approach to re-render vue apps, my advice is, don't.
The best way to re-render the app is by doing
this.forceUpdate();
This will re-render the vue app instead of modifying data properties of the vue instance which are utilized during rendering.
However, don't overuse it.
Most times when your view is not re-rendering naturally, its probably because you are doing something wrong.
Related
I am trying to make a memo pad where a user can write in a textarea and save it.
When the page opens, I want the same text to remain in the textarea.
I don't want to use the onChange event because it gets rendered with every input
So I am trying to use onSubmit and useEffect.
I am new to react and trying to understand hooks. But after reading all the documents I am still lost.
I am using Ionic framework and below is my code,
<IonCard>
<form className="memo" onSubmit={handleSubmit(text)}>
<IonItemDivider><IonLabel>관리자용 메모판</IonLabel></IonItemDivider>
<IonItem>
<IonTextarea id="memoTextarea" rows={28} value={text} name="memoTextarea" ref={register({})} ></IonTextarea>
</IonItem>
<IonButton type="submit" fill="solid">저장</IonButton>
</form>
</IonCard>
Can anybody help me, how will I implement the useEffect code ?
useEffect(()=>{
}, []);
What do I put inside handleSubmit()?
react-hook-form uses uncontrolled components by default. Uncontrolled means you don't have to control the state yourself, the components handle it for you (in this case IonTextarea). It also means that your parent component doesn't re-render because it doesn't have to reflect the changes from the dependency state since it doesn't have any.
You can make sure the component is uncontrollable by not initializing the value in the input component. You can confirm that your component doesn't re-render by logging in the render method.
<IonTextarea
id="memoTextarea"
rows={28}
// comment the following line will make the component uncontrollable
// and your component never re-renders when you type
// value={text}
name="memoTextarea"
ref={r => register(r)}
></IonTextarea>
Live Demo
I am using $window.addEventListener('beforeunload'... to detect whether changes have been made to a page, and it is working mostly as expected. I'm also using $transitions.onStart... to detect when the back/forward browser buttons are used. What I don't understand is how this is working, because my HTML template does not have any form tags in it, just inputs inside divs.
I have done research on this and cannot seem to find an answer, other than it is not necessary to use form tags in order to check the dirtiness of inputs. I'm just not sure how this is actually working in the background.
<div class="modal-header bg-primary">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title pull-left">New Note</h4>
<div class="clearfix"></div>
</div>
<div class="modal-body">
<input type="textfield" ng-model="detailVM.newNoteContent">
<button ng-click="detailVM.addNewNote()">
Save New Note <span class="fa fa-check"></span>
</button>
</div>
Here is my HTML code.
// For page reloads and attempts to leave the site
$window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});
// For when a user hits the back button
$transitions.onStart({}, function ($transition)
{
var answer = confirm("Are you sure you want to leave this page? Changes you made may not be saved.")
if (!answer) {
$transition.abort();
return false;
}
return true;
});
And here is what I have in the controller.
When I enter data into the inputs and then attempt to reload, close, or click the back button, these show the message, "Are you sure you want to leave this page?" But how is it detecting that the inputs are dirty?
ng-model doesn't need to be in a form for it's validators to work.
From the AngularJS docs:
The ngModel directive binds an input,select, textarea (or custom form
control) to a property on the scope using NgModelController, which is
created and exposed by this directive.
ngModel is responsible for:
Binding the view into the model, which other directives such as input,
textarea or select require.
Providing validation behavior (i.e.
required, number, email, url).
Keeping the state of the control
(valid/invalid, dirty/pristine, touched/untouched, validation errors).
Setting related css classes on the element (ng-valid, ng-invalid,
ng-dirty, ng-pristine, ng-touched, ng-untouched, ng-empty,
ng-not-empty) including animations.
Registering the control with its
parent form.
— AngularJS ng-model Directive API Reference
If the form is present, ngModelController will register it's controls to the form. This gives you a nice container for tracking the state of an entire set of inputs/controls.
I am developing an application using Springs 2.0.
I have a requirement that when user clicks on a submit button on a form, a poup should be displayed showing a "select" box for selecting a predefined reasons and a "Textarea" to accept comment. (These dropdown options are picked from context so can not use static HTML page.)
These 2 values should also be stored in the database along with the other data fields in the parent form.
My problem is: if I use "window.open" then the parent form data does not get carried to child window as it is not "submitted". Also can not submit the form as it will not display popup window.
I tried searching for solution on sites, but could not find solution suitable for me.
Any help would be really appreicated.
Thanks.
Use a div as a popup instead of a new window. Or use JQuery. Example, messi popup under usage
Edit
If you just want something very basic,
<div id="modal" style="border:3px solid black; background-color:#9999ff; padding:25px; font-size:150%; text-align:center; display:none;">
This is a modal popup!<br><br>
<input type="button" value="OK" onClick="Popup.hide('modal')">
</div>
Show Modal Popup
<br>
Show Modal Popup With A Custom Screen
http://www.javascripttoolbox.com
You can use jQuery modal. Here is a similar example which accepts input in a modal http://jqueryui.com/demos/dialog/modal-form.html.
Resolved it using window.showModalDialog and normal java script. Here are the details.
Firstly I defined 2 hidden fields on parent page. When popup window is opened and submitted, the values entered in the dropdown and text area are assigned to those.
var handle = window.showModalDialog(htmlURL,this,urlProp);
when submitted,
document.getElementById("hiddenRejectionComment").value = handle.rejectionComment;
document.getElementById("hiddenRejectionReason").value = handle.rejectionReason;
Simple, wasn't it?
When I add a normal <form> element in my xpage, the pager doesn't work any longer, means I cannot switch to other pages (clicking on "next" or something).
Here is the important part:
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<form action="#">
//form stuff... contents not important for my issue, I tested it
</form>
When I exclude the form entirely, it works
I use Domino Designer 8.5.3 on windows 7
And the "newsList" is an ID of a repeat-control
Instead of using a passthru form, use a form component:
<xp:form action="#">
// form contents
</xp:form>
This will prevent the rest of the content from being surrounded by a form tag, which also breaks events and data submission, so you'll need to surround the rest of your content in its own form:
<xp:form>
<xp:pager id="newsPager" for="newsList" pageCount="4" partialRefresh="true">
//pager stuff.....
</xp:pager>
<xp:repeat id="newsList">
//repeat contents
</xp:repeat>
</xp:form>
NOTE: do not nest forms inside each other; this confuses browsers, which is why your current design is not functional. Identify, instead, discrete portions of the page that can be safely treated as separate forms and wrap each portion in its own form component.
The XPage renderer automatically adds a form to the page unless you have disabled this in the properties of the Xpage.
This form is used to process all the partial refreshes and submitting of values to the backend. When you add your own form tag the partial refresh used by the pager ( or any xpage component ) no longer has the correct information needed to talk to the server.
if you really need to have your own form tag then I would suggest an iFrame that loads in an external page that contains your form.
i found this and it's work fine for me
http://xpageswiki.com/web/youatnotes/wiki-xpages.nsf/dx/work_with_HTML_forms#Embed+a+custom+HTML+form+in+a+XPage
This is a very rudimentary question, but I am sure someone out there knows why. In HTML, when I make a button element by itself, and do not give it and onclick and no jQuery .click() the button will just do nothing. Perfect. But when I do this and but the button inside a <form> element, it tries to send GET data of all the form elements to the root address of my website? Why is it doing that? I didn't make it a submit button or even define a method or action on that form??
Thanks for the info in advance!
** EDIT **
This is what I did to fix the problem. For buttons inside the <form>, use:
<button type="button"></button>
And it will not do anything by default.
As can be seen at the respective MDN entry, the default value for the type property of a button element is submit. So if you omit it or don't change it to button or reset, the default behaviour will kick in and the form gets submitted.
<form action="">
<button type="button">Nothing will happen</button>
<button>Form gets submitted</button>
</form>
I didn't make it a submit button
<button> elements have a type attribute. The default value is submit. Set type="button" if you don't want it to submit a form.
or even define a method
method defaults to GET
or location on that form??
action defaults to the current URI.
It was designed that way because you sometimes need to know WHICH button was pressed on the server-side. If you want button functionality without a button, use a styled A-tag.
Buttons are treated as submit controls in forms, not sure why.
The reason it gets posted to your root is because you didn't specify an action and so the default is used.
The reason it used GET is because that's the default method.
To prevent it happening, add return false; to the end of your button's onclick.