I have problem with bootstrap modal , i cant define a id on that modal to show some informations.
test
Other code
<div id="likes" 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">x</button>
<h3 id="myModalLabel">People who like this</h3>
</div>
<div class="modal-body">
<?php
$quelike = mysql_fetch_array(mysql_query("SELECT * FROM likes WHERE statusid='$statusid'"));
echo " <div class=\"modal-content\"> ".$quelike['firstname']." </a><br /> </div> <div class=\"spacelikes\"></div>";
?>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
</div>
I just need to set informations who liked post for for every post.
Sorry for my bad english.
First off there may be an issue in your anchor:
test
Should be:
<a data-target="#likes" data-toggle="modal">test</a>
If you intend it to launch your modal.
As to actually passing in the statusId this depends. If statusId is the same over the course of a page then what you have should work (although as others have mentioned there is SQL injection vulnerabilities in your code and the mysql_ functions should no longer be used).
If status id can change during the course of the page (i.e. it can be set by javascript) then you probably should place the logic to grab the details in a new page and use this page in the modal:
test
Which will load that page in the modal and show the info you require.
Related
I need to add a popup to the following web app
https://github.com/gunet/openeclass/tree/3.12.x
I have tried to put my code to many files by trial and error but no luck.
Could someone tell me if below code is the appropriate way to do this and in which file should i put it so it shows up in the first page?
https://openeclass.panteion.gr/
<?php
// PHP program to pop an alert
// message box on the screen
// Display the alert box
echo '<script>alert("Welcome to our site")</script>';
?>
As suggested i plan to use the following. Where should i put it and how should i combine it with a cookie so that it is shown only once to each user?
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You should not use JavaScript "alert()" function to show some messages to the users. It is an ugly way to do such thing and it is mostly used for old school debugging helper.
In my opinion you can trigger a popover or an alert (see Bootstrap 3 documentation) in $(document).ready(function () { ... } section within template/default/js/main.js. But this would show the message to your visitors every time they open any page. That is why you should show the message only once and remember it in a Cookie variable such as "messageShown=true". In the section which I mentioned above you should check like if(Cookies.messageShown=='false') before you trigger the alert message.
Heys guys
I am having trouble passing an ID variable to be used in a pop-up window in HTML
this is what I am trying to do
<?php
$sql = "select * from locations";
$result = $conn->query($sql);
while ($row = $result->fetch_assoc()){
$locationID = $row['id'];
<button class=\"btn btn-success btn-lg\" data-toggle=\"modal\" data-target=\"#myModal\"> Show Listed Properties </button>
// here i want to pass the locationID variable so that when the user clicks on the
// button a pop up window appears displaying information based on the location id.
}
?>
my pop up window looks like this:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Hi there, I am a Modal Example for Dashio Admin Panel.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
inside the popup code, I will be performing an SQL query based on the locationID variable and then populate the popup window with the query results.
alternatively, I could just create a new page and pass the id as a get request but I feel like that does not look as professional and is more time-consuming.
could someone point me in the right direction?
add new class in the button and call it open-modal, and use data-id like so:
<button type="button" class="btn btn-info btn-lg open-modal" data-toggle="modal" data-id="<?= $id; ?>" data-target="#myModal">Show Listed Properties</button>
in the end of the file you can call it like:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).on("click", ".open-modal", function () {
var id = $(this).data('id');
alert(id)
/*
proceed with rest of modal using the id variable as necessary
*/
});
</script>
hope I understand your issue well.
Scenario - I am planning to load an external PHP file which contains an Update form inside a modal pop-up on a jquery button click event.
I am able to load pop-up on button click but could not find a clear and brief solution to load an external file inside the modal pop-up. For the sake of example lets assume the edit form has just email text field.
NOTE- I am trying to load file locally
JS Fiddle - jsfiddle.net/1aeur58f/1
I want to display the file content inside the body of the pop-up as shown in the JsFiddle
So, I do not think that you have to load an external source at all. If you would like to include the content in the page, I think that you should do something like I did below.
<?php
$user = $client->get('account');
?>
<!-- Make the model show up -->
<!-- Pretend this is the form -->
<button type="button" id="mymodal" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel"><?= 'Some kind of title' ?></h4>
</div>
<div class="modal-body">
...
</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>
In my view, I am querying and displaying all the rows from the database. All the rows are displayed fine except the problem comes in when i use a bootstrap modal (or bootstrap dialog box). I want to display the email for each query using modal (the dialog box) but the problem is that in each query the email in the first row of the table is the one that is being displayed for all the other queries...
what might i have done wrong here. thnx
my View
<?php
foreach($query as $row)
{ ?>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Title of the data from the database
</button>
<!-- Modal -->
<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"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">User email for this user</h4>
</div>
<div class="modal-body">
<?php echo $row->email?><!--this is where my problem is-->
</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>
You are using duplicated id="myModal" therefore your button always open the same modal.
You can try to create unique Modal IDs and buttons for each of your rows. You can use row ID or something similar to differentiate
For example:
<button ... data-target="#myModal-<?php echo $row->id;?>">
...
<div class="modal fade" id="myModal-<?php echo $row->id;?>">
...
I have this very simple jQuery-script to change modal content based on link. Code:
$('#facebook-friends').on('hidden', function () {
$(this).removeData('modal');
});
And then I can control which content will be used, based on the buttons:
<i class="icon-facebook"></i> Use Facebook
It works perfectly! However, I have links inside this facebook-frame.php file, and I want all actions to stay within the modal, so that the outside page doesn't reload.
I have tried this solution inside facebook-frame.php but it doesn't work.
<a href="facebook-frame.php?all" data-target="#facebook-friends" role="button" class="btn btn-primary" data-toggle="modal">
This is the modal on my mainpage:
<div class="modal fade hide" id="facebook-friends" 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">Inviter veninder fra Facebook</h3>
</div>
<div class="modal-body text-center">
<p>Loading content...</p>
<p><IMG src="ajax-loader.gif"></p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Luk</button>
</div>
</div>
I especially love the "Loading content", as it seems very dynamic.
Is there any way to assign a special command/class/name to links/buttons inside facebook-frame.php so that when clicked it will temporary show the "Loading content" and then meanwhile load the requested page (inside href attribute)?
If I'm understanding correctly, inside facebook-frame.php can you just capture all <a> (or specific <a> classes) click events like so?
$(document).on('click', '#facebook-friends a', function(e) {
e.preventDefault();
// show the "Loading content" message
// load the content and whatever else you need to do
});
Note: .on() requires jQuery 1.7+. Before that you would use .live().