I have a table in which the last column of each row holds a Button that is intended to trigger a popup to "edit and save" certain values of that row in my React app. Part of the criteria was that clicking outside the popup would also close it while preventing the user from clicking things in the background until the popup closed.
To do this, I opted to use a package called reactjs-popup. Currently for all criteria, it works perfectly. The next step, though, was to run a function when the button is clicked so that I could pull data from the API to populate the fields. However, I found that I couldn't call any functions from the onClick of the button used as a trigger. This is the main snippet of code:
import Popup from 'reactjs-popup' // this is the npm package I used
// more react code, including an arbitrary loadInfo function
<Popup
trigger = {
<Button onClick = {() => { loadInfo() }}
}
modal
nested
>
{ close => (
<div className = "modal1" id = "popupForm">
// popup content with input forms with values to be populated
</div>
}
</Popup>
The main problem I have is the "onClick" part of the Button in the trigger. No matter what I put in there, it is never ran when I click it. When I test the same button as a standalone, and not as the trigger for the popup, it works fine.
I also tried using
onClick = {loadData()}
But this just caused the function to constantly run as soon as it was rendered, and inevitable break due to too many renders. Does anyone know why this reactjs-popup component does not allow onClick within its trigger? And if so, how to get around it? Thanks!
I believe you want to loadInfo when the popup opens.
For that, there is a prop onOpen in Popup which accepts a function . You can use that,
Or you can manually set open prop using state. Have a button outside popup and update the open state when it clicked.
Related
In my form contains textbox and button. I am doing some operation in textbox (blur) event and button (click) event.
Let's assume:
user enter some text in textbox and click the button. (blur) event invoked but (click) event not invoking.
note : "at the time of clicking the button focus should be in textbox."
example: https://stackblitz.com/edit/angular-b4h9pi
blur event alert is coming but click event alert not coming.
Scenario
In onblur event I make the service call to save that field value. In onClick event I have to save all the fields data. If cursor focus one of the textbox then user click the save button. First I have save the field after finishing the first call, make the second call to save all the data. Do not call the service parallel. I want to call one by one.
Remove alert with console.log or other relevant code. alert will be triggered as as soon as focus is lost from the input even before the button is clicked. So two event is not firing simultaneously
stackblitz
Both events are indeed firing. You can confirm by changing your alert calls to console.log. I believe the browser is likely just blocking multiple alert dialogs.
Update to answer your comment:
You say you want them to fire simultaneously and then you say you don’t so I’m having trouble understanding your needs.
I can tell you this though. The blur event fires, then the click event fires. You should be able to handle whatever you need to in those handlers with that knowledge.
If you need to wait for your blur handler to come back with a response before sending that data along with your click handler, you could theoretically set a variable like
this.blurRequestLoading=true
That way, instead of firing the click request, if blurRequestLoading is true, you could set a this.clickEventPendingBlurResponse=true.
Then when the blurResponse comes back, you can set blurRequestLoading back to false, and if clickEventPendingBlurResponse is true, fire the clickEvent manually within the response handler, and set clickEventPendingBlurResponse back to false.
Hi thanks for your time and effort, i did one logic to sequence the event, please suggest me is this code in production level.
sample code base: https://stackblitz.com/edit/angular-czxn9o
I'm trying to set up a click listener on the marked input element in the screenshot wit GTM. When I click on it in the preview & debug mode it only returns gtm.element:object HTMLInputElemtent. Also form listener doesn't work for this element. Since there is no id, class etc. I have no clue how to deal with that.
Does anyone know how I can access this element and set it as as trigger on click.
I am doing a signup form with a few steps, made with angular material tabs. I have 5 tabs each containing a few inputs that the user should fill in. I also have 2 buttons below the tabs, one to get to the next tab and one button to get to the previous tab. I want to disable the upcoming tabs and also disable the button that takes the user to the next tab until the user has filled in the the tab he is on properly. I want the user to be able to go back and change the information that is already filled in on the previous tabs, and when all the tabs are filled in properly a send button is shown. So, that's basic functions for a multi step signup form.
I have managed to do the basic functions for the buttons and the tabs with ng-disabled and ng-hide combined with changing the value on the variable tabNr in my controller, like hiding the previous-button on the first tab and hiding the next-button on the last tab, and that works fine.
When it comes to hide the next-button based on if the form is filled in its a bit more tricky. I am able to disable the next tab by validating the form on the previous tab like this: ng-disabled="!tab1Form.$valid", so that's hard coded and works fine.
The previous- and next-buttons, though, are the same for all tabs and that is the tricky part, so I can't just disable the button if a form isn't valid because the button does not know which tab that is active. I have tried to make a function in the controller but then the problem is that the valid-variable is just a thing in html and I cant evaluate it in the controller.. As far as I have tried and have understood.
So this is the next-button:
<md-button ng-click="FormCtrl.tabNext()" ng-disabled="FormCtrl.tabNr >= 5 || !tab{{FormCtrl.tabNr}}Form.$valid" ng-hide="FormCtrl.tabNr > 4">Next</md-button>
Each tab has this, with it's own number:
<form name="tab1Form" novalidate>
What I've tried is to change the tab, that should trigger the disable, by using angular:
ng-disabled="!tab{{FormCtrl.tabNr}}Form.$valid"
The browser seems to change the number, and it works for the first tab, but on the rest of the tabs it does not disable the button even though it should, like if the browser does not evaluate the variable properly. I hoped that it should work because I cant think of another way of doing it with these variables...
Does this way of using angular simply not work or am I doing anything wrong? Does anyone have a solution I could use?
In your controller
function Controller($scope){
var vm = this;
vm.form = $scope['tab' + anyNumber + 'Form'];
}
then in your html
ng-disabled="!FormCtrl.form.$valid"
Using the JEditable JQuery plugin, and everything seemed to work fine in Firefox. However, in Chrome whenever I selected something out of a JEditable dropdown, or clicked Enter when editing a JEditable textbox, the form JEditable creates on the fly was being submitted, and my entire page was refreshing. I didn't want that to happen, as I've got it configured to call a custom function that makes an Ajax call to do the update. How do you keep the JEditable form from being submitted when changing the value of one of the form inputs?
My understanding from researching online is this is a Webkit-browser issue, not just a Chrome issue, as it seems Webkit-based browsers automatically submit forms when inputs in the form are changed.
After much trial-and-error I found one way to get around this is to use JEditable's bind function. The bind function gives you access to the form JEditable creates, and you can hijack the onsubmit event with that.
So first, create a function to override the form's onsubmit event.
var bindSubmitDisableWebkitSubmission = function(settings, self){
$('form', self).attr("onsubmit", "return false;");
}
Then bind that function to the various JEditable events that you don't want to submit the form.
$.editable.types['select'].plugin = bindSubmitDisableWebkitSubmission;
Note that using preventDefault and returning false (see below) didn't work.
function bindSubmitDisableWebkitSubmission (settings, self) {
$('form', self).submit(function(e){
e.preventDefault();
return false;
});
}
I have a script I am making that is essentially a form that submits an email. There is a submit and a reset button. My goal I am hoping to accomplish is the the Reset button either reloads the Google Site, or reloads the App Script.
Is there a function in Google Apps Scripts that I can use to accomplish this?
By putting everything in a panel (horizontal, vertical, scroll, etc), you can do the following in your server handler for your form submit
app = UiApp.getActiveApplication().remove(0);
/*add whatever you want here using app */
return app;
This removes the first item in the app (the panel) and lets you add whatever.
You could also use a client handler with an initially invisible item. On submit, hide the form and show a message until the server handler returns.
Unfortunately, there is no way to refresh the page.
Edit: Adding what I wrote in the comment so it's readable:
The way I usually set mine up, doGet and the handler both call another function with arguments for the new/current app and whatever values my listboxes have. For example,
function doGet(e){
return actuallyCreateGadget(UiApp.createApplication(), "default value for listbox");
}
function actuallyCreateGadget(app, selectedValue){
//do stuff here and finish by returning app
}
function serverHandlerFunction(e){
return actuallyCreateGadget(UiApp.getActiveApplication().remove(0), e.parameter.lbFirst);
}