Please see the plunkr code demonstrating an issue I am seeing with the modal service in AngularJS.
Basically, I have moved the HTML contents for the modal window into a separate file, now when the button is clicked the backdrop appears but the modal window does not - on the first click.
If you then press escape to dismiss the backdrop and then click the button the modal window appears.
I am assuming that this is because the file is not loaded the first time when I click the button-but if so how do I use the templateUrl property to enable me to store the content for the modal window in a separate file?
Thanks for your help on this.
The issue does appear to be due to the separate file specified in the templateUrl not yet having been downloaded when the first click happens and I have now been able to work out a solution by adding the following line into the index.html file:
<div ng-include="'mymodalcontent.html'"></div>
This directive adds a reference to the file which loads the templateUrl so that when the button is clicked the first time the modal window will appear as expected.
Please note the value in the ng-include attribute has to have single quotes in order to work as detailed in the documentation for the ng-include directive. This detail is mentioned in the section named arguments and advises:
If the source is a string constant, make sure you wrap it in quotes
I have updated the plunkr code to include the fix.
The only downside to this is the original purpose behind moving the modal window contents into a separate file was to only download the contents if the user clicked the button thus saving bandwidth for users accessing the site on a mobile device.
Related
I create application on ruby on rails and add modal window for login. I put modal code in partial layouts/header. I expect it must work on every page of my app but not. Modal don't open in home/index. It's start work on home/about. I don't understand why. I'll update my ask If needs code. Can anyone help me understand?
I try to move modal code on another pages but get same effect.
home/index and home/about is URI?
Make sure you use the same layout (header file) and the modal element exist in HTML of home/index (you can use dev tool - f12 for checking)
Please, Does the modal need to be triggered by a button or something?
I've used Vuejs and Framework7 in my PWA. I want to open a remote PDF file in my PWA and also it's important to me that users be able to back to my PWA after opening PDF. I did this using :
window.open(pdf_url, "_blank");
And it works fine for iOS > 12 and after opening pdf file there is an "OK" button for closing pdf.
But for example in iOS 11.3 there is no button and user has to use home button to close PWA.
I tried to solve problem using iframe but I can show only first page of the pdf.
Is there any way to fix this issue?
You can resolve this issue by doing some tricks (for any device without back button):
if you use iframe, you can set height manualy with overflow scroll, and I think this will resolve issue (dependence of style or lib dependency, so that may be not work).
you can add back button to your navbar, or Toolbar to let user click on it to back to previous page. (I prefer this solution).
you can render pdf in popup nested of normal html page, and then you can customize popup component by handling back button, or handling close by dropback overlay.
I use second and third point in real project and its work fine...
This is sample close button code used in popup:
'<p>'+ i18nextHelper.i18next.t('Exit From PDF') +'</p>'
Note: You can also customize height page for pdf page only, and add normal button bellow it, or by add absolute positioning button above PDF, but I think if you use second or third point will be best.
Good luck.
Trying to understand how this "select2" Jquery plugin works.
I know it hides the regular select element and add it's own elements to provide some kind of a dropdown with search experience and when using "inspect element" i see the select2 container and all the other elements but when using view source i don't.
Can some one explain why is it? (Hoping to learn something new :)
Does view source shows only elements that was loaded on the first page load?
Ok, so my guess was in the right direction:
View Source shows you only the HTML it received from the server's
response. Your JS changes happen afterward.
Firebug and Chrome's debugger show you the source dynamically so you
can see the DOM and HTML as it has been changed. But view source will
only ever show you what the browser received from the server.
(Matt Pileggi - here)
I have a page which displays a calendar/diary and lets you navigate back and forth using a form so the URL often looks like:
calendar.php?&month=6&year=2014
The popup works fine initially before there is any string after the .php. However, once the "&month=" etc is there the popup doesn't work. I note as soon as the popup loads it shows up #&ui-state=dialog in the url.
Is there a simple solution for this? (Other than changing the form to method=post, which I haven't yet tried).
Many thanks.
The simplest solution is to add:
data-history="false"
to your popup <div>. That will avoid URL modification when the popup is open.
Inside a page called Program edit, there will be a button named Select image and as it is clicked, a Pop-up window will open which shows list of images. After selecting an image from the list and click to the Add button, pop-up will close up and selected pictures ID will be passed to main window. It should be available to use at program's params after closing image list popup.
Here is the scenario I would like to have.
Which way should I follow while doing this?
You need a version of responds_to_parent rails plugin. That can do the trick.
I've learnt that I can do it via JavaScript and AJAX. Similar to this: http://snipplr.com/view/7461/get-selected-value/