I would liketo trigger a modal dynamically via typescript. I know this should be easy, so I'm probably looking over something.
Somewhere in Template:
<ng-template #adminmodal>.....Some content right here......</ng-template>
Component:
Trying to make a TemplateRef from the #adminmodal
#ViewChild('adminmodal', { read: TemplateRef }) _adminModalRef: TemplateRef<any>;
Trying to trigger and failing miserably
this.modalRef = this.modalService.show(this._adminModalRef);
It opens a modal, but with an empty modal-content, so there is something wrong with my approach.
Your approach should work, maybe there is a bug inside ngx-boostrap (https://github.com/valor-software/ngx-bootstrap/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+modal)
Another way according to the docs you could try is via the modalDirective
Template
<div class="modal fade" bsModal #modal="bs-modal">...</div>
Typescript
#ViewChild(ModalDirective) modal: ModalDirective;
showModal() {
this.modal.show();
}
Hope this helps you out, good luck!
Related
I need a help. I followed this tutorial https://www.dyclassroom.com/chartjs/chartjs-how-to-draw-line-graph-using-data-from-mysql-table-and-php.
I managed to start chartjs-plugin-zoom.
Now i want to add button "Reset zoom"
I fallowed this tutorial:
Add zoom event handler to charts for chartjs with chartjs-plugin-zoom
But when i add right after $.ajax({}); in app.js
$('#reset_zoom').click(function() {
mycanvas.resetZoom();
})
and press the button error is displayed:
app.js:131 Uncaught TypeError: mycanvas.resetZoom is not a function
at HTMLButtonElement.<anonymous> (app.js:131)
at HTMLButtonElement.dispatch (datatables.min.js:15)
at HTMLButtonElement.r.handle (datatables.min.js:15)
Can you give me an advice?
Kind of surprised this hasn't been answered yet. I remember running into this myself a while back. You are doing the same thing I was doing..
Effectively what you're doing is trying to run the .resetZoom() function on an HTML canvas element. You need to do this on the chart object, not the canvas element.
YouTube video walking you through it: https://www.youtube.com/watch?v=tWlENvyr9cY
Working CodePen: https://codepen.io/vpolston/pen/MWGVmrX
A couple examples of what not to do..
document.getElementById('myChart').resetZoom() // vanilla JavaScript
or even
$("#myChart").resetZoom() // jQuery
What you actually need to do is tack the .resetZoom() onto the Chart object from when you instantiated the chart. So in your code here:
const myChart = new Chart('myChart', {}
Whatever you set the variable to when you created the chart is what needs to have the .resetZoom(). So this would work:
myChart.resetZoom();
Now to make that a clickable button we can create a function. That function accepts whatever the chart Object was named.
JS
resetZoomBtn = (chart) => {
chart.resetZoom()
};
and then in our HTML we call that function and pass whatever you called the chart when you instantiated it as the parameter.
<div class="chart-container">
<canvas id="myChart"></canvas>
<button onclick="resetZoomBtn(myChart)">reset zoom</button>
</div>
Hopefully that helps anyone who views this question since it comes up at the top of the search results on Google. I know chances of it being marked 'answer' four years later are slim.
Thanks,
VP
I don't really get how to make a button click trigger my view function... I already googled, but nothing really helps me understand...
In my html, I have:
<a class="btn btn-large btn-info" href="{% url "device-detail" device.pk %}" name = 'rotateleft'>Rotate Left</a>
And in my views.py:
class DeviceDetail(DetailView):
....
def rotate_left(request, self):
if request.GET.get('rotateleft') == 'rotateleft':
print 'TEST!!!!'
self.image.open()
self.image.rotate(-90)
self.image.save()
If I click the button, the page seems to be reloaded as planned, but as 'TEST' is not printed (and the image is not rotated, but it might be that the code that is supposed to rotate it doesn't work yet, I wanted to call the function to see if it works), I'm guessing that this function is never called.
I am relatively new to Django and very new to the web interface side of Django, so help would be really appreciated!
You seem to be confusing a few things here. Clicking the link will "refresh" the DeviceDetail page as you noticed. Adding a name attribute on your HTML link won't however affect the request made to the server.
Based on what you are trying to accomplish it seems you should use a simple view function and perhaps read in a a GET parameter for deciding which way to rotate your image. Note that the parameters you pass to your view needs to be within the link URL, like:
href="{% url "device-detail" device.pk %}?rotate=right"
How can I access the text "All changes saved" in the dynamically created Ember script below? I use Protractor to create functional test.
<div class="is-muted">
<script id="metamorph-191-start" type="text/x-placeholder"></script>
<script id="metamorph-191-start" type="text/x-placeholder"></script>
All changes saved
<script id="metamorph-191-end" type="text/x-placeholder"></script>
</div>
Thank you in advance for your help!
I ran into a similar issue earlier and solved it in a rather unelegant manner but it does the job, try the following:
//$$('#metamorph-191-start') will select all the elements on your page with ID metamorph-191-start
//.get(1) will get the second element that passes this requirement aka the script with your text 'all changes saved' in it.
//the .getText().then(function(foo)... gets the text from the element and resolves the promise around it.
$$('#metamorph-191-start').get(1).getText().then(function(foo){
console.log(foo);
});
I said this was unelegant since it is quite the bad practice to use the same ID more than once on a single HTML page.
How do you Reveal a modal programmatically in Foundation 4?
In Foundation 3 we had the easy to use reveal() method.
What can you use in Foundation 4? Please help.
I am pretty sure you can simply use the .foundation method on your modal to call 'open' on it.. Something like:
$('#myModal').foundation('reveal', 'open');
e: Just checked the docs and yep, It's right there: http://foundation.zurb.com/docs/components/reveal.html
Look for "You can also open and close Reveal via JavaScript:"
Unfortunately, in Foundation 4 you must have this trigger link to open a modal =/ Unfortunately not because you'll have to write a lot more code (thats not true), but because this implementation isnt, let's say, pretty.
My code for the modal:
<!-- MODAL BOX START CONFIGURATION -->
<a class="reveal-link" data-reveal-id="modal"></a>
<div id="modal" class="reveal-modal medium">
<div id="modalContent"></div>
<a class="close-reveal-modal">×</a>
</div>
JS function to open and put some content into the modal
function openModal(url,params,text){
// If #url is not empty then we change the #modalContent value with the #url value
if(url !== '')
{
ajaxLoad('#modalContent',url,params);
}
// If #text is not empty then we change the #modalContent value with the #text value
else if(text !== '')
{
$('#modalContent').html(text);
}
// If both #url and #text are empty, then the #modalContent remains unchanged.
// Now we just show de modal with the changed (or not) content
$('a.reveal-link').trigger('click'); }
Hope it helps!
For programmatic (javascript) access the docs seem to only suggest launching via click event.
Add your Modal:
<div id="myModal" class="reveal-modal">
<h2>Awesome. I have it.</h2>
<p class="lead">Your couch. It is mine.</p>
<p>Im a cool paragraph that lives inside of an even cooler modal. Wins</p>
<a class="close-reveal-modal">×</a>
</div>
Set the trigger:
Click Me For A Modal
Activate trigger programmatically:
$('#my-trigger').trigger('click');
Admittedly it does seem like a work-around, maybe this is due to their heightened "lightweight/mobile-first" focus. Lets see what the next release brings.
$("#myModal").foundation('reveal', 'open');
I have a simple form that I want to be shown on a button click. i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
The first problem i am facing is:
using this code
function AngularUI($scope, $window) {
$scope.collapse = function (selector) {
angular.element(selector).collapse();
}
}
and
<div class="ang-ui-test">
<button ng-click="collapse('#collapsible')">
using angular.element
</button>
<div id="collapsible" class="collapse">
some thing in here ...... !
</div>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
simple collapsible
</button>
<div id="demo" class="collapse in">This one work properly</div>
</div>
the second one that does not uses angular.element.collapse works properly.
The second problem is : how do I test the behavior mentioned above.
on the first button press, the one that uses angular.element if the div is hidden it is shown but, it does not hide the collapsible after it is shown.
( i.e a button says "Add new User", then a the page expands and a form is shown, after the user finishes work with the form the form collapse back and a message is shown to the user.
thanks in advance.
You're doing it wrong. It's bad juju to do DOM manipulations in the controller because you are trying to look for / manipulate the DOM before it had a chance to render/refresh/update. Think of all the JS in the controller being executed in it's own phase, and THEN all the HTML is updated to reflect the final model state.
Try using ng-class="{collapse:someBoolExpression}"
You could also take a look at ui-hide, ui-show and ui-toggle (from AngularUI, but I think we should probably add a ticket to let you customize the class used.
Try to get the mindset of doing DOM manipulation manually out of your head. It takes a while, but once you get used to it your development speed picks up exponentially. When you finally hit a wall where Angular can't already do the job for you, start reading up on directives and checkout AngularUI's source code for some good, commented examples.