Dialog (popup) bootstrap rendered by MVC - javascript

I use Bootstap table to present collection. In my table last column is button for details. After click on it, I want to display dialog, which will be filled by model from MVC action.
So, how can I do this:
Click on button in row (there is <a href='MVC_action\ROW_ID'>
MVC_action will be executed and return model
Model is pass to view and dialog is visible with filled data.

Do not use <a href> for the button. That will make a refresh on the page. Instead, create a button and add a javascript event handler, like <button onclick="detail(ROW_ID)">
The detail() function will call MVC_action\ROW_ID. The result from this call must be injected in a hidden div which handles the bootstrap dialog.
MVC_action returns a partial view with the content of the dialog.
After the injection, you must open the dialog.
Here you can see an example of an ajax call and a Bootstrap modal.
Greetings

Related

“Save and add another” option in a bootstrap modal

This is my first time asking a question here so if you need more information just let me know.
I’m using JavaScript with the handlebars framework.
I have a bootstrap modal which has a form in it. I have 3 buttons on this form (‘cancel’, ‘save’, and ‘save and add another’)
I need the ‘save and add another’ button to submit the form (Which adds the item to the DB), refresh the page behind it so that the list on the page shows the newly added item, and finally keep the modal open so that another item can be added.
I think I have a solution. This snippet is called on the form submit and as the callback of the DB function. I didn't need to refresh the view, just the list that I was changing.
modalPopup.on("hidden.bs.modal", function() {
if (addAnother) {
modalPopup.modal("show");
addAnother = false;
}
})
itemTable.bootstrapTable('refresh');
modalPopup.modal("hide");

I am using Angular which has a modal dialog which then has checkboxes. I am unable to make the checkboxes remember their selection

I am using Angular which has a modal dialog which then has checkboxes. I am trying to make the checkboxes remember the selection but unable to do so. Here's my HTML template below:
I don't want to include jQuery as another package in my modules. Can any one please assist?
Let me know if you need any other piece of code from my project. I am just trying to be short and precise
<mat-checkbox (change)="AllItemsChange($event) "[(checked)]="selectAllItems">{{this['groupType'] | pluralize}}</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let group">
<mat-checkbox [(ngModel)]=group.selected>{{group.name}}</mat-checkbox>
Following approach can get you there. I can't write the exact code as I would need to setup an Angular app but if you know #Input()/#Output() directives, I believe you can do it.
There are two components here.
Your current page -- You need to create a property (propA) that would store the selection bool of your checkbox in modal page.
Your modal page - Here, again, you need to have an input(this property is ngModel bound to your checkbox) and a output property.
When you click on modal open button from your main page, pass this value (propA) to the modal data, since initially it would be false, your modal checkbox will take its value and wont get checked. Now when you check it, or again uncheck it, your output property (which is basically like events -- button click, focus ) will get triggered and return the check/uncheck value back to your parent component and will get saved in propA.
Now when user closes the modal, and again tries to open it, the propA will have check/uncheck value and your modal checkbox would behave as it is intended.

Add a button to open pop up in jQuery Data Table

In my app, I used jQuery Data Table to show the results of a query made by form. I have now a new task: I must add, in this table, a column where for each row I have a button (or a link, no matter which of this 2).
The focal point is that when a user click this button or link, a popup must be open to allow the operator to modify some value in the db (so it's for this that I need a button for each row; every row may have a value to modify, or not).
The question is: how can I add this button/link and how can I force, after click, the popup opening?
You can do this like:
$('#data_table').DataTable( {
data: data
});
$(document).on('click', '#data_table tbody tr', function(){
// alert('hello');
$('#dialog').dialog();
});
Working Fiddle
Note: In this example I am using jquery ui dialog, you can use Bootstrap modal as well
Use bootstrap Modal. Bootstrap modal will allow you to do the operation you want

How to get data from calling page while in Ion Modal

On one of my pages (which has
<button class="button button-small button-balanced" data-ion-modal="reviewPopup">
leave review
</button>
in that Modal I have a form that, when I click a button for, should send data to the server from both the Modal and the template from template a. I can get data from the form in the Modal just fine, but I can't access any data from the calling page (specifically I need the _id). Calling Template.parentData just returns null.
Instead of triggering the modal from the template using data-ion-modal="reviewPopup", you can trigger the Modal from your button event, for example -
Template.templateName.events({
'click #review-popup': function() {
//capture data from parent template first
//....
var parentDataContext = {some data}
IonModal.open("reviewPopup", parentDataContext);
}
})
After the modal opens, the parent data can be accessed using this in the modal helpers.
I believe that Template.parentData (from the modal) will be returning either the body template, or another top level template specific to the meteoric framework. Either way,
If you were using a different framework where you specifically add the modal template to the page somewhere I'd suggest passing in _id as a template parameter.
But with meteoric, as far as I know, you can't do that - so you may have to use something with global scope.
If you are using a router, and have the _id as part of the route, get it from there (e.g. FlowRouter.current().params ).
Or just use the simplest option and use a Session variable. Set it in a onRendered function, access it in the Modal's event functions

Can I cache an empty form template as a second page in browser?

can I cache an empty form template as a second page in browser cache
so that when you click "create event" button on first page it immediately
opens empty form template without having a need to download the template
from the server as it's cached.
Just like CREATE EVENT button in Google calendar; which let's you to switch between calendar and new event form template.
Well, you can either use Javascript for building the new page from scratch when the respective action is invoked (probably quite tedious) or you can use an invisible section (e.g., a separate <div>) of the HTML page (style = display: none) and make it visible by changing its class to a visible style and making the original page invisible (change its style to display: none).
One way to accomplish this would be to load your second view into a hidden container. You can hide it with a simple CSS display property toggle, like this:
<div id="mySecondView" style="display: none;">
<!-- content of second view here -->
</div>
And on button click you can do this to unhide it:
With jQuery:
$('#mySecondView').show();
or
$('#mySecondView').fadeIn();
Without jQuery:
document.getElementById('mySecondView').style.display = '';
Of course you'll have to position the second view via CSS as you want it, otherwise it'll just pop up in some weird place that won't make sense.

Categories