Develop Reference

pass var to bootstrap modal where php will use this value

I have an undefined number of images on a page and I have 1 modal. I can open with these images this 1 modal, but I want to be able to know which image was clicked so I can use this information to retrieve more information in a SQL query in the modal.
I found the following post: https://stackoverflow.com/a/25060114/7183609 but here the information is passed to an input field, not a PHP value.
this is my image code:
<?php
for ($i=0; $i < count($products); $i++) {
?>
<article class="<?php echo $products[$i]['style'];?>">
<span class="image">
<img src="<?php echo $images[$i]['location'];?>" alt="" data-toggle="modal" data-target="#exampleModal" />
</span>
<a style="pointer-events: none; cursor: default;" href="">
<h2><?php echo $products[$i]['title']; ?></h2>
<div class="content">
<p>
1000gr €<?php echo $products[$i]['prijs1000gr'];?>
<br />
500gr €<?php echo $products[$i]['prijs500gr'];?>
</p>
</div>
</a>
</article>
<?php
}
?>
and I use the basic bootstrap modal for now:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I doubt that it is possible in 1 modal and I think that I may need multiple modals but I'm not a expert in html/php/javascript

In order for HTML/javascript to pass information to PHP, you should use AJAX. Here's how it works:
html - browser-side - displays the page elements and values
javascript - browser-side - detects user events (button clicks, dropdown choices) and (once an event happens) can run bits of code to do stuff
PHP - server-side - initially sends the page content (HTML/javascript/CSS code) to the browser, and can store stuff in databases, etc)
AJAX - a method of using javascript to communicate with PHP, in order to interact with a database or do other back-end things. Via ajax, js code can send information to a back-end php file, get it to look something up (for example) and send back some data, then the js (still running) can update the page.
But you cannot just send something to PHP... as if there was a natural connection between the two. You need to write a process, usually involving ajax, to do that - and on the PHP side you must receive the data and do something with it.
Because javascript (jQuery) can detect user events (e.g. clicking on an image), you can use js to get the ID of the picture and then use AJAX to send it to a back-end PHP file - which can then do something.
Simple code example:
/*
Example just demonstrates what jQuery looks like, and how js detects events
*/
$('img').click(function(){
tmp = this.id;
$('#msg').html(tmp).removeClass('hid').addClass('wow');
/* THIS part sends the ID to the back-end PHP file */
$.ajax({
type:'post',
url:'name_of_your_php_file.php',
data: 'id:' +tmp
});
setTimeout(function(){
$('#msg').html('The ID was transmitted to a non-existent back-end php file');
},500);
});
$('#msg').click(function(){
$(this).removeClass('wow').addClass('hid');
});
*{}
#msg{position:fixed;top:0;width:40vw;height:30vh;background:#00f;opacity:0.5;}
.hid{display:none;}
.wow{padding:30vh 30vw;color:yellow;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<img id="img_41" src="https://placeimg.com/140/80/any" />
<div id="msg" class="hid"></div>

wes,
You an create a JS function and on click of each image get the src and pass it to the body of the modal.
<img src="..." class="setImage">
$('.setImage').click(function(event){
event.preventDefault();
var e = $(this);
var title = 'set modal title here';
var body = 'set modal body here';
var modal = $('#exampleModal');
modal.find('.modal-title').html(title);
modal.find('.modal-body').html(body);
modal.modal("show");
});

strange symbols in modal instead of content

we created a website where we want to show some examples of our cards as thumbnails, but when you click on it a larger picture should be displayed in a modal window. Now locally (windows machine) it works perfect, but once hosted (linux machine) the whole content (title, markup, picture, buttons) of the modal are displayed as a set of strange symbols.
The code of the modal:
<div class="col-md-4">
<a href="images/JUNO-FOTO-MW.png" class="thumbnail" data-toggle="modal" data-target="#ModalJUNO">
<img src="images/JUNO-FOTO.gif" alt="geboortekaartje Juno" style="width:200px;height:200px">
<p>geboortekaartje </br>Juno</p>
</a>
</div>
<!-- Modal -->
<div id="ModalJUNO" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Geboortekaartje Juno</h4>
</div>
<div class="modal-body">
<img src="images/JUNO-FOTO-MW.gif" title="geboortekaartje Juno" alt="geboortekaartje Juno wil nu eventjes niet laden" width="850" height="850">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The result of the hosted site
A part of the result:
Since it is not only the picture but the whole modal that is displayed like this, it does not seems like it is an encoding problem.
Any help is greatlty appreciated!

Remove href from your <a> tags.
I debugged bootstrap.js and found, that jQuery.load function is used to load modal's content.
Take a look at
http://getbootstrap.com/javascript/#modals-options
Read about remote option.

Javascript quiz - trigger modal popup via Javascript

I am trying to trigger the modal popup manually via Javascript $("#myModal").modal() as you can see I inserted it inside this function that analyzes the correct answers and displays a short message yet it did not work.
Here's my code:
function showFinalResults() {
$("#myModal").modal()
content.innerHTML = "<h3>WELL DONE!</h3>" +
"<p>You're amazing for taking this quiz. Not many people challenge themselves every now and then. It's always good to stay confident with any challenges that may come your way.</p>" +
"<h3>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h3>";
}
Here's the html for the modal:
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<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">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Modal scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Here is a working code snippet: http://codepen.io/steveharrison/pen/ONgWdL
Your HTML looks correct and $('#myModal').modal() is the correct way to trigger the modal. Try using the following JS and see if it works (edit: forgot to mention this assumes you have a button element with class open-modal, like in above CodePen).
$(document).on('ready', function() {
$('.open-modal').click(function() {
$('#myModal').modal();
});
});
My guess is that there's an error when you're trying to set the content of the modal... check your console and see if there are any errors.
Update
It was not working due to the fact there was a $ function manually defined which was conflicting with jQuery's $ fn... and both behaved quite differently (and hence setting, say, .innerHTML on such elements like content not working as expected). I replaced this $ fn with regular jQuery selectors, added in the modal HTML he included above, and it's now working (incomplete, but the modal is functional): https://jsfiddle.net/th8dvbo2/3/

To trigger modal for show hide you can use something like this
$('#myModal').modal('hide');
and
$('#myModal').modal('show');
so instead of
$("#myModal").modal();
you can use the above code

JavaScript reference inside HTML not loading in modal

I have a main page, and I am loading modal dialogs that are stored as HTML in other partial html pages. I am loading modals dynamically into 1 modal in the page on different buttons clicks.
The partial page for my modals look like this for 1 page:
<script type="text/javascript" src="../App/modals.js"></script>
<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="myModalLabel">Specify entity name you wish to create</h4>
</div>
<div class="modal-body">
<div class="row">
<form>
<div class="col-md-6">
<input type="text" id="txtEntityNameCreate" />
</div>
<p class="modal-log"></p>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="AddEntity()">Create Entity</button>
</div>
I am referencing a script at the top which will be responsible for resetting the text field inside dialogs. I might use it for later purposes as well. But the script is not loaded into the page when I am calling the dialog like this from my main page:
<a id="" data-toggle="modal" data-target="#mainModal"
href="modals/createmodal.html"
data-remote="modals/createmodal.html"
onclick="Utilities.SetFocusModal('txtEntityNameCreate')">
<img src="../Images/create.png" />
<h4>Create Entity</h4>
</a>
How can I load the modals.js when the dialog is loaded?
Thanks.

When bootstraps modals are loaded remotely they do not reload the dom so the page is not being reloaded into the modal the html is just being inserted, so your script is more than likely not executing, not really sure what your script looks like but that is more than likely the issue. Bootstrap has a jquery function for when the modal is shown. So if your script functions correctly when you load your html normally, like when you open just your snippets, then you can probably do something like the following on your main page:
$('#mainModal').on('shown.bs.modal', function () {
//then put your script here
});
or maybe
$('#mainModal').on('shown.bs.modal', function () {
$.getScript('path/to/script.js');
});
And then your script will execute when the #mainModal is shown.

Javascript does not run on PartialView

I am using MVC4, with C# and Razor to make a simple Web Application.
In my Controller I have a method that returns a partial view that is shown to the user, in this case, a modal popup:
public ActionResult GetPackageDetails(int id)
{
return PartialView("_EditPackageModal", new ModalEditPackage());
}
The partial view, which is a modal popup shows as predicted, but does not run any javascript:
#model SuperApp.Model.ModalEditPackage
<div class="modal fade bs-example-modal-lg" id="editPackageModal" tabindex="-1" role="dialog" aria-labelledby="editPackages" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Edit Package #Model.packageName</h4>
</div>
<div class="modal-body">
<div>
<label class="control-label">Package Name: </label>
<input type="text" class="form-control" id="package-name" placeholder="#Model.packageName">
</div>
</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>
</div>
</div>
This is the javascript code that I wish to run on the partial view:
<script>
$("input").click(function () {
alert("hello world!");
});
</script>
After reading this question:
Don't run javascript function in PartialView
I realized that I must include the script in the partial view. To sum up:
The partial view is unable to run the JS code that is in my project.
The partial view only runs JS code that is directly specified in the partial view using the <script> tag
Now, in this example such is fine, but in the real world I have several scripts that work on the partial view, and they are considerably big. Furthermore, the client already downloaded them because they are being used in other views and I don't know how to tell the partial view where the scripts are located since I am using Bundles.
Is there a way to fix this without smashing the script directly into the partial view?

give unique name to all your modals or html blocks.
Make your js code like this:
$(document).on('click', '#yourSpecifiedDomElement input','click',function(){
alert("hello world!");
});
place all your javascript code to specified js files which included in bundles.