Loading modal-dialog from <a> Also .Show() might not be working - javascript

I am fairly new to web development. I have this problem.. It is probably something simple but I can't seem to work it out.
I solved how to use a link to run some javascript. The javascript is supposed to open a modal but the script doesn't work.
To call my script I am using this: (I confirmed this works because I had placed an 'alert()' in the script to test if it went through)
<li>
<a data-toggle="modal" href="javascript:void(0)" onclick="showBugForm()">
<i class="fa fa-fw fa-bug"></i> Report a Bug
</a>
</li>
The script being called is:
function showBugForm(){
$('#repBug').modal('show');}
The main structure of my modal is shown below. I know the modal doesn't have any problems since I was able to load modal from a button, but I can't seem do it properly from an element. For the sake of context: I was able to load the modal by adding 'data-toggle="modal" data-target="#repBug"' to my button attributes, but I can't do the same with html link tag.)
<div class="modal fade" id="repBug" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!-- Here's my Code -->
<div>
<div>
<div>
Any clues?

<a data-target="#repBug" data-toggle="modal" href="#repBug"><i class="fa fa-fw fa-bug"></i> Report a Bug</a>
Try this, it will solve your problem .Calling any function is not required here. Your modal will open directly on click of this anchor tag.

The issue I was having was because I missed to add:
<?php include_once('bug-form.php'); ?>
To my index.php file .. Because I had the code written in different php file named 'bug-form.

Related

dynamic data target bootstrap modal -Django

I have a bunch of posts to show on a page. After clicking to read more, a bootstrap modal will come where the post will be showed. Also I am using django.
The thing is that I want to iterate through my queryset of all posts with a for loop.
My html looks like:
{% for post in posts %}
<!-- Modal -->
<div class="modal fade" id="post1" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- Button trigger modal -->
<p> {{ post.content|truncatewords:10 }}
<a data-toggle="modal" data-target="#post1">Post 1</a></p>
</div>
</div>
</div>
</div>
{% endfor %}
As you can see, here, in the trigger for showing the modal, data-target="#post1" is there and in the modal, there is also id="post1".
Now it's okay for one modal. But I have like 10-12 blog posts. So I can't hardcode each of it's data-target. So what can I do? I don't know javascript, so a complete bootstrap solution maybe helpful. Nevertheless any solution or idea what can I do?
Like post1 will get the id1 and then post2 should get the id2.
So can you please help me with this or give any other solution? It will be extremely helpful.
I have tried this post: how to dynamically change bootstrap modal data-target click but that didn't help.
So it was fairly simple, what I needed to do was to change the modal-target to #modal{{post.id}}" and the id of modal to modal{{post.id}} and voila!

bootstrap modal does not load on second click

I am showing notifications on modal with ajax call, ajax and php code is fine, It shows notifications on modal only first time, on second click at anchor it does not load "modal-dialogue" div and "modal-content" but it loads "modal fade modal-form in" div. When I debug it I saw display none on both above div's I know I can handle them with javascript, but I think that's not the solution.
What I am missing there, please guide
<a class="flag-list" href="#" data-toggle="modal" data-target="#user-flag">
<i class="icon-flag6"></i>' . esc_html__( 'Flag as inappropriate' ) .
</a>
<div class="modal fade modal-form" id="user-flag" tabindex="-1" role="dialog">
<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>
<h3 class="modal-title" id="flagModalLabel">
<?php echo esc_html__( 'Flag' ); ?>
</h3>
</div>
<div class="modal-body">
<form id="cs_flag_user">
<input type="hidden" name="name_one">
<input type="hidden" name="name_two">
<textarea></textarea>
</form>
</div>
</div>
</div>
</div>
It seems you may have a problem in server side, the code in your page, or any form submissions which changed may be the DOM, It will be easier to open the console and figure out exact problem.
A full demo for your code is running in Codepen here. I just replaced your php code with simple text, check it and leave your comment in case you need more help.
If you need to work with modal windows easily, I already wrote and open sourced modal windows wrapper plugin based on bootstrap4, you can find also demos and how to use here.
Try avoiding data-toggle="modal" data-target="#user-flag"
and use jquery to display and hide modals.
If notifications are loaded via ajax, then display modal inside success of that ajax.

