Pagignation inside modal does not work

Pagignation inside modal does not work - javascript

{include file="guest/guest-preview.tpl"} has the table with id = preview_invitees_table
<div class="container">
<div id="preview_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" style="width: 170%;margin-left: -37%;">
<div class="modal-header">
<h4 class="modal-title"><center>招待プレビュー</center></h4>
</div>
<div class="modal-body">
{include file="guest/guest-preview.tpl"}
</div>
<div class="modal-footer">
<div class="bloc button">
<button type="button" class="btn btn-onhover btn-default" data-dismiss="modal">戻る</button>
</div>
</div>
</div>
</div>
</div>
</div>
JS
$('#preview_invitees_table').DataTable({ searching: false, "info": false });

Related

Popup not triggered for the second time

I have created a separate popup for each view and it works for the first time. The popup windows comes out when I click the text for the first time.
However, the popup window does not come out when I click the same text for the second time. How can I open the popup window on each click?
jQuery(document).ready(function($) {
$("body").on('click','.popup-trigger',function(e)
{
// $(this).after( $(this).nextAll('#popup:first') );
// $(this).nextAll('#popup:first').appendTo("body").modal('show');
console.log('clicked popup');
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('#popup:first') );
$(this).nextAll('#popup:first').appendTo('body').modal('show');
} else {
// $('#popup').hide();
$(this).nextAll('#popup:first').appendTo('body').modal('show');
};
});
});
You can run the code in here to check my problem:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

You could do like this
Already you target the id .No need a call dom modal('show').But all the target id was same .So Add separate id for each modal and respected target button. like popup1,popup2...
Target modal was auto popped.its a default behaviour of bootstrap
And no need to appendTo('body') .Because its already available in body
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">tEST1</div>
</div>
</a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup2">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">tEST2</div>
</div>
</a>
<div class="modal fade" id="popup2" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup3">
<div class="col-md-3 col-sm-3 text-center">
<div class="field-content"></div>
<div class="field-content">Test3</div>
</div>
</a>
<div class="modal fade" id="popup3" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content">
<p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

