Develop Reference

Laravel: How to show dynamic data on popup modal related to image on every image click

I have to setup a Novel setup means I have to show episodes of every related novel on its click.
public function Novels()
{
$Novels = Novel::latest()->get();
foreach($Novels as $novel)
$novel->episodes = NovelEpisode::where('novel_id', $novel->id)->get();
return view('novels.Novels',compact('Novels'));
}
Here's my laravel controller blade code .
and
Here's my blade code with a modal inside.
<div class="row mx-0 top-75">
#foreach ($Novels as $novel)
<div class="col-lg-4 col-md-4 text-end">
<div class="card">
<div class="card-body top-65">
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid" alt="img" id="myImg" >
<h5 class="card-title mbot-20 ptop-50">{{ $novel->name }}</h5>
<p class="card-text">{{ $novel->description }}</p>
<p class="price-text mb-5">قیمت۱۸۰۰روپے</p>
<div class="modal fade" id="myModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body" id="modaldata">
#foreach ($novel->episodes as $episode)
<div class="container">
<div class="row">
<div class="col-12">
<div class="main mt-2">
<div class="d-flex justify-content-center">
<a href="{{route('episode',['id'=>$episode->id])}}" class="text-decoration-none">
<div class="modal-cont">
<p class="mod-text">{{$episode->episode}}<span class=""><i class="fa-solid fa-angle-right next-icn"></i></span></p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
Here's my jquery code which i'm using to popup modal.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myImg').click(function(){
$('#myModal').modal('show')
});
});
</script>

