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().
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.
I have a generic modal just before the closing body tag of my page. I use Javascript to show the modal when a button is clicked, passing data attribute values embedded within the button to the modal title, body and footer. This makes the modal dynamic. It works great, however, when I add the trigger button within jQuery DataTable, it fails to trigger the modal.
This is my modal:
<div class="modal fade" id="modal_confirm_action" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"></h5>
<div class="pull-right m-l-15">
<button class="btn btn-danger btn-sm modal_close_btn" data-dismiss="modal" class="close" title="Close"> ×</button>
</div>
</div><!--/.modal-header-->
<div class="modal-body">
<!--render data via JS-->
</div>
<div class="modal-footer">
<a class="btn btn-sm btn-danger" role="button" id="action_url"> Yes, Continue </a>
<button data-dismiss="modal" class="btn btn-sm btn-secondary"> No, Cancel </button>
</div>
</div>
</div>
</div>
This is the button that triggers it:
<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$id).'">Delete</a>
Note: I'm using server side processing with DataTables (and CodeIgniter), so the button above is inside my controller method, and rendered in one column, like this:
...
$row[] = '<a class="btn btn-sm btn-danger text-white modal_trigger_confirm_action" data-title="Delete Post" data-msg="Sure to delete?" data-url="'.base_url('posts/delete_post/'.$post_id).'">Delete</a>';
...
This is the JavaScript that opens the modal:
$('.modal_trigger_confirm_action').click(function() {
//get data value params
var title = $(this).data('title');
var msg = $(this).data('msg');
var url = $(this).data('url');
$('#modal_confirm_action .modal-title').text(title); //dynamic title
$('#modal_confirm_action .modal-body').html(msg); //dynamic body content
$('#modal_confirm_action .modal-footer #action_url').attr('href', url); //url to delete item
$('#modal_confirm_action').modal('show'); //show the modal
});
Clicking the Delete button within each row doesn't do anything. What am I doing wrong?
Because the button is generated dynamically and not the part of DOM when it loaded first time so you need to trigger click on that dynamically generated button something like this.
$(document).on( "click",".modal_trigger_confirm_action", function() { //logic here });
Please try this:
$( ".modal_trigger_confirm_action" ).on( "click", function() {
// your logic here
});
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>
<table id="result">
<a href='#' class='pop'><span class='fa fa-eye'><img src='image link here' style='display:none'></a>
</table>
The above href is used to open the image in modal.
Modal For Image Preview:
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="position:absolute">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
The below jquery (part1+part2) works in parent page but whenever the table content is loaded using ajax the preview is not working.
jQuery for modal show:
part1 : $(function() {
$('.pop').on('click', function(e) {
e.preventDefault();
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
part1 works in parent page.
Part2 :$("#results").on("click",".pop", function(){
//alert("hello");
e.preventDefault();
$('.imagepreview1').attr('src', $(this).find('img').attr('src'));
$('#imagemodal1').modal('show');
});
part2 is also showing alert on click but image preview is not working.
Any help would be appreciated.
Could part of the problem be the class and id references in part 2? The class imagepreview1 and ID imagemodal1 don't exist in your examples. Should they be imagepreview and imagemodal?
What is going wrong? I gather that Part 2 isn't showing the image preview, but do you also have a problem with Part 1? If ajax is breaking your part 1, can you give a sample of your ajax loading?
I'm having some problems with ajax callbacks that I'm hoping I could get some help with. Basically, this script replaces the #inbox div with archive.php (which normally would generate messages and matching modals, but for simplicity sake I just included generic modals).
The ajax callback is triggered when you close a modal. It currently returns the modals ID. However, this only works once - that's where I'm having the problem. The problem seems to lie with the jQuery html command. I've replaced it with alert(id) and the script will run as many times as I want. Any suggestions? Please let me know if I need to clarify more. Thanks.
HTML / JavaScript:
<div id="inbox"> <!-- Content should be put between this div -->
<?php include_once('archive.php'); ?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#inbox .modal').on('hidden', function() {
id = $(this).attr('id');
$.ajax({
type: "POST",
url: "archive.php",
data: {message_id : id},
cache: false,
success: function(data) {
$('#inbox').html(data); // problem is here
}
});
});
});
</script>
PHP (archive.php):
<?php echo $_POST['message_id']; // I've also used SQL inserts, which work fine when I'm not using the jQuery HTML command ?>
<!-- Modal 1 -->
Launch demo modal
<div id="modalOne" 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">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Modal 2 -->
Launch demo modal
<div id="modalTwo" 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">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- Modal 3 (etc...) -->
When you run this:
$('#inbox .modal').on('hidden', function() {
It finds the current '#inbox .modal' objects and binds an event handler to them.
When you then do:
$('#inbox').html(data);
it replaces those DOM objects with new ones and you no longer have any event handlers active on those new objects.
You have two choices to fix it:
You can use delegated event handling which works with dynamically created objects.
You can rebind the event handlers after replacing the HTML.
I don't know about the hidden event you are using, but if it works with delegated event handling, then you can change to this to use delegated event handling:
$('#inbox').on('hidden', '.modal', function() {
Here, the event is bound to the #inbox object which is not recreated and it then checks events that bubble up to see if they originated on a .modal object. That's how delegated event handling works and it works with child objects that are dynamically created after the event handler is installed on the parent object.
You have bound the event to $('#inbox .modal'), so when you replace the content with $('#inbox').html(data) you are also removing (replacing) the element that the event is bound to. Instead try $('#inbox').on('hidden', '.modal', function() { for binding your event.