I have a requirement to open a confirmation box on click on select2 dropdown and when popup gets open, background page should be disable. I have done below coding but when I click on dropdown it open the popup but at the same time it also open own dropdown.please see the screen shot for visual effect
Below code written in HTML for select2 dropdown.
<ui-select ng-model="selectedSectorModel.Selected" ng-click="ShowConfirm();" on-select="selectSectorEvents();" theme="select2">
<ui-select-match>
<span ng-bind="$select.selected.Text"></span>
</ui-select-match>
<ui-select-choices repeat="item in (industrySectorObject | filter: $select.search) track by item.Value">
<span ng-bind="item.Text"></span>
</ui-select-choices>
</ui-select>
Below code written to open popup in controller.In controller i have written code for ShowConfirm();
$scope.ShowConfirm = function() {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'scripts/app/popup/myModalpopup.html',
controller: 'MyCtrl',
backdrop: 'static',
keyboard: false,
resolve: {
items: function() {
return valueitem;
}
}
});
}
below code is for popup HTML myModalpopup.html.
<div class="container" style="overflow: hidden;">
<div class="row">
<div class="col-lg-12">
<div class="modal-header">
<h3 class="modal-title">Please Confirm</h3>
</div>
<div class="modal-body">
Some Text Here
</div>
<div class="modal-footer">
<button class="btn btn-warning css3linear" type="button" ng-click="ok()" autofocus>OK</button>
<button class="btn btn-warning css3linear" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
Below is Screenshot for the issue.
background is disabled but not dropdown and also dropdown open on the top of popup
Related
Let's consider the following page in a client side blazor app:
#page "/test"
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm Model="#model" OnSubmit="#SubmitHandler">
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model" id="editDT" Class="form-control" />
</div>
<button type="submit" class="btn btn-primary" #*data-dismiss="modal"*#>Submit</button>
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
private string model { get; set; } = "Model";
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
}
When I click the Open button, the modal appears as expected. Then clicking on the Submit button in the modal, "Submit" gets printed in the browser console, again as expected.
But I need also to close the modal when I click Submit so I uncomment the data-dismiss attibute.
Now, the modal closes as expected, but the Submit handler is not called anymore (browser console remains empty).
1) Is this the expected behaviour?
2) If yes, is there a way to close the modal in the Submit handler without javascript interop?
3) If not, is there another way to both close the modal and have the Submit handler called when clicking on the Submit button, again without js interop?
Your biggest issue is using bootstrap as is. BS uses it’s own JS to manipulate the DOM, this won’t work with Blazor as Blazor needs to control the DOM. Same as Angular, React or Vue. If something else modifies the DOM then odd things can happen, as you’re finding.
I would suggest swapping to one of the Blazor-fied bootstrap libraries such as BlazorStrap. Or if you’re just after a modal I’ve written one called Blazored.Modal
To make the form submit inside the bootstrap modal do the following:
Give your form an id
<EditForm id="my-form-ref">
Then add attribute form to the submit button with the value of the form id
<button type="submit" class="btn btn-danger" form="my-form-ref">Submit Form</button>
I guess that dismiss="modal" is viable only if you use <button type="button"></button>, but this would not enable "submission of the form". To really solve this issue, I'd suggest you use the <form> tag
and <button type="button"> tag instead.
But a better solution is to follow what Chris Sainty suggested in his answer.
I may add that it doesn't seem to me a good practice to embed the Bootstrap dialog box in Blazor, when such object can easily implemented in Blazor...
Hence, I would suggest that you yourself create a dialog-box component, a templated one, perhaps based on the Bootstrap dialog box...After all, I guess that like all of us, you are in the learning phase of Blazor. So it can be a good exercise.
Hope this helps...
All good suggestions. However, for the sake of completeness, I found a way to achieve what I wanted, even if it is a not very elegant workaround:
#page "/test"
#using System.ComponentModel.DataAnnotations;
<div id="modalDialog" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<EditForm EditContext="#EC">
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group d-flex justify-content-between">
<label class="col-form-label col-3" for="editDT">Time</label>
<InputText bind-Value="#model.Name" id="editDT" Class="form-control" />
</div>
#if (EC.Validate())
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary" data-dismiss="modal">Submit</button>
}
else
{
<button type="button" onclick="#SubmitHandler" class="btn btn-primary">Submit</button>
}
</EditForm>
</div>
</div>
</div>
</div>
<button data-toggle="modal" data-target="#modalDialog" class="btn btn-primary">Open</button>
#functions {
public class ModelClass
{
[Required]
public string Name { get; set; }
}
private ModelClass model { get; set; } = new ModelClass { Name = "My Name" };
private EditContext EC { get; set; }
private void SubmitHandler()
{
Console.WriteLine("Submit");
}
protected override void OnInit()
{
EC = new EditContext(model);
base.OnInit();
}
}
I viewed the answer Which Submit Button was Clicked in CakePHP?. That situation doesn't apply to me, because I have the same action for each button.
I want to reuse a bootstrap modal and I want to know which item was selected when the modal was invoked. Very simply, I have a table with grades for each school object. When the user clicks the add button, I want to invoke the modal and add a grade for that object. I want to know which object was selected, because I want to reuse the modal for all objects. How can I do that in cakephp 3.x ?
After a teacher wants to add a grade and press the + button how do I know if he/she selected Mathematics or English if I use the same modal for grade saving? .
okey, most simple way is in modal to have hidden field, which contains a subject. I think this has not much to do with cakephp.
Example should look like this:
function modalopen(subject) {
$('#modal #subject').val(subject);
$('#modal').modal('toggle');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-info" onclick="modalopen('english')">+</button>
<button type="button" class="btn btn-info" onclick="modalopen('math')">+</button>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id=""></h4>
</div>
<div class="modal-body">
sub (will be hidden):<br>
<input type="text" name="subject" id ="subject" value="" placeholder="will be hidden"><br>
Mark:<br>
<input type="text" name="mark" id ="mark" value="" placeholder="mark">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
</html>
The only way of determining which button was pressed is to use Javascript. This means not using the html-tag-option based method on the button to launch the modal, ie:
<!-- Button trigger modal: CAN *NOT* USE THIS TECHNIQUE!! -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
I assume the form inside your modal is a cake-generated form, and the submit button is a normal form submit, which triggers a redraw of the page, effectively killing the modal (IE there's no "modal takedown").
To keep as close as possible to Cake's paradigm, I would send it back to the server in a hidden form field.
Something like:
on the cake side in your ctp while creating your form:
// HTML WRAPPER FOR MODAL
<?= $this->Form->create(yourentity); ?>
(your form stuff)
<?= $this->Form->hidden("subject_id",["id"=>"subject-id-field"]);
(end of form stuff including submit)
<?= $this->Form->end(); ?>
// HTML WRAPPER FOR MODAL
This will generate something in your form like
<input type="hidden" name="subject_id" id="subject-id-field"/>
We'll need to grab this hidden field in Javascript, so I'm giving it both a name (form-specific) and an id (global), since I prefer referring to everything with #id-syntax, but you could also use form[name=subject_id] and get rid of the id clause
On the browser side in HTML, to create your buttons:
<button type="button" class="btn btn-primary" onclick="launch_dialog('MATH')">Add Math</button>
On the browser side in javascript, the function to call when the button is clicked, which sets the subject id in the form and then launches the modal/form:
<script>
function launch_dialog(subject) {
$("#subject-id-field").val(subject); // use the id of the hidden field
$("#your-modal").modal("show"); // or whatever you do to launch the modal
}
</script>
On the server side in the function that the form targets:
# in your controller php file
function formAction() {
if($this->request->data["subject_id"]=="MATH") { // use the name of the hidden field
// do math record
}
// etc
}
Another note - if your grade record really does have a subject_id field which belongsTo a Subject record, you can have the button's onclick function call the launch_dialog function with that constant, and then you won't need any IF function inside the server action code. Just make sure to use the original record to generate the id, eg:
In controller before render:
$this->set("subjects",$this->[entity]->Subjects->find("list");
In ctp file, something like:
<?php foreach($subjects as $id=>$name): ?>
<button type="button" class="btn btn-primary"
onclick="launch_dialog(<?= $id ?>)">Add <?= $name ?></button>
<?php endforeach; ?>
Hi I'm trying to click on this button that stays disabled until you fill in other fields. I am working with firefox. My script fills out those fields and the button is now clickable with my mouse. But when I try to click that element through selenium I get an error
WebDriverException: Message: Element is not clickable at point (281.8333282470703, 14.149993896484375). Other element would receive the click: <li ng-class="{active: $state.includes('urlAdm')}" id="adm-menu"></li>
Here is the html for the button.
<div class="col-xs-offset-2 col-xs-5">
<button type="submit" class="btn btn-primary ng-binding" ng-disabled="!userForm.$valid || user.deleted_at" disabled="disabled">
<i class="fa fa-check-square-o fa-fw"></i>
Create
</button>
<!-- ngIf: isAddUser() --><button ng-if="isAddUser()" type="button" class="btn btn-default ng-scope" ng-click="resetForm()">
<i class="fa fa-eraser fa-fw"></i>
Clear
</button><!-- end ngIf: isAddUser() -->
<!-- ngIf: !user.deleted_at && user.id !== currentUser.id && user.id -->
<!-- ngIf: user.deleted_at -->
</div>
I've tried regularly clicking on the button and doing it through actions but neither work.
Here is the code
element = driver.find_element_by_xpath("//*[#id='user-editor-1']/form/div[5]/div/button[1]")
ActionChains(driver).move_to_element(element).click().perform()
Any help would be greatly appreciated. Thanks!
You should try to click using execute_script() as below :-
element = driver.find_element_by_xpath("//button[contains(.,'Create')]")
driver.execute_script("arguments[0].click();",element)
Hope it helps....:)
I want to know how we can make modals which have routes.
In Trello, whenever you click on a card, the route changes from abc.com/b/personal to abc.com/c/some-random-string and the card opens in a modal. Also, when you close the modal, you get redirected to the previous url (abc.com/b/personal).
I want to know how can we achieve this using Emberjs.
Example: https://trello.com/b/ezWgKsol/sales-enterprise-feature-requests-sample
Here is my modal (using foundation) where we delete a record:
<div class="reveal" id="deleteLocationModal" data-reveal>
<div class="row">
<div class="columns">
Are you sure you want to delete this location?
</div>
</div>
<div class="row">
</div>
<div class="row">
<div class="columns">
<button id="cancelButton" class="secondary button" data-close type="button">Cancel</button>
<button id="deleteButton" class="button" {{action "deleteLocation" model}} data-close type="button">Delete</button>
</div>
</div>
</div>
The router has the falling in the actions hash:
actions: {
deleteLocation(model) {
Ember.assert("Params must be provided", model);
model.save().then(( /* response */ ) => {
this.transitionTo('locations'); //locations is my index page.
//flash message to inform the user of success.
});
}, (error) => {
//handle error.
// display flash message
// rollback any dirty attributes
});
}
I hope this helps,
Jeff
I am implementing modals as an ember component and I was wondering if and how could this be accomplished: If the content of the modal is coming from a different page, how would it be rendered as a template:
Example:
http://jsfiddle.net/koala_dev/NUCgp/918/
The script above opens a modal with this content:
http://fiddle.jshell.net/bHmRB/51/show/
But what if I wanted some extra data that depends on specific users, coming from the routes model? How would I insert something like
{{#each link in links}}
{{#link-to 'link.url'}}{{link.title}}{{/link-to}}
{{/each}}
into the remote page, so it would be rendered as a template, and not regular text?
Here is a very quick and easy example just to give you a right direction. You can play with it and parse the html to extract content (which is not relevant to the question).
You can setup a component for modal element. I've setup a component property (attribute) contentURL where you can set the url of the content.
Component handlebars
Notice the {{content}} which we used later in the action to save the ajax result. Action showModal is added on the link to execute the ajax call.
<script type="text/x-handlebars" id="components/bootstrap-modal">
<a data-toggle="modal" data-target="#myModal" {{action "showModal"}}>Click me !</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">{{content}}</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</script>
Component JS
App.BootstrapModalComponent = Ember.Component.extend({
/*initModal: function(){
}.on('didInsertElement'),*/
contentURL: null,
content: 'Content is loading...',
actions: {
showModal: function(){
var self = this;
var contentURL = this.get('contentURL');
if(contentURL == null){
this.set('content', '<p>No content url is given</p>');
}
console.log('get content from url > ' + contentURL);
$.ajax({
url: contentURL,
dataType: "html",
beforeSend: function(){console.log('before send');},
error: function(xhr, status, message){
console.log(message);
},
success: function (content) {
// parse and get the right html for the content
self.set('content', content);
}
});
}
}
});
Now you can call the component bootstrap-modal on your template like {{bootstrap-modal}}
For example:
<script type="text/x-handlebars" id="index">
{{bootstrap-modal contentURL="http://fiddle.jshell.net/bHmRB/51/show/"}}
</script>
jsFiddle example http://jsfiddle.net/sisir/NUCgp/1713/