I'm trying to open a dialog from a separate component using the Quasar Dialog Plugin method described here, but when I click the button that should open the dialog, I get the following error in the console:
TypeError: Cannot read properties of null (reading 'show')
The solution was to add ref="dialogRef" to the opening <q-dialog> tag of my dialog component as shown here.
Here's a screenshot of the diff that got it working:
As you can see in the screenshot, I was also missing the #hide handler and the class="q-dialog-plugin" class on the opening <q-card> tag, but those wouldn't have prevented the dialog from loading (I checked).
Related
I have installed my application and it is running on following URL
http://localhost:3000
Above URL will the load form with some fields, Then I will the fill the data in the required field and then submit form. My div element will displayed at the bottom of the page. Picture will be displayed inside the iframe with in the div element.
User will the above URL and then submit form. After submitting the form, Picture should be downloaded into their local machine.
Right I am calling the following line after form submission, how can I get the existing page into the browser object and download screenshot?
browser = Watir::Browser.new
b.div(:id => "phone_shell").screenshot("/home/user/Documents/preview.png")
I found few problems in your code
screenshot method is not available for element object, it's available for browser object and also you need to call the method save to save the file in the destination folder. So write the following code, it would work.
Code to get the html of the page
b.html
Code to take the screenshot
b.screenshot.save("/home/user/Documents/preview.png")
Now this will save the image in the destination folder.
I try to write a web-component to create a simple login menu. it has paper-inputs for name and password and a button which fires a script to check the data.
the right data redirect to the next page while false credentials should open a toast element right above the button with an error message, siimilar to this one:
http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb
Select the paper-toast-element in the tree-view and check the 'opened'-checkbox get get a vision what I try to do and please excuse the strange style.
The problem:
I included this element in my main page, but the toast element is always visible right from the start. and it doesn't react to the button click if I move the toast away with css.
I don't wanna spam this page with my code, so I uploaded it here:
https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c
I appreciate any suggestion on how to fix the problem.
You cannot access the hidden shadow DOM of an element directly with jQuery's $ function, nor with document.querySelector. Also jQuery is not needed anyway. Use Polymer's automatic node finding utility instead: this.$.paper_toast.
You can access the paper-input values with this.$.name.inputValue. But i would prefer to use data-binding instead: <paper-input value={{name}}>. Then you can access the input value in your JavaScript with this.name.
The function to display the toast is show().
I'm unable to reproduce the issue that the toast is visible right after the page has loaded. On my computer the toast is initially hidden and displayed when i click on the button (Chrome 37, Polymer 0.3.3).
In line 76 you try to use an "open()" method, which does not exist on paper-toast. It should be "show()". You can find paper-toasr API here: http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast
Also, because the ids in shadow dom are encapsulated, you should be using the id selection mechanism from Polymer instead of jquery-style selector
this.$.paper_toast.show();
More on automatic node finding in Polymer: http://www.polymer-project.org/docs/polymer/polymer.html#automatic-node-finding
Here's jsbin (you might need to refresh as jsbin sometimes breaks with Polymer imports)
http://jsbin.com/fened/1/edit
Note: I am not wanting to display the PDF inline with the modal. Rather, I am looking to have the browser acknowledge the file and allow the user to save or open it.
I have a jQueryUI modal dialog in MVC 4. The dialog IS modal. The content of the dialog is from a Partial Views which works fine. I have only one button on the dialog itself and have successfully gotten all the JavaScript to deal with client side data entry checking.
What is giving me a headache is that I have one button embedded in the Partial View that is to display a PDF file. I can successfully call a JavaScript function that calls the controller that gets the file from another server. I can even get the file converted to a byte array and the last line is
return File(contents, "application/pdf", "PropsedChanges.pdf");
However it will not open as I suspect that the modal dialog is preventing it.
I have done something similar outside of the model dialog and it gives me the save/open option at the bottom of the screen for IE or in the correct manner in other browsers.
Is there a way to display the PDF in a registered PDF viewer on the client's PC/Device outside of the browser needing to ask if they want to save or open it? Which, as I suspect, is not happening due to the modal dialog.
Help is greatly appreciated.
public ActionResult GetPdf(Model modelo)
{
return File(Pdf bytes[], "application/pdf");
}
Try using a new window to open your PDF. Like target="_new" or "blank".
If you are using Asp.net 5, install MvcPdfActionResult via nuget
PM> Install-Package MvcPdfActionResult
Simply use return type as PdfActionResult in the controller will output PDF document instead of HTML. This converts HTML to PDF using the iTextXmlWorker Library.
...
return PdfActionResult(model);
}
Generates pdf documents from your razor views within an asp.net 5 MVC project. https://www.nuget.org/packages/MvcPdfActionResult/
I'm using the ckeditor plugin for grails (:ckeditor:3.6.2.2) and I'd like to reuse the File Chooser used to select images inside the rich text editor. I'd like to use it in a form for selecting images.
The plugin documentation makes me assume this is possible:
"If you just need the link to the file browser there is a fileBrowserLink tag:
Open file browser
If you want get back the path of the selected item in the file browser simply define a javascript function called ckeditorFileBrowserItemSelected in the page containing the opening link.
<script type="text/javascript" charset="utf-8">
function ckeditorFileBrowserItemSelected(path) {
// do whatever you want with path
alert(path);
}
</script>"
http://stefanogualdi.github.com/grails-ckeditor/docs/ref/Tags/fileBrowser.html
Unfortunately I'm not getting it to work. If I use the above approach to create a link, I'm getting an exception:
errors.GrailsExceptionResolver MissingMethodException occurred when processing request: [GET] /Admin/courseTemplate/create
No signature of method: Users_antonepple_NetBeansProjects_Eppleton_Relaunch_Admin_grails_app_views_courseTemplate_create_gsp.fileBrowserLink() is applicable for argument types: (java.util.LinkedHashMap) values: [[type:Image, userSpace:userone]].
I also tried using the fileBrowser Tag like this:
<ckeditor:fileBrowser type="Image" userSpace="userone">Open file browser</ckeditor:fileBrowser>
As a result the File Manager opens instead of the FileChooser I'm looking for. The File manager doesn't allow to select an image.
What am I doing wrong, and what can I do instead to reuse the File Chooser?
OK, I figured out how to do it. The documentation has a typo instead of this:
Open file browser
it should be:
Open file browser
An advanced grails user would probably have spotted this earlier :-). The second problem was, that there was no way to select an image in the file manager. But as soon as the FileManager is opened in a separate window it has an additional action in a files context menu allowing me to choose an image. So I just need to:
Open file browser
...or open fileBrowser in a dialog and this action becomes available...
I have integrated reCaptcha component in my JSF view (Primefaces) and I want to gather reCaptcha fails errors (blank or error values).
I have to use <p:messages/> component with for attribute because I have many <p:messages/> components (1 for tab in <p:tabView/> component) but when I define id attribute in my <p:captcha/> component and use that id in the for attribute of the <p:messages/>, it doesn't work. When I don't use for attribute to test, I see FacesMessage like :
j_idt16:j_idt69 : bla bla bla...
but j_idt16:j_idt69 id doesn't seem to exist in my generated HTML code...
If I use for="j_idt16:j_idt69" it doesn't work too...
So how can I dispatch captcha messages into proper messages component please ?
The Captcha provide by Primefaces didnt work for me. Please follow the following tutorial which solved my captcha problem using JSF 2 /Primefaces.
http://techzone4all.wordpress.com/2012/02/20/integrate-simple-captcha-to-web-project/
To address your specific need, you should define values for the validatorMessage,converterMessage and requiredMessage attributes on the <p:captcha/>, to be able to display user-friendly messages for their respective situations. FYI the <p:captcha/> component is processed during the submit of it's enclosing form, i.e it cannot be attached to a specific component or anything like that.
For clean message display, you should only place the captcha component in a <h:form/> along with other components relevant to the reCaptcha operation.