We Keep Coding

Bootstrap modal doesn't work on live server

Trigger Button:
while ($row = mysqli_fetch_array($result)) {
$name = $row['name'];
$id = $row['id'];
echo '<a data-target="#exampleModal" class="wpmui-field-input button wpmui-submit button-primary" data-toggle="modal" data-whatever="'.$name.'">Details</a>';
echo $id . "<br>";
}
Modal:
echo'
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<textarea class="form-control"></textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>';
JavaScript:
echo'
<script type="text/javascript">
window.onload = function () {
$("#exampleModal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data("whatever") // Extract info from data-* attributes
var modal = $(this)
modal.find(".modal-title").text("New message to " + recipient)
modal.find(".modal-body textarea").val(recipient)
})
}
</script>';
Now I have all these codes above that will generate a Modal Box when clicked on that Trigger Button. This code seems to work fine in my localhost but it doesn't act the same in my server, and the values returned are undefined. Now, I think it might have something to do with the PHP Version, because my localhost has PHP7 and my server has PHP5. Does this mean in PHP5 does not support value field (JavaScript is .val()) in the <textarea> tag as in <textarea value="something">?
Even if that's the case, what is the workaround for this problem? I tried using .html() and .text() but all it does is overwriting the value, and when you open up the modal box once again, the value will be the same for ALL modal boxes (whereas it should be different value for each recipient modal box).

It seems you have'nt included necessary jquery and style files.try including bootstrap.js, jQuery.min.js
This one might be helpful for you
www.bootply.com/mRbjbQ1JAB
Good Luck.

Use chrome developer tools or in firefox depending on your browser, click on the network tab and load the page the modal is supposed to appear, check all the files listed in the network tab of developer tools for anyone with 404 not found, that is possibly what is missing.

Pass Values to Bootstrap Modal JavaScript and PHP

I have tried to find this out here and not found what I was looking for.
The Goal: After a process has completed, to display a Bootstrap Modal that notifies the user it is complete (and/or that the admin may need to authorize something, for example, a comment may need to be authorized ...).
I can output a JavaScript script (sounds redundant as I type that) that will open the modal, but I want to pass text to the modal so I can have a reusable dialog. Here's the basic code I am working with:
The modal form:
<!-- language: lang-html -->
<!-- meant to be an alert dialog -->
<div id="myAlert" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="descModalLabel"></h3>
</div> <!-- / modal-header -->
<div class="modal-body">
<!-- some text will be inserted here -->
</div><!-- / modal-body -->
<div class="modal-footer" -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- /modal-dialog -->
</div> <!--/ modal -->
<!-- end of modal form -->
<!-- end snippet -->
The JavaScript to open the form:
// for the myAlert modal:
// code to open the modal with the caption and description:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
// need to get these values passed somehow
var caption = "Test";
var description = "Test Test Test";
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
// when modal closes, clear out the body:
$('#myAlert').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
The PHP that outputs the script that actually opens it:
echo '<script>';
// how do I pass the variables???
echo '$("#myAlert").modal("show")';
echo '</script>';
I would like to be able to pass the caption and description values to the form, but cannot figure it out. I have a version that works with a button based heavily on the Bootstrap site, but I cannot figure this one out. Thanks in advance!

There are probably better solutions out there but this one works too as I have tested already. It requires to take 3 steps:
You need to declare your variables you want to pass to JavaScript above all events and functions (make them global).
For example:
var global_caption = "Some default caption";
var global_description = "Some default description";
// All scripts now go here
In your modal you assign local variables from global variables (or use global variables directly) for some events, for example:
This will show basically the same thing as in your case so far:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
var caption = global_caption;
var description = global_description;
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
With echo you assign new values to global variables and summon the event again.
Declaration can go as simply as:
echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';

How to generate a Twitter Bootstrap modal but keep it hidden

