I've been making a crud application in laravel. The application was working fine until I decided to change some code. The modal was showing up when I was running the code earlier and when I tested a few hours ago it was just working fine. But now when I try to click on the add button, the url just changes and nothing shows up anymore. If anyone can help me I'll appreciate it. I've just been learning laravel for a few months now. Here's my code.
#extends('layouts.master')
#section('content')
<div class="container">
<div class="row p-3">
<div class="col-md-11 card p-3">
<h5 class="text-center text-primary">Products</h5>
<div class="form-group">
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
I just want the modal to pop up when I click on the button. Even though nothing shows up on the modal as for now. The js and cdn links are included in my file.
Remove bs from data-bs-toggle & data-bs-target
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>
Related
I have a basic Bootstrap Modal on my page with a text input field, which I will want to trigger upon clicking the "Report A Bug" button shown above.
<div class="btn-group" id="exampleModal" role="group">
<button id="myBtnToReportABug" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#exampleModal"> Report A Problem </button>
</div>
<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">Please Provide A Short Description Of The Issue</h5>
<div class="input-group">
<textarea class="form-control" aria-label="With textarea"></textarea>
</div>
<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">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
However I'm not sure of the best way to trigger it in Javascript. As you can see project already has a call to a modal, but its not a modal that is created in the HTML as I have with this 'Report A Bug' one.
$("#myBtnToReportABug").click(() => openModalPopup(cCenterUrl));
EDIT
Tried the Data Target method as mentioned below due to it's simplicity, but my Modal is not hidden nor does the click of the button trigger the modal to appear, any ideas?
<div class="btn-group" role="group">
<button id="myBtnToCcenter" type="button" target= '_blank' class="btn btn-primary"> Open CCenter </button>
<button id="myBtnToReportABug" type="button" target= '_blank' class="btn btn-secondary" data-toggle="modal" data-target=".modal-report"> Report A Problem </button>
</div>
<div class="modal-report" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Report A Bug</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">Send Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You trigger the modal with: data-target="#exampleModal"
Then you also need the right modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Programmatically you have to do this
$('#exampleModalLabel').modal('show');
You previously need to initialize it with show: false so it won't show until you manually do it.
$('#exampleModalLabel').modal({ show: false})
Where exampleModalLabel is the id of the modal container.
I'm stuck with a problem. I Have Worked on images before in html but there never seemed to be a problem. I'm partially working on a project and I am giving the right path to the folder but the image is just not showing up. All the images had the same problem. Here is my code Snippet:
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-1">
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
</a>
<div class="info-box">
<h3>M Saifur Rahman</h3>
<span class="instructor-profession">Director,Business Development</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal">Read More</button></center>
<!-- 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" style="color: black;">M Saifur Rahman</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-3">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" alt="">
</a>
<div class="info-box">
<h3>Bijon Islam</h3>
<span class="instructor-profession">CEO</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal1">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal1" 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" style="color: black;">Bijon Islam</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-col grid-col-12">
<div class="item-instructor bg-color-2">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Ivdad Ahmed Khan Mojlish</h3>
<span class="instructor-profession">Managing director</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal2">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal2" 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" style="color: black;">Ivdad Ahmed Khan Mojlish</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-info">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item-instructor bg-color-6">
<a href="page-profile.html" class="instructor-avatar">
<img src="http://placehold.it/210x220" data-at2x="http://placehold.it/210x220" alt>
</a>
<div class="info-box">
<h3>Zahedul Amin</h3>
<span class="instructor-profession">Directory,Finance & Strategy</span>
<div class="divider"></div>
<center><button type="button" class="btn btn info btn-lg" data-toggle="modal" data-target="#myModal3">Read More</button></center>
<!-- Modal -->
<div class="modal fade" id="myModal3" 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" style="color: black;">Zahedul Amin</h4>
</div>
<div class="modal-body">
<div class="biography-image">
<img src="http://placehold.it/210x220" align="left">
</div>
<div class="biography-image">
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My htdocs path is like this:
F:\xampp\htdocs\Main Files\UniLearn\UniLearn (with Options Panel)\img
Brother, i think the problem is in the paths, you have here 3 choices base on your HTML page location:-
if the .html file is in the same folder with the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="saif.jpg" alt="">
</a>
(.html page beside saif.jpg)
if the .html file is in a folder contains the folder of the image your code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="UniLearn/UniLearn (with Options Panel)/img/saif1.jpg" alt="">
</a>
(.html page beside the folder UniLearn)
if the .html is in a different folder you need to jump up levels till you reach the nearest common folder and point to the image code should be like this:
<a href="page-profile.html" class="instructor-avatar">
<img src="../../UniLearn/UniLearn (with Options Panel)/img/saif2.jpg" alt="">
</a>
(.html is in a path two levels far from UniLearn)
-->(../..) Means go up two levels in the folder structure.
hope this helps
i think the problem is in your directory name spaces.
try to take picture from other directory then you will see what is the problem.
the problem is with the spacing. if you want to keep the naming (not recommended) and still use the image try this:
<img src="UniLearn/UniLearn%20(with%20Options%20Panel)/img/saif.jpg" alt="">
It is hard to tell with only this information.
Here's how to troubleshoot this:
First replace all spaces with %20 this is the way to url encode those characters.
If it still is a problem (normally browsers auto url encode), compare the URL you are using to access the website, the href in the base tag if there is one, and the url of the image. The browser will use those 3 together to figure out the final URL...
You can right click on the picture, and open in a new tab. It will allow you to rapidly see the URL that is used to point to the picture and allow you to make changes.
Also, since you are on a unix machine, the case is important. Make sure that all capitals should be present.
I have two tabs in a page, both tabs contain a modal class. Modal in the first tab works fine, i.e. it fades-in and loads the content.However, when I switch to the next tab it only fades-in and doesn't show the content when I used chrome debugger I found in the first tab is comming while in second tab is comming
<button type="button"
class="btn btn-info glyphicon glyphicon-plus"
data-toggle="modal"
data-target="#myModal{{$parent.$parent.$index}}{{$index}}">
Add URL
</button>
{{category.name}}{{$parent.$parent.$index}}{{$index}}
<div class="modal fade" id="myModal{{$parent.$parent.$index}}{{$index}}" role="dialog">
{{$parent.$parent.$index}} -- {{$index}}
<div class="modal-dialog" role="document">
<!-- Modal content-->
<div class="modal-content" >{{category.name}}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<form>
<p>
<input type="text" class="form-control"
name="uri" placeholder="Add URL" ng-model="uri">
</p>
</form>
</div>
<div class="modal-footer">
<button type="button" ng-click="addCustom()"
class="btn btn-success btn-sm col-lg-2 col-md-offset-3 glyphicon glyphicon-ok"
data-dismiss="modal">Add</button>
<button type="button"
class="btn btn-success btn-sm col-lg-2 col-md-offset-7 pull-centre glyphicon glyphicon-remove"
data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
I am using bootstreap3 popup(model) to select image from computer.
I want when user select one or more image then popup should be closed and image uploading preview should be display in main page (below the <i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>).
My code is
<div class="form-group">
<div class="controls form-inline">
<i class="fa fa-image image-popup-open" data-toggle="modal" data-target=".photo-modal-lg"></i>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Upload Images</h4>
</div>
<div class="modal-body">
<div class="modal-title">
</div>
<div id='content' class="tab-content">
<div class="tab-pane active" id="uplod">
<h1>Drag and Drop files using Dropzone.js</h1>
<form action="upload.php"
class="dropzone"
id="my-awesome-dropzone"></form>
</div>
</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>
</div>
</div>
My code is here .
How to do this
document.getElementById("imageid").src="../template/save.png";
I want to make a modal where in if I click the button the modal pops up and the content of the modal is from a different page. Please help me.
This is my code
Click to open Modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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>
<h4 class="modal-title" id="myModalLabel">Basic Modal</h4>
</div>
<div class="modal-body">
<h3>Modal Body</h3>
</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>
I want to know what Javascript? and where exactly should I put it?
I'm using bootstrap v 3.03 by the way.
I think this is what you're looking for. You need to pay special attention to this line in particular:
<a data-toggle="modal" class="btn btn-info" href="remote.html" data-target="#myModal">Click me !</a>