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.

MVC - Modal not displaying using AJAX

I am having trouble displaying information on my popup page. I created main view where the user clicks a card and it should trigger a modal to display required information (including partial view) through ajax, however that partial page should be displayed through a controller but the action result within a controller is not triggered at all despite the fact that I have specified the data-url withing my java-script function.
Here is my index page:
<div id="pageContainer">
<div class="container">
<!--Boxers Cards-->
<div class="row text-center default-div-top-padding">
<div class="col-lg-3 col-md-6 mb-4 rounded fighter-card" id="FighterDetails">
<a id="popup-button" data-url="#Url.Action("FighterDetails", "RankingsController")" data-toggle="modal" data-target=".fighter-modal">
<img class="card-img-top" src="http://nyfights.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-11-at-5.10.25-PM.png" alt="" />
<div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
<div class="card-title fighter-card-title">Vasyl Lomachenko</div>
<ul class="fighter-card-information">
<li>
<div class="fighter-card-information-title">Belts: </div>
<div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
</li>
<li>
<div class="fighter-card-information-title">Record:</div>
<div class="fighter-card-information">11-1-0 9KO</div>
</li>
</ul>
</div>
<div class="card-footer fighter-card-ranking-position fighter-card-footer-color">
<h1>1</h1>
</div>
<input type="hidden" name="popup=title" value="Fighter Details" />
</a>
</div>
</div>
<!--Boxers Cards End-->
</div>
</div>
<!--Modal-->
<div class="modal fade fighter-modal" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header blueBackground goldBorderBottom">
<button type="button" class="close" data-dismiss="modal" aria-label="close" data-toggle="tooltip" data-placement="left" title="close">
<span aria-hidden="true">
×
</span>
</button>
<span class="modal-title" id="gridSystemModalLabel"></span><br />
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="">
<div id="ajax-target-container"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
//AJAX Popup Control - Renders a popup with designed partial view
$("container").on("click", "#popup-button", function () {
//Set the URL
var url = $(this).attr('data-url');
//Set the title
var popupTitle = $(this).find($('input[name=popup-title]')).val();
$(".modal-title").text(popupTitle);
//Set a default spinner
$(".modal #ajax-target-container").append("<span class='blueText'><i class='fa fa-spinner fa-spin fa-3x fifteenPxSpacingRight'></i> Loading... </span>");
$.ajax({
type: "GET",
cache: false,
url: url,
success: function (data) {
$(".modal #ajax-target-container").empty();
$(".modal #ajax-target-container").html(data);
}
})
});
});
</script>
My Partial View:
<div class="row">
#using (Html.BeginForm("", "", FormMethod.Post, new { #id = "Fighter-Details" }))
{
#Html.AntiForgeryToken()
<div class="card-body fighter-card-body-color" style="border-bottom: 2px solid rgb(255, 172, 0)">
<div class="card-title fighter-card-title">Vasyl Lomachenko</div>
<ul class="fighter-card-information">
<li>
<div class="fighter-card-information-title">Belts: </div>
<div class="fighter-card-information">WBA, WBO, IBF, WBC</div>
</li>
<li>
<div class="fighter-card-information-title">Record:</div>
<div class="fighter-card-information">11-1-0 9KO</div>
</li>
</ul>
</div>
}
And my controller:
[HttpGet]
public PartialViewResult FighterDetails()
{
return PartialView("~/Views/Rankings/PartialViews/FighterDetails.cshtml");
}
Now when I click the card it will display only the top of the popup:
And that's it. Controller is not triggered at all so it's seems it is not going through the java script function but I'm not sure why.
Any help would be appreciated,
Thanks