Modal don't show up correctly

I'm having a problem with a modal which doesn't show up correctly
https://github.com/gothraven/Problem
When i check the code source of the page i have this
"test.html" and it works fine in a saperate html file when i copy and past it.
but this is the original php file "modif_ques.php" with the included files
modifc_popup.php ,addc_popup.php
I checked in the page inspector and i found this, i don't know how this happened
(check here)
<div id="modif_data_Modal" class="modal fade" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">a lot of things here</div>
</div>
</div>
when i click it becomes
<div id="modif_data_Modal" class="modal fade in" style="display: block; padding-right: 19px;">
<div class="modal-dialog">
<div class="modal-content">a lot of things here</div>
</div>
</div>
I found the answer which was a problem in my code
i removed this, which was a mistake
<form></form>
and changed this
<a href='modif_champ.php?cid=$row[cid]' class ='close' data-toggle='modal' data-target='#modif_data_Modal'><i class='glyphicon glyphicon-cog'></i></a>
with this
<button class='close' data-toggle='modal' data-target='#modif_data_Modal'><i class='glyphicon glyphicon-cog'></i></button>
i don't know but apearently to show the modal proparly we need to use <button> button instead of <a>

Bootstrap Modal ajax content, animation loading

I use the Bootstrap Modal by loading content from another page and that data is so complicated (multi query/dynamic form), so when open the modal, it will have a little bit stuck.
I want some animation or indicator to show that modal has not been crashed... please wait.
I have to search and try many ways but doesn't work, in some solution the .gif is stuck too when modal load. I use this method for remote content. http://jsfiddle.net/cp67J/1994/
<!-- Link trigger modal -->
<a href="remote_content.php?id=1" data-toggle="modal" data-target="#myModal" >
Launch Modal content 1
</a>
<a href="remote_content.php?id=2" data-toggle="modal" data-target="#myModal" >
Launch Modal content 2
</a>
<!--MODAL SECTION-->
<div class="modal fade" id="myModal" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>
Dont know if bootstrap modal supports this. But simple solution would be.
Show normal modal with loading animation.
Load your content with ajax in background.
Replace loader with loaded data.
P.S. you can also experiment with $.fn.load and allow jQuery to do 2. and 3. steps for you.

Modal not being called on bootstrap 3

I have this following code:
<div class="btn slick-slide slick-active" data-toggle="modal" data-target="#photo-carousel-modal" data-slick-index="0" aria-hidden="false" style="width: 234px;">
<img class="img-holder img-thumbnail" src="image/path.jpg">
</div>
That was supposed to call for this modal here:
<div class="modal fade bs-example-modal-lg" id="photo-carousel-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
{{-- Modal's content --}}
</div>
</div>
</div>
It simply not triggers anything! Am I doing some stupidity and not realizing it?
P.S.: YES! The Bootstrap does work properly. I'm using it in other parts of the code and it works like a charm!
Make sure your bootstrap.js file is called AFTER your jQuery file like this:
<script src="path/to/jquery-file.js"></script>
<script src="path/to/bootstrap.js"></script>
(Also, remove any other bootstrap js file like bootstrap-modal.js, etc as bootstrap.js has everything in it already)
If the above is already done and it still is not showing, please post the codes from your <head....</head and the footer of your webpage on your question.
P.S. Check your browser console for errors so you can get a better idea on what is going on.
I found out later that my code had 3 call for jQuery library. one of them was after the bootstrap call. That's where I messed up!
(As a matter of fact, it was the other guy who works here.)
So, kids: DO NOT PLACE YOUR JQUERY CALL AFTER THE BOOTSTRAP CALL! It will make you go nuts!

Categories