Modal window doesn’t seem to be working - javascript

Tried integrating the modal window here on the Lyric button: https://soundwhore.com/trance/tenishia-feat-adina-butar-dont-let-go/
However, nothing happens on click. Any idea, why this would not work?
Code here:
<p class="meta-data">
<a class="waves-effect waves-light btn-large red" href="#modal-lyric">
<i class="material-icons left">subject</i>Lyrics
</a>
<a class="waves-effect waves-light btn-large amber accent-4" href="https://itunes.apple.com/us/album/dont-let-go-feat.-adina-butar/id1054325261?i=1054325265" target="_blank" title="Go to https://itunes.apple.com/us/album/dont-let-go-feat.-adina-butar/id1054325261?i=1054325265">
<i class="material-icons left">shopping_cart</i>Buy now
</a>
</p>
<div class="modal" id="modal-lyric">
<div class="modal-content">
<h4>Lyrics</h4>
<p></p>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-green btn-flat" href="#!">Done</a>
</div>
</div>
Source: http://materializecss.com/modals.html

I think you just forgot to add the listener:
<script>
$(document).ready(function() {
$(".modal").modal()
});
</script>

Related

how can i get data of pressed button of row to popup in same window with controllers data , laravel blade template and jquery?

This is an appointment list code in blade template:-
#foreach($drapp as $app)
<!-- Appointment List -->
<div class="appointment-list">
<div class="profile-info-widget">
<a href="#" class="booking-doc-img">
<img src="{{ asset('/storage').'/'.$app->patients->profileimage}}" alt="User Image">
</a>
<div class="profile-det-info">
<h3> {{$app->patients->firstname." ".$app->patients->lastname}}</h3>
<div class="patient-details">
<h5><i class="far fa-clock"></i> {{date("d M,Y",strtotime($app->bookingdate))}}, {{date("h:i a",strtotime($app->bookingtime))}}</h5>
#if($app->patients->city != null)
<h5><i class="fas fa-map-marker-alt"></i> {{$app->patients->city.",".$app->patients->state.",".$app->patients->country}}</h5>
#else
<h5><i class="fas fa-map-marker-alt"></i> Not Defined</h5>
#endif
<h5><i class="fas fa-envelope"></i> {{$app->patients->email}}</h5>
<h5 class="mb-0"><i class="fas fa-phone"></i> +91 {{$app->patients->phoneno}}</h5>
</div>
</div>
</div>
<div class="appointment-action">
#if($app->status == "2")
<a href="#" class="btn btn-sm bg-info-light" id="{{$app->id}}" data-toggle="modal" data-target="#appt_details">
<i class="far fa-eye"></i> View
</a>
<a href="{{url('/')}}/doctor/dashboard/scheduleconfirm/{{$app->id}}" class="btn btn-sm bg-success-light">
<i class="fas fa-check"></i> Accept
</a>
<a href="{{url('/')}}/doctor/dashboard/schedulecancled/{{$app->id}}" class="btn btn-sm bg-danger-light">
<i class="fas fa-times"></i> Cancel
</a>
#elseif($app->status == "1")
<a href="#" class="btn btn-sm bg-info-light" data-toggle="modal" data-target="#appt_details">
<i class="far fa-eye"></i> View
</a>
<a href="javascript:void(0);" class="btn btn-sm bg-success-light">
<i class="fas fa-check"></i> Confirmed
</a>
#else
<a href="#" class="btn btn-sm bg-info-light" data-toggle="modal" data-target="#appt_details">
<i class="far fa-eye"></i> View
</a>
<a href="javascript:void(0);" class="btn btn-sm bg-danger-light">
<i class="fas fa-times"></i> Canceled
</a>
#endif
</div>
</div>
<!-- /Appointment List -->
#endforeach
After pressing the view button the popup will be opened in a same window like this:-
the image of opened popup
popup window code:-
<!-- Appointment Details Modal -->
<div class="modal fade custom-modal" id="appt_details">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Appointment Details</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<ul class="info-details">
<li>
<div class="details-header">
<div class="row">
<div class="col-md-6">
<span class="title">#APT</span>
<span class="text">21 Oct 2019 10:00 AM</span>
</div>
<div class="col-md-6">
<div class="text-right">
<button type="button" class="btn bg-success-light btn-sm" id="topup_status">Completed</button>
</div>
</div>
</div>
</div>
</li>
<li>
<span class="title">Status:</span>
<span class="text">Completed</span>
</li>
<li>
<span class="title">Confirm Date:</span>
<span class="text">29 Jun 2019</span>
</li>
<li>
<span class="title">Paid Amount</span>
<span class="text">$450</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /Appointment Details Modal -->
the code of appointment popup is shown above when i will press view button the popup will apppear and i want to bring seleted view buttons row data to the that popup

