I am using reactive forms and I have
parent component--- user click on name of file
Child component--- it pops out in bootstrap model.
Now in this popup, there is a button and want to capture that using
Parent Component
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<app-resource-create #dCTRLED ></app-resource-create>
</div>
</div>
here is the full code of the child component
ngOnInit(){
this.myform.controls['btn'].valueChanges.subscribe(test=>{
if(test){
this.isChecked=true;
}else{
this.isChecked=false;
}
});
}
Problem here is that this .valueChanges is not captureing the checkbox click.
What I want is whenever the checkbox is clicked then I want to show/hide the table row in the popup.
Related
I currently have a Bootstrap modal inside an x-for Alpine.js template. So, if I looped 5 users, the modal is rendered 5 times.
Similar to this:
<div x-data="initParent()">
<template class="parent" x-for="(user, index) in users">
<div>
<div x-text="user.name"></div>
<a id="modalForUser" href="#" data-toggle="modal" :data-target="#openModal-${index}">
Open Modal
</a>
<!-- MODAL -->
<div :id="openModal-${index}" class="modal fade" tabindex="-1" role="dialog">
<!-- Do stuff with user object-->
...
</div>
</div>
</template>
</div>
But the modal behavior is becoming complex, and I wanted to extract the HTML to a template partial with its own Alpine state.
This means:
a#modalForUser is clicked and sets the Alpine user variable
This user variable is passed to the Alpine component.
And here my problem begins...
If I just leave the new Alpine state nested inside the x-for, I can assess the user variable just fine, since it's nested inside the for-loop. However, it complains that the named x-data function is being repeated.
If I place the modal outside the x-for loop, I have trouble extracting the user from inside the looped element that has been clicked.
I sense the 2nd approach is more correct. I've tried using:
an eventListener on the modal's state's init method.
using the $dispatch magic method on the child anchor and the $watch on the modal state... but I must be getting it wrong.
My modal form successfully makes an Ajax request. The data received is displayed in the background. Invoking the modal is done by data-* attributes as bootstrap examples show here. But the modal is not getting dismissed. I tried to add
OnSuccess = "$('#searchForm').modal('hide');"
to my Ajax.BeginForm. But this doesn't remove the fade effect that modal cast on the background.
My View is:
<div class="modal fade" id="searchForm" tabindex="-1" role="dialog" aria-labelledby="searchFormLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="searchFormLabel">Search Here</h4>
</div>
<div class="modal-body">
#using (Ajax.BeginForm(new AjaxOptions
{
HttpMethod = "GET",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "results",
OnSuccess = "$('#searchForm').modal('hide');"
}))
{
// input fields and submit button are here
}
</div>
</div>
</div>
</div>
Am I missing something?
In this case, you are opening up the modal via data-attributes, and then closing it using jQuery. So, in a way both modal toggling methods are used, which are conflicting with each other. So, remove the data-attributes and show/hide the modal using jQuery only.
Try this:
$('#searchForm').modal('show'); //for showing the modal
For hiding on OnSuccess:
OnSuccess = "unloadModal"
Function unloadModal will be:
function unloadModal() {
$('#searchForm').modal('hide');
};
My scenario: Providing content of Bootstrap modal through MVC partial view and using Ajax POST-call in it.
What solved my case with automatically closing the modal after ajax-call is completed is a little "combo" of calls in the OnComplete/OnSuccess handler function:
function onAjaxCompleted()
{
$('#searchForm.close').click();
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
Hope this might help you as well.
Open a page in dialog style, the close button is added by default. Is there a way to catch the click event of the close button of the dialog page. I like to invoke a callback before the dialog page is closed.
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Page 1</h1>
</div>
<div role="main" class="ui-content">
This is Page1.
Show Dialog
</div>
<script>
function showDialog() {
$(":mobile-pagecontainer").pagecontainer("change", "#page2", { role: "dialog" } );
}
</script>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed" data-tap-toggle="true" >
<h1>Dialog</h1>
</div>
<div role="main" class="ui-content">
This is Dialog
</div>
</div>
The pagecontainerhide event can be used. but it did not work for ajax. If the dialog page is dynamically created in DOM, the ui.prevPage is not defined for the hide event.
Thanks for any help.
The close button is an anchor tag (<a></a>) in side a header element with class .ui-header inside a dialog container with class ui-dialog-contain. So you can use the jQuery selector:
".ui-dialog-contain .ui-header a"
When you handle the click event, you can get the parent page by finding the closest() DOM element with the ui-dialog class:
$(document).on("pagecreate", "#page1", function(){
$(document).on("click", ".ui-dialog-contain .ui-header a", function(e){
alert("close dialog: " + $(this).closest(".ui-dialog").prop("id"));
});
});
DEMO
I have following HTML
<div class='wraper'>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
<div class="demo statemachine-demo1">
<div class="w" id="inperson">IN PERSON
<div class="ep"></div>
</div>
<div class="w" id="rejected">
REJECTED
<div class="ep"></div>
</div>
</div>
</div>as per the above HTML the wrapper div contains two div each .demo div contains two div and are connected to each other .statemachine-demo1 .inperson div to .statemachine-demo2 .inperson(.statemachine-demo1.inperson ----> .statemachine-demo2.inperson) and .statemachine-demo1 .reject to .statemachine-demo2 .reject(.statemachine-demo1.reject -----> .statemachine-demo2.reject).
now if i drag class w the join line will move continuously, but what i want to know is their any way if i drag parent div statemachine-demo1 the child div reject and inperson class div should also move along with joined line continuously.
For this you need customised jquery draggable function instead of using jsPlumb.draggable() for parent div's. Whenever you drag a parent div, you need to check whether any of the child has connection, if so you need to repaint those connections. Code:
$('.demo').draggable({ // considering parent div has 'demo' class as in your case
drag:function(event){
// on drag check any child has connections and repaint them
$(this).find('._jsPlumb_endpoint_anchor_').each(function(i,el){
jsPlumb.repaint($(el));
});
}
});
I have a weird problem with a modal. It should be a absolutely normal modal that I can open and close many times, but I can open just one and also just close one time! http://plnkr.co/ksTy0HdifAJDhDf4jcNr
My index.html file looks this:
<body ng-controller="MainCtrl">
<div ng-include src="'widget.html'" ng-controller="WidgetCtrl"></div>
<!-- other widgets and content -->
</body>
As you can see I have devided my application in different parts (called widgets), that I am including per ng-include in my index html file. Every widget has it's own controller.
The widget.html looks like this:
<div modal="theModal">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
<!-- more modals and other stuff -->
<button ng-click="OpenModal()">open modal</button>
And now the widget controller (which is a child controller of the main controller)
app.controller('WidgetCtrl', function ($scope) {
$scope.OpenModal = function() { $scope.theModal = true; }
$scope.CloseModal = function() { $scope.theModal = false;}
});
All stuff for opening and closing the modal is part of the sub controller (WidgetCtrl) and therefore shouldn't conflict with anything from the parent controller.
$scope.theModal is in the beginning undefined, so the modal is not shown. With a click on the button $scope.theModal is defined and set to true; this is triggered by Angular UI and the modal is shown. On a click of ok, the now existing $scope.theModal is set to false and the modal disappears. Everything is perfect but .. it's not working again!
You just have to include close="CloseModal()" in the first div of your widget
<div modal="theModal" close="CloseModal()">
<div class="modal-header"><h3>The Modal</h3></div>
<div class="modal-body">
Body intentionally left blank
</div>
<div class="modal-footer">
<button class="btn" type="button" ng-click="CloseModal()">ok</button>
</div>
</div>
Here is a working plunker