When you want to put an event listener on multiple doms, you need to use a class and not an id since ids attribute can target only one dom.
$('.myImg').click(function(){
Next to target the right modal for each image, you need to have a way to differentiate between them. (also give each modal a unique id)
<div class="modal fade" id="myModal-{{$novel->id}}" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
Now you only need a way to get the correct modal id to show it. one easy solution is to use data-x attributes
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" data-id="{{$novel->id}" >
And that's it.
$('.myImg').click(function(){
let id = $(this).data('id');
$('#myModal-'+id).modal('show')
});
Another Solution without using data-x attribute
use classes and target the modal with find() or siblings()
<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" >
//...used class
<div class="modal fade" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
//... removed the id (not unique)
And the JS
$('.myImg').click(function(){
let modal = $(this).parent().find('.modal')[0];
$(modal).modal('show')
});
//or
$('.myImg').click(function(){
let modal = $(this).siblings('.modal')[0];
$(modal).modal('show')
});
This is possible since both the img and the modal are on the same level.

Dropzone inside Vue transition modal doesn´t work

i have a dropzone function in mounted function, it works fine when in the view the dropzone is outside of a modal, but in transition modal doesn´t work, any idea or solution for this?
this is .ftl
...
<transition name="modal" id="deletemo">
<div v-if="uploadModal" >
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">upload file</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" #click="uploadModal = false">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>select file type</label>
<multiselect placeholder="Seleccione tipo de fichero" v-model="fileTypeSelected" :options="fileTypelist" > </multiselect>
</div>
<div class="form-group">
<div class="animated fadeIn">
<div class="card">
<div class="card-body">
<div id="uploadFile" class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" #click="uploadModal = false">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</transition>
.js
mounted: function () {
var vue = this;
dropzone.autoDiscover = false;
$("div#uploadFile").dropzone({
url: "/demo/uploadFile"
,acceptedFiles: ".pdf"
,clickable: false
,maxFilesize: 100
,addRemoveLinks: true
,init: function() {
this.on('success', function(file, json) {
});
this.on('addedfile', function(file) {
});
this.on("sending", function(file, xhr, formData) {
formData.append("nif", vue.filePerson);
});
this.on("complete", function(file) {
//this.removeFile(file);
});
}
});
}
});
I was looking for other similar post but not for a transition , so it does not work for me.
thanks in advance.

After trying multiple things i found the solution using an attribute "v-on:enter="enter" in transition and inside function initialize dropzone.
<transition name="modal" v-on:enter="enter" >
......
</transition>
enter: function () {
$("div#uploadFile").dropzone({
url: "/demo/uploadFile"
......
});
},

I have experienced the same issue. I this the problem is mostly the v-if div:
<div **v-if=**"uploadModal" >
<div id="uploadFile" class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>
VueJS seems to take control of everything happening there, to enable the dropzone, you will need to use #click or something to that effect. We just need to create the method that will be responsible for opening the FileInput:
methods: {
openDropZone() {
const dropzone = Dropzone.options.myDropzone = {
url: "http://localhost:8000/upload",
maxFiles : 2,
addRemoveLinks: true,
headers: {
"X-CSRFToken": "{{ csrf_token }}",
},
};
dropzone.hiddenInputFile.click();
}
}
Then we call the openDropZone() method from #click:
<div v-if="uploadModal" >
<div id="uploadFile" **#click="openDropZone()"** class="dropzone col" style="border-style: dashed;">
<div class="dz-message" data-dz-message>
<div>upload file here ...</div>
</div>
</div>
</div>

How to change the image dynamically inside the bootstrap body onclicking with the different images in laravel?

Laravel view code:
<div class="modal fade" id="images" 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">Upload Images</h4>
</div>
<div class="modal-body" id="modal-content">
<div class = "row">
<div class="col-sm-12">
<div class = "col-sm-6" align="center">
<div >
<a href = "#" class="upload" >
<img src="" width="250"
height="250" class="someClass">
<button type="button" align="center"><span class="glyphicon
glyphicon-upload"></span>Upload photo</button>
</a>
</div>
</div>
<div class="col-sm-6">
<h3>Image Guidelines</h3><br/>
Remember!!
<ul>
<li>Upload authentic product photos taken in bright lighting.</li>
<li>Use clear color images with minimum resolution of 1100x1100px.
</li>
<li> Maximum Images supported :- 5</li>
<li> Minimum Images required :- 1</li>
<li>Minimum Image Resolution :- 1100x1100</li>
<li>Image should be having pure white or light grey background.
</li>
<li>Image shouldn’t be blurred.</li>
<li>Product should occupy 80% of space in image.</li>
<li>Include all products in primary image (first image).</li>
</ul>
</div>
</div>
</div>
<div>
**<a href="#">
<img src="haghwaylitecontroller.jpg" alt="gemcamera"
style="width:150px" class="upload1">
</a>
<a href="#">
<img src="lightningswitchmodule.jpg" alt="gemcamera"
style="width:150px" class="upload1">
</a>
<a href="#" >
<img src="videodoorphone.jpg" alt="gemcamera" style="width:150px"
class="upload1">
</a>**
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">CANCEL</button>
<button type="submit" class="btn btn-default" id="login"
onclick="javascript:validate()">SAVE</button>
</div>
</div>
</div>
This is my bootstrap code inside laravel view. It includes thumbails of images which is marked in block.On clicking with the images,the same image should display in the bootsrap body(ie., the clicked image should display on the image source tag which is inside the bootstrap body has the class name of someClass)
Script code:
<script type="text/javascript">
$(document).ready(function() {
$(document).on("click", ".upload1", function() {
var imageSRC = $(this).attr('src');
// alert(imageSRC);
$('#images').on('show.bs.modal', function () {
$(".someClass").attr("src", imageSRC);
});
</script>
This is the script code I have tried for my requirement.

Keep only this line once you store the value in imageSRC variable
$(".someClass").attr("src", imageSRC);

Creating Modal Dynamically using jquery

I want to create modal popup dynamically when the buttons click event fires.
I am adding bootstrap panels with dropable facility using jquery by clicking on html button. works fine.
Css:-
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
Html :-
<body>
<div id="modalarea">
// modal's html will be added here.
</div>
<div class="col-md-12" style="background: -webkit-linear-gradient(#E5F2F6,#CDE8F0);margin-bottom: 20px;">
<button class="btn btn-default pull-right" name="addpanel" id="btn_addpanel" value="Add Panel" type="button">Add Panel</button>
</div>
<div class="col-xs-4 col-sm-2 col-md-2" id="sidebar">
<div class="list-group" id="external-events">
<a href="#" class="list-group-item external-event label label-primary ui-draggable" id="draggable1" ><img src="images/areachart.png" /></a>
</div>
</div><!--/.sidebar-offcanvas-->
<!--chart area -->
<div class="col-xs-8 col-sm-10 col-md-10" id="chartarea">
<div class="row" id="chartrow">
// here dropable panels will be added on button click
</div><!--/row-->
</div><!-- end chart area -->
Input to store state of panels
<input id="countpanels" name="countpanels" type="text" style="display:none;"/>
<input id="dragblename" name="dragblename" type="text" style="display:none;"/>
<hr>
Javascript and jquery
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/draggable.js"></script>
<script>
var dividofpanel='';
var divdragingimage
var thisdragable= '';
$('#btn_addpanel').click(function()
{
var totalcountofpanels=$('#countpanels').val();
if(totalcountofpanels=='')
{
// no panels exist
totalcountofpanels=1;
$('#countpanels').val(parseInt(totalcountofpanels));
}
else
{
// panels already exist
totalcountofpanels=parseInt(totalcountofpanels)+1;
$('#countpanels').val(parseInt(totalcountofpanels));
}
var chartpanel='';
var modalarea='';
var chartpanelfull=$('#chartrow').html();
var modalareafull =$('#modalarea').html();
for(var divid =(totalcountofpanels-1);divid<totalcountofpanels;divid++)
{
chartpanel='<div class="col-xs-8 col-lg-6"><div class="panel panel-default" id="divpanel'+totalcountofpanels+'"><div class="panel-heading demo2" id="divpanelheading'+totalcountofpanels+'"><a class="fa fa-close pull-right" style="top:-5px" href="#" id="panelclose'+totalcountofpanels+'"></a><a data-toggle="modal" data-target="#modal'+totalcountofpanels+'" class="fa fa-cogs pull-right" style="top:-5px" href="#" id="panelsetting'+totalcountofpanels+'"></a></div><div class="panel-body chartareaclass demo" id="divpanelbody'+totalcountofpanels+'">Your Charting Area.</div></div>';
chartpanelfull=chartpanelfull+chartpanel;
modalarea='<div class="modal fade" id="modal'+totalcountofpanels+'" role="dialog"><div class="modal-dialog modal-lg"><div class="modal-content" id="modalcontent'+totalcountofpanels+'" style="border: rgba(0, 0, 0, 0.2) 3px solid; background:-webkit-linear-gradient(#E5F2F6,#CDE8F0);"><div class="modal-header title-chart" style="border-bottom: 3px solid #fff;" id="modalheader'+totalcountofpanels+'" ><button type="button" class="close" data-dismiss="modal">×</button><h4 class="modal-title" id="modalheader'+totalcountofpanels+'">Modal Header</h4></div><div class="modal-body" id="modalbody'+totalcountofpanels+'"><div class="col-md-2" style="padding-left: 0px;padding-right: 0px;"><div class="nav-side-menu"><div class="menu-list" id="modalmenulist'+totalcountofpanels+'"><ul id="menu-content" class="menu-content collapse out"><li data-toggle="collapse" data-target="#menutarget1'+totalcountofpanels+'" class="collapsed active"> Set data <span class="arrow"></span></li><ul class="sub-menu collapse" id="menutarget1'+totalcountofpanels+'"><li class="active">CSS3 Animation</li><li>Bootstrap Model</li></ul><li data-toggle="collapse" data-target="#menutarget2'+totalcountofpanels+'" class="collapsed"> Services <span class="arrow"></span></li> <ul class="sub-menu collapse" id="menutarget2'+totalcountofpanels+'"><li>New Service 1</li> <li>New Service 3</li></ul><li data-toggle="collapse" data-target="#menutarget3'+totalcountofpanels+'" class="collapsed"> New <span class="arrow"></span></li><ul class="sub-menu collapse" id="menutarget3'+totalcountofpanels+'"><li>New New 1</li><li>New New 3</li></ul><li>Profile</li><li>Users </li></ul></div></div></div><div class="col-md-5" style="border-left: 1px solid #fff;"><div class="row" id="modalrow'+totalcountofpanels+'"></div></div><div class="col-md-5 thumbnail"><div id="mychartdiv" style="height:200px;width:400px;"></div></div></div><div class="modal-footer" style="border:1px"><button type="button" class="btn btn-primery" data-dismiss="modal">Close</button></div></div></div></div>';
modalareafull=modalareafull+modalarea; //html of modal will be added in modalarea div tag at top of the body
// Every chart panel contains the WRENCH ICON as hyperlink that calls the Unque modal.
}
$('#modalarea').html(modalareafull);
$('#chartrow').html(chartpanelfull);
});
</script>
Its showing me error :-
jquery-1.12.4.js:10254 XMLHttpRequest cannot load js/bootstrap.min.js.
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https,
chrome-extension-resource.

Please Add your Jqueries in header section.

Angular JS User Profile Grid

I found an example of what I would like to do here:
http://www.bootply.com/fzLrwL73pd
It looks like this example is using the randomUser api to generate random user information and pictures. I want to create something very similar to this but with static information that I enter manually. I have tried manually entering information into the array like the following:
var myApp = angular.module('myApp', [{"user":{"gender":"female","name":{"title":"mrs","first":"taylor","last":"griffin"},"location":{"street":"2822 w 6th st","city":"everett","state":"oregon","zip":"80020"},"email":"taylor.griffin62#example.com","username":"yellowswan550","password":"twiggy","salt":"UV3zFgdW","md5":"ceb4dbcf76444647f32b059dc3fc1280","sha1":"23ae9f24c4fd1d09e12c95bd75029ea850db3fb6","sha256":"09b6a019187249e1eff7ca736865ddb6f01567dbe20774872c3115a6cbbd6ae4","registered":"1185248430","dob":"328410973","phone":"(199)-530-3414","cell":"(441)-597-7462","SSN":"961-26-7598","picture":{"large":"http://api.randomuser.me/portraits/women/82.jpg","medium":"http://api.randomuser.me/portraits/med/women/82.jpg","thumbnail":"http://api.randomuser.me/portraits/thumb/women/82.jpg"},"version":"0.5","nationality":"US"},"seed":"81aa9d006e130994"}]);
function Main(myApp){
$('#loader').hide();
$('#userList').show();
).error(function(data, status) {
alert('get data error!');
});
$scope.showUserModal = function(idx){
var user = $scope.users[idx].user;
$scope.currUser = user;
$('#myModalLabel').text(user.name.first
+ ' ' + user.name.last);
$('#myModal').modal('show');
}
}
Is there any way to easily convert this template into more static content?
Thank you in advance for any help!

May be crazy, but if you are looking for more static content, would it be possible to steal the output HTML and just rework to fit your needs?
Looks a bit like you could just steal the below:
<div class="row" id="userList">
<div ng-repeat="u in users" class="col-xs-4 col-sm-2">
<img src="{{u.user.picture.large}}" class="img-thumbnail img-responsive img-circle">
<h3 class="text-center">{{u.user.name.first}}</h3>
<hr>
</div>
</div>
and manually make your own div per users:
<div class="row" id="userList">
<div class="col-xs-4 col-sm-2">
<img src="/001.jpg" class="img-thumbnail img-responsive img-circle">
<h3 class="text-center">User #1</h3>
<hr>
</div>
<div class="col-xs-4 col-sm-2">
<img src="/002.jpg" class="img-thumbnail img-responsive img-circle">
<h3 class="text-center">User #2</h3>
<hr>
</div>
</div>
Then you could do similarly for the modal popups and use JS to call them when a user is clicked?

Thank you for all of the answers; however, I think I finally figured it out!
In bootstrap there is something called a modal (getboostrap.com/javascript). I simply used a modal with an image instead of a button. I was even able to use part of the layout for the modal from the above example:
<!-- image trigger modal -->
<a href="#" data-toggle="modal" data-target="#testModal">
<img class="img-responsive staffimg" src="images/profile.png">
</a>
<div id="testModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="testLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-info">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 id="testLabel" class="text-center"></h1>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-xs-4 col-xs-offset-4"><img src="images/profile.png" class="img-thumbnail img-responsive img-circle"></div>
</div>
<hr>
<div class="row">
<h4 class="text-center"><i class="fa fa-fw fa-phone fa-2x"></i> Phone: 555-555-5555 ect 555</h4>
<h4 class="text-center"><i class="fa fa-fw fa-envelope-o fa-2x"></i> Email:<a href="mailto:test#gmail.com> test#gmail.com</a></h4>
<h4 class="text-center"><i class="fa fa-fw fa-user fa-2x"></i> penguins66</h4>
</div>
</div>
</div>
<div class="modal-footer bg-info">
<button class="btn btn-lg btn-default center-block" data-dismiss="modal" aria-hidden="true">Okay!</button>
</div>
</div>
</div>
</div><!--/modal-->

var myApp = angular.module('myApp', [{"user":{"gender":"female"..);
The above line is wrong. The second parameter for module function is dependency names. The example is pretty straight forward. It is getting the data from a web service and loads the data to display. If you want to set it statically, try to set it to $scope.users = [YOUR USER DATA]. See below for complete code. It
var myApp = angular.module('myApp', []);
function Main($scope, $http){
$scope.users = [{"user":{"gender":"female","name":{"title":"mrs","first":"taylor","last":"griffin"},"location":{"street":"2822 w 6th st","city":"everett","state":"oregon","zip":"80020"},"email":"taylor.griffin62#example.com","username":"yellowswan550","password":"twiggy","salt":"UV3zFgdW","md5":"ceb4dbcf76444647f32b059dc3fc1280","sha1":"23ae9f24c4fd1d09e12c95bd75029ea850db3fb6","sha256":"09b6a019187249e1eff7ca736865ddb6f01567dbe20774872c3115a6cbbd6ae4","registered":"1185248430","dob":"328410973","phone":"(199)-530-3414","cell":"(441)-597-7462","SSN":"961-26-7598","picture":{"large":"http://api.randomuser.me/portraits/women/82.jpg","medium":"http://api.randomuser.me/portraits/med/women/82.jpg","thumbnail":"http://api.randomuser.me/portraits/thumb/women/82.jpg"},"version":"0.5","nationality":"US"},"seed":"81aa9d006e130994"}];
$('#loader').hide();
$('#userList').show();
$scope.showUserModal = function(idx){
var user = $scope.users[idx].user;
$scope.currUser = user;
$('#myModalLabel').text(user.name.first
+ ' ' + user.name.last);
$('#myModal').modal('show');
}
}