I have already designed the Ionic 3 modals. Now I would like to display some message ( Hello Modal ). How do I display the message inside the modal?
Below is my openModal code.
openModal() {
const myModal = this.modal.create('ModalPage');
myModal.present();
}
I would like to display the message using translate. In my case, the message will be set in en.json file, and from there I need to call the message in the HTML file. This is where I am stuck.
In ionic 1,I have something like ,
$translate(['USER_DATA']).then(function(translations) {
vm.userData=translations.USER_DATA;
}
And I will be calling vm.userData in my HTML which will display the message in modal. how do I achieve the same translate code in ionic 3
Its that simple.
import {TranslateService} from '#ngx-translate/core';
...
constructor(private translate : TranslateService)
...
this.translate.setDefaultLang('en');
This is just an overview. Please go-through this link to get a better idea.
They have clearly explained where to place en.json file and how to use it.
Happy Coding.
this.translate.get('here your message u want to translate').subscribe(res => {
const myModal = this.modal.create('ModalPage',res);
myModal.present();
})
In modalpage get the translated message by 'params.data()' and display as u want
Related
like I mentions in the topic I want to open code view inside my editor, not on separate modal window. I found similar topic and use some of the code from it:
TinyMCE Code Plugin - don't want to open code view in a modal dialog
I managed to do something like this:
const tinyDomUtils = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils');
const editorBody = editor.getBody();
const toggleCodeView = (isCodeView: string) => {
editorContent = editor.getContent({ source_view: !0 });
editorBody.setAttribute(codeViewAttribute, isCodeView);
if (editorBody.getAttribute(codeViewAttribute) === 'true') {
editor.setContent(tinyDomUtils.DOM.encode(editorContent));
editorBody.blur();
} else {
editor.setContent(tinyDomUtils.DOM.decode(editorContent));
}
};
And it works pretty good, I am able to switch between modes. The problem I have is that currently when I am on the code view, the user can hit "save" and then the content is display with all the html markup. I am trying to fix it just by some event listener to "Save" button and when user click it I am running my function again
toggleCodeView("false");
but then I get console error:
react-dom.development.js:22738 Uncaught TypeError: Cannot read properties of undefined (reading 'createRange')
at c.getRng (tinymce.min.js?5.0.0:6:15446)
at c.getNode (tinymce.min.js?5.0.0:6:16732)
at a.getBookmark (tinymce.min.js?5.0.0:6:8198)
at c.getBookmark (tinymce.min.js?5.0.0:6:13908)
at Object.add (tinymce.min.js?5.0.0:7:12595)
at A.i (tinymce.min.js?5.0.0:7:10860)
at t.i [as fire] (tinymce.min.js?5.0.0:8:4752)
at A.fire (tinymce.min.js?5.0.0:8:6637)
at A.save (tinymce.min.js?5.0.0:11:11915)
at A.remove (tinymce.min.js?5.0.0:11:15152)
I can't find any solution for this. Can anyone help?
so there is my problem.
I simply put a form in a dialog, when I open it for the first time it's all good, vuelidate works, errors if my fields are empty works too. I complete the form send it, it close the modal.
But then, when I open it to complete it again,errors are display for no reason :
Image of the error
<v-select
v-model="selectedDoctor"
:items="doctors"
item-text="username"
item-value="id"
:label="$t('components.homeCardTeleconsultation.doctor')"
:error-messages="
fieldErrors($v.selectedDoctor, $t('components.homeCardTeleconsultation.doctor'))"
return-object
/>
addTeleconsultant () {
this.$v.$touch()
if (this.$v.$invalid || this.isSaving) {
} else {
const query = {
xxxxx
}
this.$repositories.teleconsultations.create(query).then((reponse) => {
this.teleconsults = reponse.data
})
this.close()
}
It seems like vuelidate check if my fields are required when I open the modal but never the first time. I really don't understand what's going on so if someone have a solution or something...
Thanks !
Just one line this.$v.$reset()
How can i handle alerts and popups in playwright-java?
there are different methods in API like page.onDialog(), page.onPopup(), what is the difference between them and how can i generate a handle?
//code to launch my browser and url
Playwright playwright = Playwright.create();
Browser browser = playwright.chromium().launch(new LaunchOptions().withHeadless(false).withSlowMo(50));
BrowserContext context = browser.newContext();
Page page = context.newPage();
page.navigate("http://myurl.com");
//had to switch to iframe to click on upload button
Frame mypage = page.frameByName("uploadScreenPage");
//below line is triggering the alert
mypage.setInputFiles("//*[#id='fileUpload']",Path.of("C:\\myFile.jar"));
//using this code to handle alert, which is not working
page.onDialog(dialog -> {dialog.accept();});
unable to accept alert using the above code. also alert has occurred after clicking an element that is inside an iframe. how can i handle such alerts?
Dialogs are messages like an alert or a confirm, whereas popups are new pages, like the one you would get by calling window.open.
This is how you can use it :
page.onDialog(dialog -> {
assertEquals("alert", dialog.type());
assertEquals("", dialog.defaultValue());
assertEquals("yo", dialog.message());
dialog.accept();
});
page.evaluate("alert('yo')");
I am happy to answer this question. I encountered the same situation and find the solution. Please see below:
//Handling Pop-up or new page
Page pgdriver1 = pagedriver.waitForPopup(new Runnable()
{
public void run() {
pagedriver.click("text=\"Analiza\"");
}
});
pgdriver1.click("//button[normalize-space(#aria-label)=\"Close dialog\"]/nx-icon");
I hope this answer your question.
//listening to the alert
page.onDialog(dialog -> {dialog.accept();});
//next line will be action that triggers your alert
page.click("//['clickonsomethingthatopensalert']")
I have one .ts file for model. I want to execute some code when this model is dismissed(from model file itself).
All examples are about onDidDismiss() method which is written in model caller .ts file.I mean i have some db listeners in my model .ts file.
What i am trying to do is unsubscribe them when user dismisses the model window by clicking outside of model window.
You can use below method in your Model page :
dismiss() {
this.viewCtrl.dismiss();
}
and in this method you can write your code.
Ref Link : https://github.com/ionic-team/ionic/tree/v3/demos/src/modal
Ionic Ref : https://ionicframework.com/docs/api/components/modal/ModalController/
Hope this will helps!
You can publish event inside of onDidDismiss() and subscribe event from where you want.
Your modal page ts file:
import { ....., Events } from 'ionic-angular';
constructor(....,public events:Events){.....}
modal.onDidDismiss(()=>{
this.events.publish("modal:dismissed","data what you want to publish",Date.now());
})
subscription from anywhere:
import and inject again Events like in your modal ts file then;
this.events.subscribe('modal:dismissed', (value, publishTime) => {
//enter your code here
});
Presently, a messagebox appears with the failing class name:
Is it possible to override the default behavior in Alfresco? Could we use forms service to present a different message ?
Additional to zladuric answer,
you can use failureCallback method to show message what you want.
But it is difficult to search failureCallback method of workflow forms for a new one because workflow forms such as "Start Workflow", "Task Edit", "Task Detail" are used form engine.
For example, in "Start Workflow" form, you can add our own successCallBack and failureCallBack by writing onBeforeFormRuntimeInit event handler in start-workflow.js like this.
onBeforeFormRuntimeInit: function StartWorkflow_onBeforeFormRuntimeInit(layer, args)
{
var startWorkflowForm = Dom.get(this.generateId + "-form");
Event.addListener(startWorkflowForm, "submit", this._submitInvoked, this);
args[1].runtime.setAJAXSubmit(true,
{
successCallback:
{
fn: this.onFormSubmitSuccess,
scope: this
},
failureCallback:
{
fn: this.onFormSubmitFailure,
scope: this
}
});
}
onFormSubmitSuccess: function StartWorkflow_onFormSubmitSuccess(response)
{
this.navigateForward(true);
// Show your success message or do something.
}
onFormSubmitFailure: function StartWorkflow_onFormSubmitFailure(response)
{
var msgTitle = this.msg(this.options.failureMessageKey);
var msgBody = this.msg(this.options.failureMessageKey);
// example of showing processing response message
// you can write your own logic
if (response.json && response.json.message)
{
if(response.json.message.indexOf("ConcurrencyFailureException") != -1)
{
msgTitle = this.msg("message.concurrencyFailure");
msgBody = this.msg("message.startedAgain");
}
else
msgBody = response.json.message;
}
Alfresco.util.PopupManager.displayPrompt(
{
title: msgTitle,
text: msgBody
});
}
Since Alfresco.component.StartWorkflow(in start-workflow.js) extends Alfresco.component.ShareFormManager(in alfresco.js). You can override onBeforeFormRuntimeInit event in start-workflow.js. I hope this your help you.
I'm not looking at the code right now, but this looks like a regular YUI dialog. So it's fired by YUI. So this YUI is client side, probably in My-tasks dashlet or my tasks page.
Furthermore, the error message looks like it is a status.message from the failed backend message/service.
You could probably locate that client-side javascript file, find the method that starts the task and see what its' failureCallback handler is. Then edit that failureCallback method and make it show something different then the response.status.message or whatever it is. Perhaps something like this.msg("message.my-custom-error-message"); which you then customize on your own.
Modifying YUI dialog scripts will might affect the other functionalities as well.
If we customize start-workflow. js, its only going to be achieved in start workflow form.
So as generic solution, below is the suggestion.
When alfresco is rendering the workflow form , it is rendering the transition button using the activiti-transition.js file.Basically this buttons are doing nothing more but submitting the workflow form.
So the best way would be , customizing this activiti-transition.ftl and activiti-transition.js file , to make an ajax call and handle the response as we want.
I just had a look on full flow of how this front end error is shown.
activiti-transition is submiting the workflow form.
Using a function named as submitForm which resides inside alfresco.js, it is invoking an submit event of form
Inside the forms-runtime.js file there is one function named as _submitInvoked(handles the submit event of form), which is responsible for making an ajax call and submitting the workflow form.If there is error while submitting , it will display the error which is from backend.