I am displaying a list of Topics on a modal popup window, where on the modal I have two Buttons next and previous.I want When i click on the previous button it shows the previous 10 topics and when i click on the next button it shows the next 10 topics. My Template code is this
<div class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="topic_selector_label">Quiz Settings</h4>
</div>
<div class="modal-body">
<table class="table table-striped table-bordered table-condensed table-hover " >
<tbody>
{{#each topics}}
<tr>
<td>
{{name}}
</td>
</tr>
{{/each}}
</tbody>
</table>
<button type="button" class="btn btn-default" id="previous_topics">Previous Topics</button>
<button type="button" class="btn btn-default pull-right" id="next_topics">Next Topics</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div>
and my js code is
'click #next_topics':function(){
var LIMIT=2;
skip_topics=skip_topics+2;
var syllabus = Meteor.syllabi.findOne(Session.get("currentSyllabusId"));
topics= Meteor.topics.find({subject_id: syllabus.subject_id, level_id: syllabus.level_id},{skip:skip_topics,limit:1})
return Template.syllabus_design({topics:topics})
},
I want to change the list of topics on next and previous button click
If I understand correctly your problem is due to the template not refreshing on click,
see this: https://github.com/meteor/meteor/issues/1172#issuecomment-19832727
try making skip_topics a Session variable and print that variable in your template - the same way that awatson1978 suggests in the github issue using his/her form_changed session variable.
For deeper understanding of what went wrong in your code see http://docs.meteor.com/#reactivity
Related
Hi When I use boostrap modal box ; Than php code takes only the first item of my table..;
$sonuc['proje_ismi'] is working normal in button and change everyline as database:
But when I put it on bootstarp modal box, it only takes the first item. Why is that?
And how can I solve it with a simple way?
Thanks for advices.
<td>
<button type="button" id="view_files" name="view_files" data-name="'.$proje_ismi.'" data-toggle="modal" data-target="#myModal" class="view_files btn btn-default btn-sm"><font size="2" >
<?php echo $sonuc['proje_ismi'] ?></font></button>
<div class="modal fade" id="myModal" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Proje Dosyaları</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<th>Dosya İsimleri </th>
</tr>
<tr>
<th>
<div class="modal-body" id="file_list">
<?php
$projeler = $sonuc['proje_ismi'] ;
echo $projeler;
$folder = array_filter(glob(''.$projeler.'/*.*'));
print_r($folder);
?>
</th>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</td>
For information:
I couldnt solve the problem with bootsrap but I solved problem with lightbox css...
I download lightbox2-2.11.1 css documant and did the following at the web site below:
https://lokeshdhakar.com/projects/lightbox2/#help
I am working with django templates, there is a part where I have a modal which has various textboxes in the form of a table. I need to send the data from parent web page to next web page in the form of a python list and display the data on parent page in a systematic form like table. Presently i get data to parent page using:
$('#save-button').text()
using text(), the data I get is:
Capacity
23
extra Capacity
34
threshold
44
The modal is as:
<div class="modal fade" id="Firstmodal" 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">Add values</h4>
</div>
<div class="modal-body">
<p>
<div id="table" class="table-editable">
<table class="table table-striped" id="tblone">
<thead id="tblHead">
<tr>
<th>Parameters</th>
<th>Add values</th>
</tr>
</thead>
<tbody id="onetbl">
<tr><td>Capacity</td>
<td contenteditable="true"></td></tr>
<tr><td>extra Capacity</td>
<td contenteditable="true"></td></tr>
<tr><td>threshold</td>
<td contenteditable="true"></td> </tr>
</tr>
</tbody>
</table>
<button id="btnSave-one" onClick="reply_click(this)" class="btn btn-primary">Save Changes</button>
<p id="export"></p>
</div>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
How can i convert the data from modal to list, so that i can pass to next web page and display on parent page as a table as well? Thanks.
I was trying to figure out how to pass a variable to a model. For example, I have a table that have lists of student. I want to click one of them and have a modal popup that is matching that student. So I obviously need to pass some how the id in the table to the model. This is all in Asp.net using razor. And then after having that model popup I would like to edit and resubmit which then would refresh the table. Perhaps even have a success message. I am using the bootstrap so I was thinking of using the alert to say Successfully Updated! or something.
here is the code. Please help me to resolve this issue.
<body>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>Name</th>
<th>DNIS </th>
<th>Created by</th>
<th>Created Date</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td> #Html.DisplayFor(modelItem => item.service_name)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.dnis)</td>
<td class="center"> #Html.DisplayFor(modelItem => item.created_by) </td>
<td class="center"> #Html.DisplayFor(modelItem => item.date_time)</td>
<td class="center">
<a class="btn btn-success" href="~/Service/AssignSkillGroup/#item.service_name">
Add/Del SkillGroup
</a>
<a class="btn btn-info" href="~/Service/Edit/#item.service_name">
<i class="icon-edit icon-white"></i>
Edit
</a>
<a class="btn btn-danger" data-toggle="modal" data-id="#item.service_name" data-target="#myModal" >
<i class="icon-trash icon-white"></i>
Delete
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" href="/Service/Delete/">
Delete
<a><button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </a>
</a>
</div>
</div>
</span>
</body>
You can use bootstrap dialog event to achieve what you want :
//triggered when modal is about to be shown
$('#my_modal').on('show.bs.modal', function(e) {
//get id attribute of the clicked element (delete button)
var id = $(e.relatedTarget).data('id');
// do what you want with the id ..
});
You can make your modal like the following
<span class="modal" id="myModal" role="dialog" style="height: 175px">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" onclick="Close()" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Are you sure to want to delete this service ? </h4>
</div>
<div class="modal-body">
<p>If you delete the service, Wrap-up codes will not appear for this service</p>
</div>
<div class="modal-footer">
<a class="btn btn-default" id="del" >
Yes
</a>
<a class="btn btn-default" onclick="Close()">
No
</a>
</div>
</div>
</span>
The add the following script and call those methods through your delete button and pass the id to the script function.
<script>
function deleteFunction(id) {
$('#myModal').show();
var a = document.getElementById('del');
a.href = "/Service/Delete/" + id;
}
function Close()
{
$('#myModal').hide();
}
</script>
Well propably the title isn't that clear, i will try to explain the problem better.
i've got this modal:
<div id="modalFinestraErogazione" class="modal fade" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog higherWider">
<div class="modal-content">
<div class="modal-header">
<form:input path="codicePrescrizioneRiferimento" id="codicePrescrizione" type="hidden"/>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="chiudiErogazione()">×</button>
<h4 class="modal-title">Erogazione farmaci</h4>
</div>
<div class="modal-body">
<table class="table" id = "tabellaFarmaciPresccritti">
<tr><th>Farmaci prescritti</th><th>Dosaggi (die)</th><th>Durata confezione (Giorni)</th></tr>
</table>
<table class="table" id="tabellaErogati" bgcolor="#F8F8F8">
<tr><th class="col-sm-6">Farmaco</th><th class="col-sm-2">AIC</th><th class="col-sm-2">Targatura</th><th class="col-sm-1">Giorni</th><th class="col-sm-1"></th></tr>
</table>
<span class='col-sm-12 label-grande label-primary'>Note erogazione (a cura della farmacia)</span>
<div class='form-group'><textarea class='form-control' rows='3' id='nota'></textarea></div>
<div class='form-group'>
<span class="label-grande label-default">Durata complessiva terapia erogata (in giorni):</span>
<span class="label-grande label-default" id='durataComplessiva'></span>
<button type= "button" class="btn btn-primary pull-right" id="bottoneMessaggioMedico" style="width: auto;">Mostra messaggio del medico</button>
</div>
<div class='form-group'>
<table class="table">
<tr><th style="white-space:nowrap;">Tipo presidio: </th><td><select id="tipoPresidio" class="form-control"></select></td>
<th style="white-space:nowrap;">Tipo erogazione: </th><td><select id="tipoErogazione" class="form-control"></select></td></tr>
</table>
</div>
</div>
<div class="modal-footer">
<div class = "col-sm-offset-6 col-sm-6">
<div class = "col-sm-6">
<button type="button" class="btn btn-primary" onclick="salvaErogazione()">Eroga</button>
</div>
<div class = "col-sm-6">
<button type="button" class="btn btn-danger" data-dismiss="modal" onclick="chiudiErogazione()">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
that at some point i show using:
$("#modalFinestraErogazione").modal('show');
Everything works fine, i add and delete works from the tables etc, and when the window becomes too long i can sroll it down.
Sometimes when the user does someting wrong i show-up a warning pop-up using this code.
function finestraWarning(messaggio)
{
BootstrapDialog.show({
type : BootstrapDialog.TYPE_WARNING,
title : "Attenzione",
message : messaggio,
size: BootstrapDialog.SIZE_NORMAL,
buttons : [ {
label : 'OK',
cssClass : 'btn-warning',
action : function(dialog) {
dialog.close();
}
} ]
});
}
and everything still works fine, but when i close the warning dialog something goes wrong.
Suddenly i can scroll down the modal window anymore, instead when i use the scrollwheel the page in the background moves.
I can't figure out why.
What should i do so that when i close the warning window i can still scroll down the modal window?
I am using Twitter Bootstrap Modal as a search box.There are 3-4 divs from where User can call the modal and do the search. Search results are shown in table format on modal itself. When user clicks a row from search result, I have to take the selected row data and populate the parent div fields.How would I determine the respective parent div which called search modal?
Code
//initiates the modal
$('#searchClient').click(function() {
clearTable();
$('#searchModal').modal('toggle');
});
//reads data from clicked row
$("#clientSearchResult").delegate("tr", "click", function(){
alert($(this).html());
//??Find out the parent div and populate selected data
});
HTML
<div class="modal fade" id="clientSearchModal">
<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">Client Search</h4>
</div>
<div class="modal-body">
<div class="form-inline">
<input type="text" id="searchClientName" placeholder="Client Name">
<input type="text" id="searchNumber" placeholder="Number">
<button type="button" class="btn btn-primary" id="doClientSearch">Search</button>
</div>
</div>
<div class="modal-footer">
<table class="table table-hover table-bordered" id="clientSearchResult">
<thead>
<tr>
<th>Name</th>
<th>Tax Id</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
Not entirely sure what you're doing, but it sounds like you are trying to figure the source of the click event. If "searchClient" is the "parent divs" you are talking about, you should change their IDs to classes (e.g. <div class="searchClient">)
You could then do something like:
var parentClicked; //i'm global!
$('.searchClient').click(function(e) {
parentClicked = e.target;
///etc....
});