How to pass id to a modal within same page using GET method?

I have a following link:
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
The read more looks like this:
When I press the read more button, a modal will pop up like this:
I tried the following code but it's not working:
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <?php echo $_GET['id']; ?></h3>
</div>
</div>
</div>
</div>
</div>
</div>
How to solve this? Or is there any better way to do this? I have to show the id into the modal, not on another page. Any help will be appreciated. Thanks in advance.
PHP code execute first, so you can't set PHP value for $_GET dynamically. Use a javascript function.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
Call setEventId() function from anchor tag
<a type="button" onclick="setEventId(<?= $row['upcoming_event_id'] ?>)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
And use <span id="event_id"></span> to replace html value with event_id
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
</div>
</div>
Here is demo example after getting value of $row['upcoming_event_id'] or page load.
function setEventId(event_id){
document.querySelector("#event_id").innerHTML = event_id;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<a type="button" onclick="setEventId(1)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(2)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<a type="button" onclick="setEventId(3)" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" href="javascript:void(0)">
<i class="fa fa-search"></i> Read more</a>
<div class="modal fade product_view" id="product_view">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a href="#" data-dismiss="modal" class="class pull-right"><span
class="glyphicon glyphicon-remove"></span></a>
<h3 class="modal-title">I want to show the event id here <span id="event_id"></span></h3>
</div>
</div>
</div>
</div>
On your button add a data attribute containing your id, like this :
<a type="button" class="btn btn-primary" data-toggle="modal"
data-target="#product_view" data-id="'.$row['upcoming_event_id'].'" href="?id='.$row['upcoming_event_id'].'">
<i class="fa fa-search"></i> Read more</a>
Then in JS you need no write an event listener function automatically called when your modal is open. for your need this function seems like :
$('#product_view').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var id = button.data('id')
var modal = $(this)
modal.find('.modal-title').text('I want to show the event id here ' + id)
})
See official documentation here
What you can do is to use html data attribute on your tag. let's say :
<a href="#openModal_edit" data-idValue="<?= $row['upcoming_event_id'] ?>" ...</a>
Then you need to create onclick event handler, maybe on your modal button to extract your data attribute :
onclick="myId=this.dataset.idValue;document.querySelector('#THE_HTMLID_THAT_YOUWANT_DISPLAY_IDVALUE').value = myId;return true;"
and make sure in querySelector you add the element id that you want show the value on it.

How to render the modal after user trigger

Currently, my modal HTML codes are located below my original template. Every time I load the page template, it will load that entire source codes included modal. Is there any way to load that modal HTML codes after the user clicks a button?
HTML
<!-- Template Codes-->
<button data-toggle="modal" data-target="#modal-content" type="button" ng-click="openModal()" class="btn btn-xs btn-default">
<i class="fa fa-pencil"></i>
</button>
<!-- My Modal-->
<div id="modal-content" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="block block-themed block-transparent remove-margin-b">
<div class="block-header bg-primary-dark">
<ul class="block-options">
<li>
<button data-dismiss="modal" type="button"><i class="si si-close"></i></button>
</li>
</ul>
<h3 class="block-title">Content</h3>
</div>
<div class="block-content block-content-full">
<!-- Some Contents-->
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-sm btn-default">Close</button>
<button type="button" data-dismiss="modal" ng-click="" class="btn btn-sm btn-primary"><i class="fa fa-check"></i> Update</button>
</div>
</div>
</div>
you have two way:
1- directly call modal using inline attr:
<button data-toggle="modal" data-target="#modal-content" type="button" class="btn btn-xs btn-default" data-target="#modal-success-Public">
<i class="fa fa-pencil"></i>
</button>
2- use jQuery method:
$("#modal-content").modal("show")
for more details you can see this link
You can specify modal template in a separate html file and then do this.
<a data-toggle="modal" href="linktoyourmodaltemplate" data-target="#modal">Click me</a>

