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");
});
Related
I am trying to build a web page that contains populates a bootstrap modal from an Html file stored on the same pc. However, it is currently displaying weirdly as can be seen in this image
This is my first time posting here and I am self-taught so if this is a stupid mistake - sorry.
I am trying to build a page with a list of stories. I want the stories to open my in a modal. To stop the page itself getting ridiculously long the stories themselves are stored in their own Html files (including formatting) and inserted using javascript - inner HTML.
The webpage includes bootstrap 4 and jquery
the relevant code is
<button onclick="fetchStory('Solitude')"> Read </button>
<div class="modal" id="displayStory" tabindex="-1" role="dialog" aria-labelledby="fetchStoryLabel" aria-hidden="true">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="fetchStoryLabel">New message</h5>
</div>
<div class="modal-body" id="sample">
</div>
<div class="modal-footer">
<center>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</center>
</div>
</div>
</div>
<script type="text/javascript">
function fetchStory(story) {
var modal = $(displayStory)
modal.find('.modal-title').text(story)
var story_path = "samples\\" + story + ".html"
document.getElementById("sample").innerHTML='<object type="text/html" data=' + story_path + '></object>'
$('#displayStory').modal()
}
</script>
If I passed the Html directly into the modal it displays as expected but when inserted using javascript it displays as above. inspecting it on a web page I cannot see any reason for the difference
I'm currently working on a system that has a CREATE EVENT module. Now this CREATE EVENT module allows a user to create events and display it on their profile, and other users can join their event. I used a modal to view further details of an event posted. In the perspective of the one creating the event, the user can publish an event to this so-called "PAST EVENTS" if the event is finished already. I'm having trouble publishing since I cannot figure out how to pass an ID of an EVENT inside a modal.
This is my modal. I used ajax in retrieving and displaying the data.
<div id="readmore" class="modal fade" 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" id="event_title"></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-6">
<img id="event_img">
<h6>HOW TO GET THERE</h6>
</div>
<div class="col-xs-6">
<p id="event_description"></p>
<h6>WHEN</h6>
<p id="event_start"></p>
<h6>WHO</h6>
<p id="occupation"></p>
<h6>WHAT TO BRING</h6>
<p id="event_material_req"></p>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Now what I want is when this <a class="btn btn-danger" data-dismiss="modal" onclick="publishToPast()">Publish to Past Activity</a> will be clicked, it will get the ID of the data in the modal and then update the STATUS of the EVENT on the Database so it can now be displayed on the PAST EVENTS. I was thinking getting it through PHP (through $_SESSION) but I cannot do so, because the modal depends on the number of EVENTS the user will create.
You have not mention but i guess that you are using an Ajax call to get and show event data in this modal. In this case, the way you are showing data of WHEN, WHO, WHAT TO BRING etc. You can add one hidden input field in this modal with some unique id like below and insert event id in that input field.
<input type="hidden" name="event_id" id="event_id" value="">
Now in your publishToPast() function write below code.
var eventId = $("event_id").val();
Now you have event id in eventId variable. Use it wherever you want.
Remember to remove event id from that input when modal close.
If you have ID when you show the modal just in your onclick function
onclick="publishToPast(herePassIDvalue)"
hello everyone i need help. i wanna show dinamic data to bootstrap modal body.
here is my code so far :
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
url : 'det_registration.php',
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
the modal windows is open. but, the ajax code is not execute for call det_registration.php and fetched data
what i missed ? thanks for your help :)
update:
i am sorry all. this is the code how i call the modal
<a title='detail' href="#myModal" data-toggle='modal'><span class="pull-left">View Details</span></a>
Not sure exactly what else you have in your code but take a look here.
I've added a button calling to your modal. With the code you provided, it all seems to be working just fine to me.
This was all I added
<button data-toggle="modal" data-target="#myModal" class="btn brn-primary">Click Me</button>
I know this is just a peace of code but please provide more information. In this case I don't know how you are opening the modal, this could be the problem.
Your script looks fine, if the ajax function was not executed is because your modal lister could't "listen" the event "show.bs.modal" try to put an alert just after the opening of the anonymous function to test it.
If you could't see the alert is because the event was not listened.
Finally, if you are opening the modal via JS, just remember that the function that opens it must exist before it was executed.
i have solved my problem. the problem is there is two jquery.js in my php file. the first one is bootsrap jquery.js and the another one is datatable jquery.js. then after i deleted datatable jquery.js, my problem was solved
How can I use this modal on different pages? I tried everything I can but it just works in one page.
HTML:
<div class="modal fade" id="confirm-delete1" 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>
<h3 class="modal-title" id="myModalLabel">Confirm Delete</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a class="btn btn-danger btn-ok">Delete</a>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
JavaScript:
<script>
$('#confirm-delete1').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
Anchor / link:
<i class="fa fa-fw fa-trash-o" alt="Delete journal" title="Delete journal"></i>delete
Based on your comment:
I'd echo out my the $id and the whole php block, i just did not include it here. I just want to know on how to have a prompt confirmation box, if i clicked the delete link, it will prompt a message "Do you want to delete this?" with a TEXTBOX where the CONFIRMATION CODE will be entered. If confirmation code = $confirmation_code then it will delete the record, otherwise it will not.
That would take quite a few steps in order to get the desired effect. But I can give you a list of steps you'd need to take:
You can make a prompt with the prompt() function, you can also put a message with the prompt as the first parameter, you can also store the return of that prompt in a variable to use later. (e.g. var code = prompt("Enter a confirmation code")...)
Perform a Ajax request to sent that data to the server.
Compare the data server-side and perform any actions you need to server-side, or send data back to the client if you need to do any operations client-side as well.
I'm using twitter bootstrap's modal window to load a remote image
<img alt="250x150" src="/assets/250x150.gif">
I'm following these docs
The image is not rendering correctly in the modal.
I get a load of jumbled data instead -
What's happening? How can I fix?
Yes, I had this too. The answer I found is here.
I created a link like this:
<a href="gallery/blue.jpg" class="thumbnail img_modal">
//handler for link
$('.img_modal').on('click', function(e) {
e.preventDefault();
$("#modal_img_target").attr("src", this);
$('#modal').modal('show');
});
//and modal code here
<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Title to go here</h3>
</div>
<div class="modal-body">
<img id="modal_img_target">
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
When using href to specify remote content for a modal, Bootstrap uses jQuery's load method to fetch the content, and then sticks the retrieved content into the modal's body element. In short, it only makes sense when the remote content (the href value) loads HTML or text.
What you're seeing is expected, as it's the same thing that would happen if you opened the gif file in a text editor, and just pasted it into an HTML tag.
To have it work the way you want, the href needs to point to an HTML document that contains an <img> tag that references the image you want in the modal.
In post of Mark Robson – change 'this' to 'this.href':
$("#modal_img_target").attr("src", this);
=>
$("#modal_img_target").attr("src", this.href);
(I don't have reputation for comment)