I want to create a Twitter Bootstrap modal, but keep it hidden until I'm ready to show it.
Here is the smallest amount of code to demonstrate. It successfully creates the modal, but it applies display: block to it inline, overriding my style.
modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
+ '<div class="modal-dialog modal-lg" role="document">'
+ '<div class="modal-content">Hello World</div></div></div>'
modal = jQuery(modalHtml);
modal.modal('show');
https://jsfiddle.net/Lx23xqbq/2/
I could add this
modal.modal('hide');
But this allows the modal to be visible for a split second.
How can I create a Twitter Bootstrap modal without displaying it to the user?

Modals are hidden via the CSS class .modal by default.
Remove modal.modal( 'show' );.
You have modal.modal( 'show' ); in your JS which causes the modal to be visible for a split second before you call modal.modal( 'hide' ).
Personally I would place the modal markup into the page before hand.
var $button = $('button');
var $modal = $('#myModal');
$modal.on('show.bs.modal', function(e) {
// Optional. We update the modal with content stored in the data-content
// attribute of the <button>.
// You could also grab another hidden element to inject or perform
// AJAX here.
var content = $(e.relatedTarget).data('content');
$modal
.find('.modal-content')
.text(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>
<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">Hello World</div>
</div>
</div>
Injecting into the page wouldn't be much different.
var html =
'<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">' +
'<div class="modal-dialog modal-lg" role="document">' +
'<div class="modal-content">Hello World</div>' +
'</div>' +
'</div>';
// Append modal markup to page.
$('body').append(html);
var $button = $('button');
var $modal = $('#myModal');
$modal.on('show.bs.modal', function(e) {
// Optional. We update the modal with content stored in the data-content
// attribute of the <button>.
// You could also grab another hidden element to inject or perform
// AJAX here.
var content = $(e.relatedTarget).data('content');
$modal
.find('.modal-content')
.text(content);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" data-toggle="modal" data-target="#myModal" data-content="Hi Guy!">Show Modal</button>

How can I create a Twitter Bootstrap modal without displaying it to
the user?
Technically you are already creating the modal with your first 2 lines of code. It just isn't displayed until the 3rd line (modal.modal('show');).
What I think you might be trying to accomplish is separating the code that creates the modal from the code that shows/hides it. The problem (I'm assuming) is that elsewhere in your code you no longer have a reference to the variable modal (that you created in modal = jQuery(modalHtml);), because it is out of scope.
Add this to your HTML page:
<div id="hidden-modal" style="display:none"></div>
Update your Javascript as described below:
modalHtml = '<div class="modal fade" style="display: none" tabindex="-1" role="dialog" id="myModal">'
+ '<div class="modal-dialog modal-lg" role="document">'
+ '<div class="modal-content">Hello World</div></div></div>'
// inject the modal markup into the hidden element on the page
jQuery('#hidden-modal').html(modalHtml);
// whenever ready, retrieve the hidden modal html and display it
jQuery(jQuery('#hidden-modal').html()).modal('show');
https://jsfiddle.net/Lx23xqbq/3/

If I understand your question this have to work:
$(document).ready(function () {
draw();
});
function draw() {
var html = ""
html += '<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>';
html += '<hr />';
html += '<div id="myModal" class="modal fade" role="dialog">';
html += '<div class="modal-dialog">';
html += '<div class="modal-content">';
html += '<div class="modal-header">';
html += '<button type="button" class="close" data-dismiss="modal">×</button>';
html += '<h4 class="modal-title">Modal Header</h4>';
html += '</div>';
html += '<div class="modal-body">';
html += '<p>Some text in the modal.</p>';
html += '</div>';
html += '<div class="modal-footer">';
html += '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';
html += '</div>';
html += '</div>';
html += '</div>';
html += '</div>';
$('#modal').html(html);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="modal">
</div>
When page is loaded the function draw() draws the modal and keep it hidden until you click the button, hyperlink, label or whatever you want.

onClick checkbox save value or echo for later use

I'm using Wordpress to create my theme on selling boats. So far I got this plugin Search and Filter to work on selecting what kind of boat the custom wants.
Now after the custom has the options for the boat they want I want to have an checkbox (or something else) to save this boat or boats if more are available.
So I can sent a contact message (contact form 7) that displays the boats that the customer has selected, so I know what information he or she wants.
Using this code:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
Example | Source (credits go to: T.J. Crowder)
I can output a true or false value but not (at the moment) the name of the boat.
Is there a good way to make this work?
In my header I have started a session
<?php
session_start();
?>
So I could be able to echo values from anywhere right? I know the script and the session are separate things. But what would be the best way to solve my question?
UPDATE:
Ok i found this bootstrap modulo code that lets me do 'stuff' with ajax and probably write in my session. Can someone tell me how I do this?
<script>
$('.post-<?php the_ID(); ?>').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
</script>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".post-<?php the_ID(); ?>" data-whatever="#mdo">Open modal for #mdo</button>
<div class="modal fade post-<?php the_ID(); ?>" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"><?php the_title(); ?></h4>
</div>
<div class="modal-body">
<p>Boot <?php the_title(); ?></p>
<hr>
<p><?php the_title(); ?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Sluiten</button>
</div>
</div>
</div>
</div>

Modal content not loaded using jQuery

I am trying to make an instruction page about proxy settings for the users.
I have listed procedures step by step for each browser and put a link to picture that shows how it is done.
I want to show the picture in an PHP file which getting required image file and showing on the page according to its parameters s and b which are stand for s: step and b: browser.
My jQuery is
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
It should load ./images/proxy_settings/proxy.php?b=ie&s=1 but nothing happens.
And HTML is ( a part only)
<ol>
<li>Click on Settings <a id="proxy_ie_step_01" data-s="1" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span></a>
</li>
<li>Select Internet Options <a id="proxy_ie_step_02" data-s="2" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span> </a>
</li>
<!-- goes on -->
</ol>
And the modal is here:
<div class="modal fade" id="proxyModal" tabindex="-1" role="dialog" aria-labelledby="zkanoca" 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="proxy_modal_title"></h4>
</div>
<div class="modal-body" id="proxy_modal_body">
</div>
</div>
</div>
</div>
Proxy.php file content is here:
if (isset($_GET['b']) && isset($_GET['s']))
{
echo '<img src="proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
}
else
{
exit;
}
Modal opens up but either modal title or modal content are empty. I have checked it with Firebug but cannot see any error.
I have tried to put an alert("HEY"); into $("a[id^='proxy_']").click(); event. It also did not work.
If it was a path issue, Firebug would have given me a 404 error.
The file structure tree is like the following:
|.
|-js
|-script.js
|-images
|-proxy_settings
|-proxy.php
|-proxy_setting_ie_1.png
|-proxy_setting_ie_2.png
|-proxy_setting_ie_1.png
|-proxy_setting_ie_3.png
|-proxy_setting_ie_4.png
|-proxy_setting_ie_5.png
|-proxy_setting_ie_6.png
|-proxy_setting_ie_7.png
|-instructionpage.html
|-messageform.php
|-index.php
The script does not listen click events although it responds another same event:
This works which resides at the same file (script.js):
jQuery("#sendMessage").click(
function() {
jQuery("#sendmessage_modal_title").html("Send A Message");
jQuery("#sendmessage_modal_body").load("messageform.php");
});

If the li elements are generated dynamically, you should try this:
$(document).on("click", "a[id^='proxy_']", function () {
//
});

First of all I apologize you all wasting your valuable time.
I was trying to retrieve the instructions.html into index.php using jQuery's load() function. I moved
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
to instructions.html's itself then the problem is gone.

your .php files is in the folder images/proxy_settings/
maybe in your proxy.php file change the img src to: echo '<img src="../proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
Update:
I dont know why but my Firebug tell me the 404 Not Found Error!
Replace this code into the proxy.php and it should work.
echo '<img src="images/proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';