I created the popup when I am trying to call action on click for close pop up icon no change is shown.
In index.html in bottom there is code for pop up, this will be shown when user will click on change zip code link.
<!-- Pop up div -->
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
<!-- html of change zip code -->
<div class="hidden" id="updateZipContent">
<div class="zipContent">
<div class="padding-bt-2">Please enter new zip code</div>
<div class="row">
<div class="text-left col-md-6 padding-bt-2">
<input ng-model="zipCode" type="text" class="form-control" maxlength="5" data-required="true" number-only>
</div>
<div class="text-left col-md-4">
<button class="btn btn-primary form-control">Update</button>
</div>
</div>
</div>
</div>
Change zip code action is written in autoQuotectrl.js
$scope.changeZipCode = function()
{
$rootScope.myModal = true;
var firstDivContent = document.getElementById('updateZipContent');
var secondDivContent = document.getElementById('dynamicContect');
secondDivContent.innerHTML = firstDivContent.innerHTML;
}
To keep other action separate I wrote new controller utilityCtrl.js.
Here I wrote action for hide this popup .
$scope.closePopup = function ()
{
console.log('here in utility');
$rootScope.myModal = false;
document.getElementById('dynamicContect').innerHTML = "";
}
But nothing is working, please help me to understand what I am missing here.
It seems $rootScope.myModal is not accessible in utilityCtrl
You don't invoke function closePopup in template.
See example on plunker.
<div class="popup" ng-show="myModal" ng-controller="utilityCtrl">
<!-- Modal content -->
<div class="popup-content">
<span class="close" ng-click="closePopup()">×</span>
<div class="dynamicContect" id="dynamicContect"> Loading ...
</div>
</div>
</div>
they are in two controller,so the $scope is diferent ,you can use $rootScope.$broadcast and $scope.$on
Related
I have a modal window build with CSS. The modal can be closed by clicking outside of it.
My solution to open the modal works, closing the modal works too, when the event listeners are added to the page separately. However, they don't work together. When both the listeners are added to the page, the modal won't open.
How can I make them to work together?
HTML
<a href="#openModal" id="modal-window" class="event test">
<div class="shorten-long-text test">
</div>
</a>
<div id="openModal" class="modalDialog Dialog1">
<div class="myModal">
<div class="modal-header">
</div>
<div class="modal-body row">
<div class="col-xs-6" >
</div>
</div>
<div class="modal-footer uppercase color-main">
</div>
</div>
</div>
JS
$(window).click(function(ev) {
if($(ev.target).attr('class') != ".Dialog1" ) {
$(".Dialog1").removeClass('isOpen');
$(".Dialog1").addClass('isClosed');
}
});
$(".test").click(function() {
$(".Dialog1").removeClass('isClosed');
$(".Dialog1").addClass('isOpen');
});
Use toggleClass()
html:
<div id="openModal" class="modalDialog isClosed Dialog1">
js:
$(window).click(function(ev) {
if(!$(ev.target).is('.Dialog1,.test') $(".Dialog1").toggleClass('isClosed isOpen');
}
});
$(".test").click(function() {
$(".Dialog1").toggleClass('isClosed isOpen');
});
Suppose there is a .NET Bootstrap form with multiple input buttons. When a User presses the Enter key, the default button value is sent to the Controller regardless of in which panel the User is modifying data. I think the code determines which panel is active and which button corresponds to that panel, but how does one send the correct panel's button value to the Controller? $closestButton.Submit(); did not work and I can't find the answer searching the questions here. Thanks in advance!
The Controller:
[HttpPost]
public ActionResult SaveData(SaveDataViewModel model, string buttonCommand)
{
if (buttonCommand == "Save Basics")
{
//Do stuff
}
else if (buttonCommand == "Save Owner")
{
//Do other stuff
}
return View();
}
The View:
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is the default button upon pressing Enter key, and its value is always sent to the Controller -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Finally, the script that detects which button was pressed, but can't set the value of "buttonCommand":
$(document).keypress(function (e) {
if (e.which == 13) {
var $activeElement = document.activeElement.id;
var $closestPanel = $($activeElement).closest('panel');
var $closestButton = $($closestPanel).children('input[type=submit]');
//Got the intended button, now how to send its value?
}
});
The answer here was: a) capture a keypress event and test whether it's the Enter key; b) if it is, call a function to prevent default behavior; c) get the active element; d) get the id attribute of the closest panel; e) check if the panel name equals one of the panel names of the page and call a .click() on that panel's button id.
First, my bootstrap modal is like this:
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<-- modal
header -->
<div class="modal-body">
<form class="form-horizontal" id="composeForm" method="POST" action="composeMessage">
<div class="form-group">
<label class="col-sm-2 control-label">To</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="sendToId" name="requestId">
</div>
</div>
<div class="line line-dashed b-b line-lg pull-in"></div>
<div class="form-group">
<label class="col-sm-2 control-label">Message</label>
<div class="col-sm-8">
<div class="btn-toolbar m-b-sm btn-editor"
data-role="editor-toolbar" data-target="#editor"></div>
<div id="editor" class="form-control" style="overflow:scroll;
height:150px;max-height:150px" contenteditable="true"></div>
<textarea style="display:none" id="divText" name="message"></textarea>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" id="sendSave" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
and my Javascript so far is like this:
$(function(){
var message;
$("#myModal").on('show.bs.modal', function(event){
var atag = $(event.relatedTarget); //I'm using a tag to open modal
var userNick = atag.data("nick");
var userComp = atag.data("comp");
var modal = $(this);
/*
skipped all dynamically setting values & changing attributes of tags
*/
document.getElementById("divText").value = document.getElementById("editor").innerHTML;
message = document.getElementById("divText").value;
});
$("button.btn.btn-primary").on('click', function(){
alert(message);
});
});
First, I have foreach loop in the same JSP, and the anchor tag opening the modal is in it. So I have multiple anchor tags.
The anchor tag opening modal is like this:
<a href="#myModal" data-target="#myModal" data-toggle="modal"
data-nick="${f.recomUserNick}" data-comp="${f.compatibility}">
I managed to set values and change attributes dynamically, and now I'm trying to send data from modal to controller (Spring MVC).
However, I have problem getting the 'message'. In the modal, the client writes something, and I first want to get the string value of that and check on alert to see if I can later send it to controller. What happens is that when I first open the modal, write something in it, and click the button (in the modal-footer, with id="sendSave"), I can't get the message. I close the modal, open it again -- in the message area it has what I wrote. I click the button, then I see my message in the alert window.
First, when I reopen the modal, I don't want to see what I wrote before, and I want to get the string value the first time, without having to open the modal again. I don't have a problem getting the string value, so I thought the problem was about where I put the codes, so I shifted my codes around for hours with no success. Can you please tell me how I should fix my codes? Thanks in advance.
You set the 'message' var in $("#myModal").on('show.bs.modal'.
At that point (in the first show) the message hasn't been typed yet.
If you move that code to the clickhandler, it takes the message after you have typed it:
$("button.btn.btn-primary").on('click', function() {
document.getElementById("divText").value = document.getElementById("editor").innerHTML;
message = document.getElementById("divText").value;
alert(message);
});
I'm having some trouble making a working show div and I just can't get it.
So I have the following:
function GetCaptcha() {
$(".panel-captcha").fadeIn(500);
}
Get
<div class="panel-captcha">
TEXT
</div>
The div has the display:none tag.
It works very well, but I have one problem. I need to have many divs inside the same page ( not the same, it may change from database ). If I have 3 or 4 panels, when I click the button it will show them all instead only the div where I have the link to show.
Anyone can help me? Thanks.
Complete HTML file...
<div class="col-md-4">
<div class="panel panel-blue" data-widget='{"draggable": "false"}'>
<div class="panel-heading">
<h2>TEXT</h2>
<div class="panel-ctrls">
<i class="ti ti-eye"></i>
<!-- BUTTON TO SHOW CAPTCHA -->
</div>
</div>
<div class="panel-body">
<small>Other Text...</small>
</div>
<div class="panel-footer">
<div class="tabular">
<div class="tabular-row tabular-row">
<div class="tabular-cell">
<span class="status-total"><strong>More Text...</strong></span>
</div>
<div class="tabular-cell">
<span class="status-pending">Other Text...</span>
</div>
</div>
</div>
</div>
<div class="panel-captcha">
<!-- HIDDEN DIV -->
<div class="tabular-cell">
HIDDEN TEXT
</div>
</div>
<!-- END HIDDEN DIV -->
</div>
</div>
You can pass the reference of element to click handler, then use .next()
Script
function GetCaptcha(elem) {
$(elem).next(".panel-captcha").fadeIn(500);
}
.panel-captcha {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Get
<div class="panel-captcha">
TEXT
</div>
As you are using jQuery bind event using it.
HTML
Get
<div class="panel-captcha">
TEXT
</div>
Script
$(function() {
$('.captcha').on('click', function () {
$(this).next(".panel-captcha").fadeIn(500);
});
});
EDIT
As per updated HTML use
function GetCaptcha(elem) {
$(elem).closest('.panel').find(".panel-captcha").fadeIn(500);
}
plz help me(beginner) to solve a problem.
I am coding a site with bootstrap 3. I have bootstrap thumbnail on it.
when user will click an specific link in the thumbnail, it will show in an modal/popup.
modals primary contents will be same with the thumbnail was clicked.
but there will be two button (next, previous) in the modal, by clicking them, user will view the next or previous thumbnail.
There is an large image on each thumbnail which is hidden in thumbnail view, but will show in the modal view.
by clicking next or previous buttons, the large image, n the description part will change accordingly(like carousel).
The whole functionality is like lightbox. I have seen different jquery lightbox plugin, but either they are only with image preview,
or heavy weight. Plz help me with the issue. I know the html/css well. so, i can fix any css issue, i need the jquery functionality.
Please don't answer with just a lightbox plugin link, i want to use the basic jquery.
Here's the thumbnails in my html:
<div class="container" id="lightbox">
<div class="row">
<div class="lightbox-thumbs-wrap">
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image1.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
<div class="col-xs-12 col-sm-6 col-md-3">
<div class="thumbnail">
<div class="tmb-outer">
<div class="tmb-gray">
<img src="img/xyz/small-icon2.png">
<h3>Description heading2</h3>
<p>
Description2 details here.
</p>
</div>
<a class="tmb-button">Click to open lightbox</a>
<img src="img/xyz/large-image2.png"> <!-- this image hidden in thumbnail, but will show only in modal -->
</div>
</div>
</div> <!-- ********* end thumb *********** -->
</div>
</div>
And, the modal i want will look like:
<div class="modal">
<div class="overlay"></div>
<div class="modal-wrapper">
click to close modal
<div class="container-fluid">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="img/xyz/small-icon.png">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="img/xyz/large-image1.png"> <!-- large slider image, it was hidden in thumbnail -->
<a class="next-img"><img src="img/xyz/next.png"></a>
<a class="prev-img"><img src="img/xyz/prev.png"></a>
</div>
</div>
</div>
Firstly note that you should describe the problem and what has been done so far to solve it when posting a question on SO.
Secondly read Varying modal content based on trigger button at Bootstrap's docs.
And than, i think you should create one modal and change its content dynamically onload, and after pressing the previous / next images (buttons). I create an example that can be found at: http://jsfiddle.net/esLad6x8/
First create a array of object that describe your images / thumbs:
var images = new Array();
for (var i=0; i<10; i++) {
images.push({img: 'http://dummyimage.com/600x400/000/fff&text=image' + i, thumb: 'http://dummyimage.com/100x100/000/fff&text=thumb' + i, head:'heading' + i, description:'Description' + i + ' details here.'});
}
Alternatively you could read the above information from your thumb's grid.
html of the modal
You should use Bootstrap's modal classes to use the modal jQuery Plugin, see: http://getbootstrap.com/javascript/#modals
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<div class="col-sm-12 col-md-5">
<div class="tmb-gray">
<img src="">
<h3>Description heading</h3>
<p>
Description details here.
</p>
</div>
</div>
<div class="col-sm-12 col-md-7">
<img src="" class="img-responsive"> <!-- large slider image, it was hidden in thumbnail -->
<a class="prev-img btn btn-primary">Previous</a>
<a class="next-img btn btn-primary">Next</a>
</div>
</div>
<div class="modal-footer"> </div>
</div>
</div>
</div>
A button to open the modal can look like that shown below:
<button type="button" class="openmodal btn btn-primary btn-lg" data-thumb="0">
First Thumb
</button>
The on click event of the above button:
$('.openmodal').on('click',function(){
setModalContent($( this ).data('thumb'));
$('#myModal').modal('show');//pop up modal
});
The setModalContent function used in the preceding code can look like as follows:
function setModalContent($thumbNumber) {
$('#myModal .tmb-gray h3').text(images[$thumbNumber].head);
$('#myModal .tmb-gray h3 + p').text(images[$thumbNumber].description);
$('#myModal .tmb-gray > img').attr('src',images[$thumbNumber].thumb);
$('#myModal .modal-body img').last().attr('src',images[$thumbNumber].img);
/* set next and previous buttons */
$('.prev-img').data('thumb',($thumbNumber - 1 >= 0) ? $thumbNumber - 1 : images.length - 1);
$('.next-img').data('thumb',($thumbNumber + 1 < images.length) ? $thumbNumber + 1 : 0);
}
And finally create the click events for the previous/next navigation, which only change the content of a already opened modal:
$('.modal').on('click','.prev-img',function(){ setModalContent($( this ).data('thumb'));});
$('.modal').on('click','.next-img',function(){ setModalContent($( this ).data('thumb'));});