Develop Reference

JavaScript : Piece of code that breaks my modals

I have a piece of code that will create a contextual menu on right-click on one input in my page. The code is supposed to add "{Keyword: }" to the input. The problem is when I add the JS below all the modals that I use stop working (not displaying). The modals are activated by a button click.
Contexctual menu HTML:
<div id='cntnr'>
<ul id='items'>
<li>{Keyword:fallback}</li>
<li>{KeyWord:fallback}</li>
</ul>
</div>
Contexctual menu JS:
$("#headline11").on("contextmenu",function(e){
e.preventDefault();
$("#cntnr").css({"left": e.pageX-3, "top": e.pageY-3});
$("#cntnr").fadeIn(200, startFocusOut);
});
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}
$("#items > li").click(function(){
$("#headline11").val($(this).text().replace("fallback", " "));
var input1 = document.getElementById("headline11");
setInputSelection(input1, 9, 10);
});
Button:
<button onclick="load();setTimeout(myFunction, 10)" class="myBtn1" data-toggle="modal" data-target="#build">1 - Create campaign</button>
The modal:
<div class="container">
<!-- Modal Preview-->
<div class="modal fade" id="build" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="modal-title">Your Campaign Preview1</h4>
</div>
<div class="modal-body">
<div id="hoursSaved"></div>
Some text here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
When I use {Keyword: Whatever here} in my input and submit, the modals stop working, but when I remove the JS above everything works, except the contextual menu of course.
It took me hours to debug my code and find what part of it is causing the problem, but I'm unable to understand why. Your help will be much appreciated.
Thank you,
EDIT: Here is a JsFiddle as requested in the comments. You'll have to run the code between each test to see the difference.
https://jsfiddle.net/yagami889/xpvt214o/470697/
You'll have to use the contextual menu to add the {Keyword:} you can enter whatever you want after ":", it won't work if you past it.

I found the answer. I had to use:
function startFocusOut(){
$("#cntnr").on("click",function(){
$("#cntnr").hide();
$("#cntnr").off("click");
});
}
Instead of:
function startFocusOut(){
$(document).on("click",function(){
$("#cntnr").hide();
$(document).off("click");
});
}

How to close & open a modal like Bootstrap

I want to create a modal like Bootstrap ...
I have wrote this codes :
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
But I have a problem in understanding how to close & open it. I put a data-target for button to match with Modal Box ID & I don't display the modal from the beginning ..., So I wrote this code but It doesn't work ...
$('.modal').css('display', 'none');
$('button').click(function(){
var boxID = $(this).data('target');
var modalBox = $('.modal');
var modalBoxAttr = modalBox.attr('id');
if('boxID' == 'modalBoxAttr') {
modalBox.css('display', 'block');
}
});

There a few mistakes with your code.
Mistake 1:
Here:
if('boxID' == 'modalBoxAttr')
You are currently checking the strings and not the objects. What you have written is the following:
If the string "boxId" is equal to the string "modalBoxAttr" do something. And both strings are not the same, so you get a false result.
Mistake 2:
You are complicating the code too much.
You can just simplify it like this.
$('button').click(function(){
var boxID = $(this).data('target');
var boxObject = $(boxID);
if(boxObject.length) {
boxObject.toggle();
}
});
.modal { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-target="#myModal" class="btn btn-primary">Open Modal</button>
<div class="modal fadeIn" id="myModal">
<div class="modal-header">
Roj Framework <span class="close-btn">×</span>
</div>
<div class="modal-content">
Hi, This Roj Framework !
</div>
<div class="modal-footer">
Continue ...
</div>
</div>
Use more often console.log() to debug your code and check if you are actually entering a specific section and if your logic is correct.

Try following approach.
Remove data-target="#myModal" from button
<button type="button" class="btn btn-primary">Open Modal</button>
Button click:
$('button').click(function(){
$("#myModal").modal('show');
}});

Modal only displays first image