Load jQuery modal based on which div was clicked

So what I'm trying to do is, load a payment modal (which will have a payment/credit card form), and dynamically load the "selected plan" into the modal.
Below is the "Choose a Plan" HTML - what I'm trying to do/need help with is a jQuery function that opens the modal and loads "You selected this plan".
PS. Here is a fiddle if it's easier http://jsfiddle.net/9xyJn/
This is what I have on the JS side so far:
$(".planSelector").click(function() {
console.log("got that clcik.");
var selectedPlan = //Get the selected plan
$("#paymentModal").modal("show");
});
HTML:
<div class="container">
<div class="row">
<hr>
<div class="span12 pick-plan-intro">
<h2>Great sales teams come in all sizes</h2>
<h6>All plans are including all features</h6>
</div>
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="freePlan">Free</h4>
<p>Free</p>
<p>Up to 5 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="smallPlan">Small</h4>
<p>$99</p>
<p>Up to 15 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="mediumPlan">Medium</h4>
<p>$199</p>
<p>Up to 30 users</p>
<a class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
</div>
</div>
I have modified your code a little and added id to your <a> attributes.
Here's the jsfiddle update: http://jsfiddle.net/saurabhsharma/9xyJn/1/

Get multiple variables from HTML using jQuery

So I have a block of HTML, and what I want to do is generate a modal based on which "plan" a user picked. Everything is working except the planPrice variable. I can't seem to pull it frmo the HTML.
I'm certain this is the line that is wrong, but can't seem to get the sytnax right, I am thinking I need to use "this" in some way?
Here is a fiddle, and the goal is to get the planPrice to alert. http://jsfiddle.net/6xD7D/
var planPrice = $(".span3 p.planPrice").val(); //Doesn't work.
jQuery:
$(".planSelector").click(function() {
var selectedPlan = this.id;
console.log("You've selected " + selectedPlan);
$('#passedSelectedValue').val(selectedPlan);
var planPrice = $(".span3 p.planPrice").val(); // This line not working
$('#planPrice').val(planPrice);
$('#paymentModal').modal('show');
});
HTML :
<div id="Free" class="span3">
<div class="sparta-plan">
<h4 id="1">Free</h4>
<p class="planPrice">Free</p>
<p>Up to 5 users</p>
<a id="1" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Small" class="span3">
<div class="sparta-plan">
<h4 id="2">Small</h4>
<p class="planPrice">$99 / month</p>
<p>Up to 15 users</p>
<a id="2" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Medium" class="span3">
<div class="sparta-plan">
<h4 id="3">Medium</h4>
<p class="planPrice">$199 / month</p>
<p>Up to 30 users</p>
<a id="3" class="btn btn-large btn-info btn-block planSelector" href="#">Select plan</a>
</div>
</div>
<div id="Mega" class="span3">
<div class="sparta-plan">
<h4>Custom</h4>
<p>...</p>
<p>Please contact us</p>
<a class="btn btn-large btn-info btn-block" href="#">Contact us</a>
</div>
</div>
You need to use .siblings() or combination of .closest() and .find()
Use
var planPrice = $(this).siblings(" p.planPrice").text();
OR
var planPrice = $(this).closest('.span3').find(" p.planPrice").text();
DEMO

Categories