$('#modal-createUser').modal('show');
I am using this to pop up modal window for inserting record.
How to close this automatically after user saves data.
I tried this but it closes after just it opens.
$('#modal-createUser').modal('show');//goes to other component and perform insert opearation and comes back
$('#modal-createUser').modal('hide');
You have to write below code after getting API response.I hope it will helps you.
$('#modal-createUser').modal('hide');
First step you need install jquery and bootstrap by npm command.
Second you need add declare var $ : any; in component
And use can use $('#modal-createUser').modal('hide');
Demo https://stackblitz.com/edit/angular-model-bootstrap-close?file=src/app/app.component.ts
When you click on save button, you call a method and in that method, you may be doing API call using HTTP method. So, in success callback of HTTP you should put the following code:
$('#modal-createUser').modal('hide');
Or if you are not making a server API call, then just add above code to the last in save method.
$("#btnSubmit" ).click(function(){
// write ajax/ web api call to save data.
/*you can add condition using response object in case you don't
want to close it for any error/failure.*/
$('#modal-createUser').modal('hide');
});
$("form").submit(function(){
// write ajax/ web api call to save data.
$('#modal-createUser').modal('hide');
});
Related
Browser native confirm dialog doesn't look good.
I have ember route wherein taking user confirmation to proceed if there are any unsaved changes.
I wanted to change the dialog with bootbox confirm dialog but that doesn't stop the execution as bootbox.confirm() method is async.
willTransition: function(transition){
// model dirty checking logic to set flag value
if(flag){
if(!confirm("Do you want to leave this page without save?")){
transition.abort();
}
}
}
Note: ES6 is not used in project
Since it doesn't block, the only way to do this is to:
Act as if the user said "No" then
If they click "Yes": programmatically restart whatever it was that was cancelled at step 1.
In ember, I have a form which ask the user their username and password for our remote server and then I want to verify the credentials by making an ajax call. Currently, I am using a custom made component which allows me to bind any action on clicking next or submit where I can verify the credentials and throw errors if needed. But once an error will occur, user cant click the next button (the way component is implemented) and hence second time validation is not happening. So, I thought to make a computed property which will look for username and password (and hence make ajax call when entered). But the problem with this approach is: every time something is entered in these boxes, computed property gets triggered which makes an ajax call (i dont want to make so many network calls for no purpose). Is there a way in ember where we can wait for user to finish the input and then invoke any kind of action?
Better approach is to use oninput with action:
<input oninput={{action "onInput" value="target.value"}}>
and then from action onInput debounce call to ajax function using debounceTask from ember-lifeline addon(this example), or using ember-concurrency:
actions: {
onInput(val){
debounceTask(this, 'sendAjax', val, 500);
}
}
I have a component working pretty well and now I need to call it inside a controller.
Scenario: I have an ember application, and I have an update button controller, I did a component that just display a toast(Materializecss) with some message I pass as parameter to the component and both the button and the toast are working well separately. I need to call inside the button controller this component to display to the user if the update was successfully or not using this component I did. Any sugestion of how can I call this component inside the controller? Thanks
have a look at the ember-twiddle I created and see if it fits the bill, in regards to what you want to do ?
You should instead of thinking "calling the component", rather, how can I push updated attributes/data to the component.
Ember relies on the "Data Dow Actions Up" pattern. This implies that you cannot make an explicit call to a component action from a controller. (see https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up for example)
Instead, a better design should be to define a service to manage data : messages to be "toasted". Then make this service available by injecting in in your controller. You will be able to call methods to register a new messages and generate new data.
Provide also a component template (to be included in your own templates) that will be in charge to display the new message, etc. Each change in the data managed by the service will lead to a component template update.
You should definitely take a look to https://www.npmjs.com/package/ember-toastr
how can i access the content property of a controller within the chrome debugger.
I really try to find a way to debug my application. So far i can't find a way to do that.
Thank you
Alex
add the statement
debugger;
in the method you want to debug,
Open Google Chrome, CTRL+SHIFT+i
Hit the URL of your application, navigate to the state where you think the code would run
Google Chrome automatically stops at the debugger; statement and focuses you to the sources/scripts tab as you can see in the picture
Inside the Watch expression tab click on the "+" too evaluate code in your case it would be
this.get("content");
As long as you have this breakpoint you can switch to the console panel and execute the code in that context, whenever you are done you can either close the panel by clicking CTRL+SHIFT+I or the close button down there, you can add breakpoints manually by clicking on the line number as well , Hope this helps
For more info
I'm using Ember Extentions which is not ready yet but certainly usable.
There are 2 possibilities
Use the Ember Inspector Tool for Chrome: It is not officially released yet, but from what i have heard it seems usable. I had no time to try it myself yet, but here is an article telling you how to install and use it.
Get access to your controller in the console of your browser. And then examine it as you like. Here is the code to get access to your controller.I use it myself in my app for debugging:
// i assume that your Ember.Application is stored in the global var App
var App = Ember.Application.create({
getController : function(name){
return this.__container__.lookup("controller:" + name);
}
});
// now you can use it like this. To get the users controller (App.UsersController) just use this in the console:
App.getController("users")
I'm trying to display a webpage inside the web control, when I create the control programmatically all works perfectly, but when I create the control using the Ui Builder (XML) and then get the control and instruct it to load a url:
__pWebControl = static_cast<Web*>(GetControl(L"IDC_WEB1"));
__pWebControl->LoadUrl("http://www.google.es");
it just shows a blank page, like nothing has done.
(Note: I've tried to call form->RequestDraw() with no success either)
Thanks.
Did you try waiting about two seconds before the redraw?
I've been using Osp::Web::Controls::Web in my apps extensively to display any kind of (non-editable, formatted) text. I ended up having to wait about a second or two before refreshing the entire frame to see any content in it.
OnTimerExpired(Osp::Base::Runtime::Timer& timer)
{
m_pFrame->RequestRedraw();
delete pTimerImp;
}
the timer is set like this:
pTimerImp = new Timer;
pTimerImp->Construct(*this);
pTimerImp->Start(2000);
Redrawing without waiting has always resulted in empty Web's on both WQVGA (slower) and WVGA (faster) models under both 1.1 (WQVGA) and 1.0/1.2 (WVGA).
Have you tried doing the same trick? It may help.
Have you tried to use Reload() after LoadUrl()?
I use SDK 2.0.3 and there is a WebControl which works quite well, so if you still have this problem, try the new SDK Version.