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 change text inside modal using jquery?

I am using this modal:
<div id="myalertbox" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal">×</button>
You have a new notification!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
Which pops up and says "You have a new notification!". I pop it up by using this script:
<script>
function showAlert() {
$("#myalertbox").modal({
"backdrop": "static",
"keyboard": true,
"show": true,
});
}
</script>
I dont know how to change the text inside though? I tried with .text and .html but it doesn't work.

Change text before calling the modal as
$("#myalertbox .modal-body").text('pass your text here');

Before initiating the modal, you can change its html like:
$("#myalertbox .modal-body").html('pass your html here');
// It will put your html inside the div having Class .modal-body which is enclosed with a div having ID #myalertbox
and after that initiate its modal as usual way.

As the content is not nested into any tags.
It's better to use this one below.
var btnHtml='< button type="button" class="close" data-dismiss="modal">
&times ;< /button>';
$('#myalertbox .modal-body').html(btnHtml +"your text here");

Getting the id of the anchor tag which was clicked

This is a list representation of data which is coming from a php database.The list is fetched using a foreach php loop and the data inside the achor tag is populated accordingly.
<?php foreach($array as $iterate):?>
<div class="col-sm-3">
<div class="panel panel-default">
**<a onClick='theFunction();' id="hello" href="#myModal" style="text-decoration:none;">**
<div class="panel-heading">
<img src ="audi_sillhouete.jpg" style="height:100%; width:100%;">
<p id="10" style="position:absolute; top:10%; padding-left:5%; padding-right:15%;"><?php echo $iterate->test_name ?></p>
</div>
</a>
</div>
</div>
<?php endforeach;?>
As you can see here, inside the anchor tag i have href-ed it to a modal box which will show a message whenever the user clicks on any of the link. There is a button in the modal window which will take the user to a different page.
The issue is that i want to pass certain value along with the url, but cannot do so as the link to the next page is defined in the modal window specification part.
So i came up with this solution. I thought of using the id attribute of the anchor tag, I tried to get the id attribute of the anchor which was clicked using javascript.
<script type="text/javascript">
function theFunction()
{
var id = $('a', this).attr('id');
alert(id);
}</script>
From this i wanted to initialize a php variable and then use that php variable to pass as value in the href of the modal window button. But the value i am getting in the alert box is 'undefined' for some reason. I have tried all possible combinations of this.
$('a',this).attr('id');
$this.id;
Everything return 'undefined'.
Reference-This is the code for the modal window part.
<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">Instructions</h4>
</div>
<div class="modal-body">
Your test is about to commence. A timer will be initiated after the moment you start the test. You may choose to answer a question, or leave it empty. You can also attempt the questions in any order that you find suitable.<br><br>Upon completion of the test, click on "Submit" to see your performance statistics.<br><br><br>Good luck!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Continue</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Please try this
$(document).on('click', 'a', function () {
alert(this.id);
});
DEMO

You can use other attribute in anchor like :
<a href='' id='hello' para-id='somevalue'></a>
alert($("#hello").attr("para-id"));

The below jQuery function runs through all the a tags on page load and adds id to the end of the link.
$(function(){
$('a').each(function(){
var id = $(this).attr('id');
var url = $(this).attr('href') + '?id=' + id;
$(this).attr('href',url);
});
});
https://jsfiddle.net/yc1hswet/

Clicking sub menu pop up a modal in wordpress plugin

I am working on a Wordpress plugin where I want to open a pop-up modal when I click on one of my plugin sub-menus. I can trigger the modal using a link or a button, but I want to load the modal at the time I click on the submenu.
Code for menu and submenu:
<div class="wp-menu-name">Smart Form Builder</div>
<ul class="wp-submenu wp-submenu-wrap">
<li class="wp-submenu-head">Smart Form Builder</li>
<li class="wp-first-item">
<a class="wp-first-item" href="admin.php?page=smart-form-builder">Create New Form</a>
</li>
<li>
Form List
</li>
<li>
Support
</li>
</ul>
</div>
Code for my model:
<div class="modal fade" id="modal_choose_ur_form" tabindex="-1" role="dialog" aria-labelledby="modal_choose_ur_formLabel">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><h3>Choose Your Form</h3></h4>
</div>
<div class="modal-body">
Click
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now i want to pop up the modal when i click on Create New Form submenu. So what i have code in my sfb_create_form_page function?
I tried using various way of using javascript like
<script type="text/javascript">
$(document).ready(function () {
$('#modal_choose_ur_form').modal('show');
});
</script>
this is working for a simple HTML page quite well but not for my plugin. What can do can anyone help?

Here you go. Link
You need to fire click event on ul li . And open popup when click event is generated.
$(document).ready(function () {
$(".ulLiOuter ul li").click(function(e){
e.preventDefault();
$('#modal_choose_ur_form').modal('show');
});
});

I am using like this.
Go to wp-admin/nav-menus.php page and open the "Show Settings" from top, Check the (XFN) checkbox then write to xfn input some rel value "like a modal" than add your .js file this code
$('a[rel="modal"]').click(function () {
$("#modal-id").modal();
});

Passing Data to Bootstrap Modals

I am trying to create a simple modal using twitter bootstrap. The function of that modal is to take the name of the link clicked on, and use that name as a header. Each of the names are in a Django Database. I followed this link for reference: Passing data to a bootstrap modal
#Button to toggle modal
<a data-toggle="modal" data-id="{{ name }}" title="Add this item" class="open- AddBookDialog " href="#addBookDialog">{{ name }}</a><br />
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
#JavaScript
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
$("modal-body #nameId").val( myNameId );
});
</script>
What the above does is displays a text box with the characters name in the box. What I would like is to have the name as the header, not in a text box. When I remove the textbox, and place a header tag with the same id and name, nothing will show. Is there a way to complete this task.

the header is the first h3 in the modal.
So you need to add a h3 element under ".modal-header" with an id and set the .html() of that element. :)
Look here for reference: http://twitter.github.io/bootstrap/javascript.html#modals
Here's the code:
#Modal
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="hdrtitle">This is the header</h3>
</div>
<div class="modal-body">
<input type="text" name="nameId" id="nameId" />
<p>some content</p>
</div>
</div>
Using a code like:
$('.modal .hdrtitle').html('This is the header');
and then showing it with:
$('.modal').modal('toggle');
works.

The one-off way
If this is the only time you'll ever need to do a UI-binding behavior in your site/app, do something like this:
$('.header-link').click(function(e) {
$('.modal-header h4').html($(e.target).html())
})
CodePen Demo
This will just take the text (actually the HTML) in the link itself and put that in the header.
Using a library
If you plan to do these sorts of cool tricks in more parts of your app, consider using a UI-binding library like Angular JS or Knockout. This way you can data-bind parts of your UI with events.

I found the answer. Thanks to #PaoloCasciello for a layout.
Instead of an .on function in javascript, it really needed to be .html. So here is what the final code will look like.
<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 id="nameId" />
</div>
<div class="modal-body">
<p>some content</p>
</div>
</div>
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
var myNameId = $(this).data('id');
var myNameDescription = $(this).data('description');
$(".modal-header #nameId").html( myNameId );