jQuery(document).ready(function($) {
$("body").on('click','.popup-trigger',function(e)
{
// $(this).after( $(this).nextAll('#popup:first') );
// $(this).nextAll('#popup:first').appendTo("body").modal('show');
console.log('clicked popup');
e.stopPropagation();
if(jQuery(window).width() < 767) {
$(this).after( $(this).nextAll('#popup:first') );
$(this).nextAll('#popup:first').modal('show');
} else {
// $('#popup').hide();
$(this).nextAll('#popup:first').modal('show');
};
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center"><div class="field-content"></div><div class="field-content">tEST1</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test1</p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-2 views-row-even">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">tEST2</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test2 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="views-row views-row-3 views-row-odd">
<a class="popup-trigger" data-toggle="modal" data-target="#popup"><div class="col-md-3 col-sm-3 text-center" ><div class="field-content"></div><div class="field-content">Test3</div></div></a>
<div class="modal fade" id="popup" role="dialog" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="popup-content">
<div class="field-content"><p>Hello..test3 </p>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>

How to update a class inside modal body?

I've got a class <div id="modal-data"></div> which is inside a modal
This is the code:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
<div id="modal-data"></div>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
With this piece of code:
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<option value='x'>Create</option>");
But its not working... Can any one help?

Try this
$(document).ready(function() {
$("#mymdl").modal({
fadeDuration: 1000,
fadeDelay: 1,
closeClass: 'icon-remove',
closeText: 'X'
});
var mymodal1 = $('#mymdl');
mymodal1.find('#timezone').html("<option>Hi there</option>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body">
<div class="form-group">
<div class="col-sm-10">
<select class="js-source-states" style="width: 100%" id="timezone">
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>

Your DOM structure is wrong you wrote block element div inside select element which is invalid. It should be like following:
<div class="modal fade" id="mymdl" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="color-line"></div>
<div class="modal-header text-center">
<h4 class="modal-title">Select Theme</h4>
</div>
<div class="modal-body"><div class="form-group"><div class="col-sm-10"><select class="js-source-states" style="width: 100%" id="timezone">
</select>
<div id="modal-data"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="submit" class="btn btn-success">Submit</button>
</div>
</div>
</div>
Also you should write your code under a specific callback, in this case you should in show.bs.modal callback:
$('#mymdl').on('show.bs.modal', function (e) {
var mymodal1 = $('#mymdl');
mymodal1.find('#modal-data').html("<h1>HI</h1>");
})

$('.modal-content').find('.modal-body').append('<p>append some html here</p>');
$('.modal-content').find('.modal-body').append('<h1>Hi</h1>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" id="mdlbtn">Close</button>
</div>
</div>
</div>
</div>
I think this is what you want. if it is i can explain you

variable scope empty in html after edit in controller

in controller I made a function that can change the content of my variable scope buut in my file html ( in div modal ) I cant get this new variable !!
function myfunction(){
$scope.details = ["a","b","c","d"];
console.log($scope.details);
$("#myModal").modal();
}
<body data-ng-controller="myAppCtrl" data-ng-app="myApp">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title" style="color:red;">{{details[0]}}</h2>
</div>
<div class="modal-body">
<h3>Formateur: {{details[1]}} </h3>
<p>Date de début: {{details[2]}} </p>
<p>Date de fin: {{details[3]}} </p>
<div ng-repeat="item in details[4]" ng-if="details.length > 3">
<button style="float: left;" class="btn btn-default">{{ item }}</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Quitter</button>
</div>
</div>
</div>
</div>

Dynamic bootstrap modal

Allright i want to make my bootstrap modal dynamic but not sure how to do it.. I know i need to use #PredictioItems.Name But not sure where :(
Code:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal">View full description & Livestream!</button>
<hr />
}
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>
Some one that can tell me what to replace to make it work? Thank you :)

Something like this should do it - as #vel says, each possible modal "instance" has to have a unique id and the button to open it should reference that id:
<div style="margin-top: 55px;" class="col-sm-10 col-sm-offset-1">
#foreach (var PredictioItems in Model.Content.Children())
{
if (PredictioItems.GetPropertyValue("checkboxchecker").Equals(true))
{
<h4 style="color: #000;">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
<strong style="color: #000;">#PredictioItems.GetPropertyValue("predictinfo")</strong><br />
<img src="#Umbraco.TypedMedia(PredictioItems.GetPropertyValue("matchimage")).Url" />
<p style="color: #000">#Umbraco.Truncate(PredictioItems.GetPropertyValue("predictdescription").ToString(), 25)</p>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#myModal#(PredictioItems.Id)">View full description & Livestream!</button>
<hr />
}
<div id="myModal#(PredictioItems.Id)" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">#PredictioItems.GetPropertyValue("teamvsteam")</h4>
</div>
<div class="modal-body">
<p>#PredictioItems.GetPropertyValue("predictdescription")</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
}
</div>

create cookie on Modal Window

I want to build Modal Window with cookie to display only once . I follow this tutorial http://calebserna.com/bootstrap-modal-email-subscription-form/ but still not working ? can anyone tell me how to fix it ? thanks .
here my website.http://cloudsblack.com/modalwindow.html
here my code .
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<div class="heading heading-v1 margin-bottom-10">
<h2><strong><span class="color-orange">Modal Window</strong></span></h2>
</div>
</div>
<div class="modal-body">
<a class="btn btn-link" data-dismiss="modal">Close</a>
</div>
<div class="modal-footer">
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script type='text/javascript' src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#myModal’).modal(‘show’);
$.cookie(‘pop’, ’7′);
}
});
</script>

Hi I'm here to answer my own question , I found these code its work ! thanks .
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">Subscription Form Demo</h4>
<p>This is Bootstrap Modal popup example.</p>
</div>
<div class="modal-body">
<!--End mc_embed_signup-->
<!-- Begin MailChimp Signup Form -->
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" value="" name="EMAIL" class="required email form-control" id="mce-EMAIL"/>
</div>
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
<div style="position: absolute; left: -5000px;"><input type="text" name="b_9e279011b21a23e1aed5e4868_cca4394bc9" value=""/></div>
<div class="form-group remove-bottom">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"/>
</div>
</div>
</form>
<!--End mc_embed_signup-->
</div>
<div class="modal-footer remove-top">
<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>
<!--============================================================= MODAL WINDOW END=================================================================-->
<script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bs-docs-sidebar').affix({
offset: {
top: 10
}
})
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '7');
}
});
$(function($) {
$('#deleteCookie').click(function() {
$.cookie('pop', null);
window.location.reload();
});
});
</script>

Develop Reference

JavaScript is the programming language of the Web.

Pagignation inside modal does not work - javascript

Related

Popup not triggered for the second time

How to update a class inside modal body?

variable scope empty in html after edit in controller

Dynamic bootstrap modal

create cookie on Modal Window

Categories

Resources