I have got an issue where my modal only displays the first image. What I am trying to do is that i want to display a dynamic gallery. Every "post" can have 0-* images and based on how many images there are in the database for this post thats how many will appear. I came across this issue and have found others having similar issues but not exactly the same.
This code is basically a partial view where the post is generated. The Modal is displayd correct amount of times but only displays the first picture.
Thanks so much in advance
<ul class="imageRow">
#foreach (var item in Model)
{
<div class="col-lg-3 col-md-4 col-xs-6">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</a>
</div>
<div class="modal fade" id="image-gallery" 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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,#item">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script>
$(document.body).on('hidden.bs.modal', function () {
$('#image-gallery').removeData('bs.modal');
});
$(document).ready(function () {
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current) {
$('#show-previous-image, #show-next-image').show();
if (counter_max == counter_current) {
$('#show-next-image').hide();
} else if (counter_current == 1) {
$('#show-previous-image').hide();
}
}
function loadGallery(setIDs, setClickAttr) {
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function () {
if ($(this).attr('id') == 'show-previous-image') {
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if (setIDs == true) {
$('[data-image-id]').each(function () {
counter++;
$(this).attr('data-image-id', counter);
});
}
$(setClickAttr).on('click', function () {
updateGallery($(this));
});
}
});
</script>
}

You are using the same ID (id="image-gallery") for all of your modals. HTML element IDs are supposed to be unique! You need to generate different IDs for each of your modals.

Select box initialized after not working properly

I'm trying to get the value of a select box but it always bring me the first value.
At the begin the select is empty. I press a button that shows the modal and loads the info of the select box. I think the problem comes 'cause I'm not loading the select options until the button is pressed because I tried with another select and it worked well
this is the modal:
<div class="modal fade" id="myModalPremios" 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" id="myModalLabel">Premios</h4>
</div>
<div id="premios" class="modal-body">
<jsp:include page="../frag/premios-list-frag.jsp"/>
</div>
<div class="modal-footer">
<button class="btn btn-danger" aria-hidden="true" data-dismiss="modal">Ok</button>
</div>
</div>
</div>
</div>
this is the form inside the modal:
<form class="form-horizontal" role="form">
<div class="form-group">
<input type="hidden" id="id" name="quiniela.id" value="${quiniela.id }"/>
</div>
<div class="form-group">
<label for="plantillaOwnerQuiniela" class="col-sm-4 control-label">Quiniela</label>
<div class="col-sm-5">
<select class="form-control" name="quiniela.plantillaOwnerQuiniela" id="plantillaOwnerQuiniela" ${read }>
<c:forEach items="${lista2 }" var="pl">
<option value="${pl.id }"
<c:if test="${pl.id == quiniela.plantillaOwnerQuiniela.id}">selected="selected"</c:if>>${pl.nombrePlantillaOwner} - ${pl.precioQuiniela}Bs</option>
</c:forEach>
</select>
</div>
</div>
</form>
this is how i show the modal:
$("#myModal").modal("show");
I've read that maybe the element is not present in the Dom, then I've tried using this function to see if something happen but It doesn't work.
$('#plantillaOwnerQuiniela').on('change',function() {
var selectVal = $('#plantillaOwnerQuiniela :selected').val();
alert(selectVal);
});

Just a guess, but it seems like the plantillaOwnerQuiniela element is not present in the DOM at the time you are binding your change listener.
Try the following:
$("body").on("change", "#plantillaOwnerQuiniela", function(e){
var selectVal = $(e.currentTarget).val();
alert(selectVal);
});
Use .on() to attach the listener to body and delegate it to the select, vs. attaching to the select itself; which may or may not be present on pageload.

You should bind the change event to the popover initialize method like this:
$('.button').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
}).parent().delegate('#plantillaOwnerQuiniela', 'change', function() {
alert($(this).val());
});
Here is the example !

I fixed my own problem by including the modal-body class when trying to read the value of if. Like this:
$('.modal-body #plantillaOwnerQuiniela :selected').val();

Reset bootstrap modal

So, I am using bootstrap's modal.
I want to make a wizard style modal and came up with the following solution:
div snippets:
<div class="modal-instance hide fade" id="step1">
<div id="stepa">
...
</div>
</div>
<div id="stepb" style="display: none;">
...
</div>
Upon pressing a button in step-a step-b is loaded.
javascript snippet:
$("#stepa").replaceWith($('#stepb'));
document.getElementById('stepb').style.display = 'block';
This works ok.
But when I dismiss the modal. The div stepa has still been replaced by stepb. My solution was to build a replacement back to stepa when the modal is hidden:
$("#myModal").on("hidden", function() {
//replace the child
});
I tried:
$('#step1').children().remove();
$('#step1').append($('#stepa'));
and
$("#step1").children("div:first").replaceWith($('#stepa'));
But I am having a hardtime selecting step-a as a replacement div, probably due to it not being a separate div. My question is, is this the right approach for a wizard styled modal or should I take another approach?

It's much simpler just to hide the previous and next steps, instead of copying them.
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div id="myModal" class="modal hide fade" data-step="1">
<div class="step step1">
<h1>Step 1</h1>
<button class="btn next">Next</button>
</div>
<div class="step step2">
<h1>Step 2</h1>
<button class="btn previous">Previous</button>
<button class="btn next">Next</button>
</div>
<div class="step step3">
<h1>Step 3</h1>
<button class="btn previous">Previous</button>
<button class="btn done" data-dismiss="modal">Done</button>
</div>
</div>
<style type="text/css">
#myModal > .step { display: none; }​
</style>
<script type="text/javascript">
$(function() {
showStep(parseInt($('#myModal').data('step')) || 1);
$('#myModal .next').on('click', function () {
showStep(parseInt($('#myModal').data('step')) + 1);
});
$('#myModal .previous').on('click', function () {
showStep(parseInt($('#myModal').data('step')) - 1);
});
$('#myModal').on('hidden', function() {
showStep(1);
});
function showStep(step) {
$('#myModal').data('step', step);
$('#myModal > .step').hide();
$('#myModal > .step' + step).show();
}
});​
</script>
http://jsfiddle.net/7kg7z/5/