In your JS code, it looks like you're missing the '.' before 'container' in the jQuery selector. Since 'container' is a class attribute, the proper jQuery selector is '.container'.
Try changing
$("container").on("click", "#popup-button", function () {
to
$(".container").on("click", "#popup-button", function () {

insert image in a 'background-image' from a pipe

I have the following code in my html document:
<div *ngFor="let search of this.mySearches; let i = index" class="col-sm-6 col-xs-12">
<div class="box">
<div class="image img-search-rounded">
<img [src]="search.postPath | imagenpost: search.generic_category: search.postImg[0]" alt="image" title="image" id="img-rounded" class="img-responsive img-rounded">
</div>
<div class="pull-left">
<h4>{{search.generic_category}}<i class="la la-angle-double-right"></i>{{search.generic_type}}</h4>
<p><i class="la la-map-marker"></i>{{search.generic_city}}</p>
<p><i class="la la-clock-o"></i> {{search.date | date:'medium'}}</p>
<p><i class="la la-circle"></i> Get email notifications</p>
</div>
<div class="pull-right">
<button type="button" [routerLink]="search.url">View</button>
<button type="button" (click)="removeMySearch(search._id)">Delete</button>
</div>
</div>
</div>
but I get this and not the image:
How could I render the image?

It's not quite clear what you're trying to do. It seems like you are trying to do an OR using a ternary operator, but you are missing the else part.
The condition should be something like
<div [ngStyle]="{'background-color':person.country === 'UK' ? 'green'
> : 'red' }"></<div>
Read more about the example here

How can I choose a sub document to insert and update with a click function from the client side

I have two collections, one is a Posts collection which has posts, with an id.
And the other is a Sets collection which has an array called ArticleId that can be updated by the user by inserting a post id from the Posts collection into it via a click function with the button toggle-addToSet.
The user Creates the Array called ArticleId, gives it a name and saves articles in it periodically. Think Pinterest Boards or G+ collections.
I have a button on the post item that when a user clicks the icon, all the Sets he has created come up in a dialogue and the user chooses which Set he want to save the post id into.
<template name="summeryArticle">
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
</template>
Graphically it looks like this
And when the user clicks the icon modal-trigger to bring up the Sets he created, it looks like this
As you can see, the user has three Sets, Lifestyle, Love, Business, they can choose to save the posts id into any one of those three.
## GOAL ##
I want to be able to choose a Set, click the add button of my chosen Set, and somehow capture the post Id of the current post in my foreach loop, and insert it into that via the click function, at the moment all I have is this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
}
});
and when I console log that, I just get the Set id instead of the post id.
Question
How can I capture the post id of the current post,
Choose a Set of my liking, then insert the post id into my chosen set?
And if there is a better way to achieve this, please let me know.
EDIT AFTER FEEDBACK
I did the second option like this
<template name="summeryArticle">
{{#let article=this}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{>
likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button> {{/each}}
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
my helper is like this
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
console.log(sid);
console.log(aid);
}
});
However, this is what I'm getting.
and the log looks like this
where 7MgLCEnTWjXFRhLg6 is the Sets_id depending on which of the three buttons I clicked
SECOND EDIT. CONTEXT
when i do this
<template name="summeryArticle">
{{#let article=_id}}
<li>
<div class="row col s12 m7">
<div class="card" id="cardId">
<div class="card-image waves-effect waves-block waves-light">
<img src="{{better_featured_image.source_url}}">
</div>
<div class="card-content">
<h5 class=" truncate grey-text text-darken-4">{{title.rendered}}</h5>
MORE <i class="waves-effect waves-teal small material-icons right">playlist_add</i>{{> likePartial}}{{> reblogPartial}}
<!-- The modal below is what brings up all the sets the user has created so that the user can pick with set they wat to save the article in -->
<div id="modal2" class="modal bottom-sheet">
<div class="modal-content">
<div class="row">
{{#each s in set}}
<div class="col s6 m6 addSet teal">
<div class="card ">
<div class="card-image">
<span class="card-title cardSet">{{name}}</span>
</div>
<div class="card-footer">
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}">add Article Id to this Set!</button>
</div>
</div>
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</li>
{{/let}}
</template>
I get this
What's going on here is that I have the articles organised in categories, so what's going on now is that the article=_idbeing captured is the last article in the category, no matter what articles I try to add, it's just one article being caught, and its always the one at the bottom. I have no idea why

There are several ways. One would be something like this:
I would but article id and set id to toggle-addToSet button's data-attributes:
<button type="button" class="btn toggle-addToSet" name="button" data-setid="SETID" data-articleid="ARTID">add Article Id to this Set!</button>
If you call your summeryArticle like this:
{{#each article in articles}}
{{>summeryArticle article=article}}
{{/each}}
(another opotion is use let-helper:
<template name="summeryArticle">
{{#let article=this}}
...
{{/let}}
</template>
Then in your summeryArticle-template you can get article id in sets-loop:
{{#each s in set}}
<button type="button" class="btn toggle-addToSet" name="button" data-setid="{{s._id}}" articleid="{{article._id}}>add Article Id to this Set!</button>
{{/each}}
Then in template events:
Template.summeryArticle.events({
'click .toggle-addToSet': function(e, template) {
var ob = this.id
console.log(ob);
var sid = $(e.currentTarget).data('setid');
var aid = $(e.currentTarget).data('articleid');
Sets.update({_id: sid}, {$addToSet: {ArticlesId: aid}});
}
});
Note!
This assumes you can update your collection directly from client side! Depending on your situation, but usually it is not recommended. Normally you should deny client side updates and use methods for updating collections:
Method.call('mymethd', sid, aid, function(e, r) {
if (!e) {
console.log(r);
} else {
console.error(e);
}
});

Correct information not being displayed in modal by using angularJs

When I click on the thumbnail image in the media object, for the race "Australian GP", the modal with its information is opened. But when I click on the thumbnail object for the race "Chinese GP", the modal still shows the information about the Australian GP rather than showing that of the Chinese GP. Where am I going wrong or what more do I have to add? And more importantly, can someone explain to me why my code is not working?
<div class="container" ng-controller="seasonCtrl">
<div class="row" ng-repeat="race in races">
<div class="col-md-12">
<div class="media first-media">
<div class="media-left media-middle">
<img src="{{race.image}}" class="img-thumbnail media-object">
</div>
<div class="media-body">
<h2 class="media-heading"><a data-toggle="modal" data-target="#ausmod">{{race.name}}</a> <label class="label label-pill label-success">{{race.p1}}</label> <label class="label label-pill label-primary">{{race.p2}}</label> <label class="label label-info label-pill">{{race.p3}}</label></h2>
<p>{{race.smallinfo}}</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ausmod" ng-repeat="race in races">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button>
<h4>{{race.modalName}}</h4>
</div>
<div class="modal-body">
<p>{{race.modalDesc}}</p>
</div>
</div>
</div>
</div>
</div>
<script>
var app=angular.module("seasonApp", []);
app.controller("seasonCtrl", ["$scope", function($scope){
$scope.races=[
{
image:"Aliens.jpg",
name:"Australian GP",
p1:"Nico Rosberg",
p2:"Lewis Hamilton",
p3:"Sebastian Vettel",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Australian GP 2016",
modalDesc:"test info for australia"
},
{
image:"daily_tasks.jpg",
name:"Chinese GP",
p1:"Nico Rosberg",
p2:"Sebastian Vettel",
p3:"Daniil Kvyat",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Chinese GP 2016",
modalDesc:"test info"
}
];
}]);
</script>

The idea is to create a scope variable that is set to the currently selected 'race' on the ng-click of your anchor tags and use that in your modal.
Add to Controller
$scope.selectedRace = {};
$scope.setSelectedRace = function(idx) {
$scope.selectedRace = $scope.races[idx];
};
HTML Changes
Add 'track by $index' to assure unique rows
<div class="row" ng-repeat="race in races" track by $index>
Add ng-click to each anchor
ng-click="setSelectedRace($index)"
Remove ng-repeat from modal div
<div class="modal fade" id="ausmod">
Change modal content to reference selectedRace object rather than race
<h4>{{selectedRace.modalName}}</h4>
<p>{{selectedRace.modalDesc}}</p>
Here's a working plunk

I have improved your code.It does not work because in the loop attribute id has to be unique.
Controllr
var app=angular.module("seasonApp", []);
app.controller("seasonCtrl", ["$scope", function($scope){
$scope.races=[
{
image:"Aliens.jpg",
name:"Australian GP",
p1:"Nico Rosberg",
p2:"Lewis Hamilton",
p3:"Sebastian Vettel",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Australian GP 2016",
modalDesc:"test info for australia"
},
{
image:"daily_tasks.jpg",
name:"Chinese GP",
p1:"Nico Rosberg",
p2:"Sebastian Vettel",
p3:"Daniil Kvyat",
smallinfo:"wgliu uyrgf pw77t 2ieugt9weud w87e7t d",
modalName:"Chinese GP 2016",
modalDesc:"test info"
}
];
}]);
HTML
<div class="container" ng-controller="seasonCtrl">
<div class="row" ng-repeat="race in races">
<div class="col-md-12">
<div class="media first-media" track by $index>
<div class="media-left media-middle">
AAA
</div>
<div class="media-body">
<h2 class="media-heading"><a data-toggle="modal" data-target="#ausmod">{{race.name}}</a> <label class="label label-pill label-success">{{race.p1}}</label> <label class="label label-pill label-primary">{{race.p2}}</label> <label class="label label-info label-pill">{{race.p3}}</label></h2>
<p>{{race.smallinfo}}</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ausmod{{$index}}" ng-repeat="race in races" track by $index>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button type="button" class="close" data-dismiss="modal">×</button>
<h4>{{race.modalName}}</h4>
</div>
<div class="modal-body">
<p>{{race.modalDesc}}</p>
</div>
</div>
</div>
</div>
</div>