Main objective:
Be able to click on a day from the calendar plugin then have a popup of a bootsrap modal with events that are listed for that day.
Whats going on:
I'm using a javascript plugin fullcalender. This plugin has a dayClick event which I am using. Once clicked I have ajax code to pass values to the post as shown:
<div id="calendar"></div>
#Html.Partial("Modal",null)
...
<script>
$(document).ready(function () {
$('#calendar').fullCalendar({
height: 170,
selectable: true,
editable: true,
defaultView: 'basicWeek',
dayClick: function (date, jsEvent, view) {
$.ajax(
{
url: '#Url.Action("Index","Home")',
type: "POST",
data: JSON.stringify({ date: date }),
dataType: "json",
contentType: "application/json; charset=utf-8",
cache: false
})
$("#myModal").modal();
}
});
});
</script>
from here it goes to the controller then forces related data to a partial view. Which by debugging I believe is doing it properly.
[HttpPost]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public ActionResult Index(string date)
{
if (date != null)
{
string[] dateSplit = date.Split(new char[] { 'T' });
DateTime objDate = Convert.ToDateTime(dateSplit[0]);
var content = db.Calendars.Where(x => x.startDate == objDate).ToList();
return PartialView("~/Views/Home/Modal.cshtml", content);
}
else
return PartialView("~/Views/Home/Modal.cshtml", null);
}
The problem:
Doesn't seem like data is being passed into the partial view, just the original null value. Thought passing data through the post of the index would populate the partial view.
Or could it be the javascript call $("#myModal").modal(); being called before data can populate? I've done some testing of throwing the if(Model != null) around all of the coding in the partial view and an else statement that would display a tag with elements in it. It always displays the tag.
Here is my View:
#model IEnumerable<webby.Models.Calendar>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="padding:20.5% 15%;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Events on #ViewBag.Date</h4>
</div>
<div class="modal-body">
<table>
#if(Model != null)
{
#foreach(var item in Model)
{
<tr>
<td>
#Html.DisplayFor(model => item.events)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.type)
</td>
</tr>
<tr>
<td>
#Html.DisplayFor(model => item.content)
</td>
</tr>
}
}
</table>
</div>
<div class="modal-footer">
<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>
your call to the modal
$("#myModal").modal();
needs to be done inside a .success function not in the dayClick function. And you need to pass it the result data of your ajax call.
Related
I have a table that has dynamic buttons which bring up a modal with info. Within the modal i want to add a new row to a table when i click a button.
I display the modal from within my main view, then call a partial to show the info inside the table in the modal.
From within the partial I've tried using append but doesn't seem to work, I thought jQuery could add to the table and I wouldn't have to invoke any kind of refresh.
My question is: how can I refresh my table from inside the partial?
I believe that jQuery is adding to the td but its just not being updated
EditApplication.cshmtl main view
<form method="POST">
<div class="modal fade" id="editAppModal" tabindex="-1" role="dialog" aria-labelledby="editAppModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editAppModal">Edit Application</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<input type="text" id="appName">
<input type="text" id="appShortName" style="width:15%">
<hr>
<table id="modalServerTB" style="border-collapse: separate; border-spacing: 5px 15px;">
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" asp-page-handler="UpdateApplication">Update Application</button>
</div>
</div>
</div>
</div>
</form>
jQuery in main view
<script>
$(document).ready(function(){
$(".selectRow").click(function(e)
{
e.preventDefault();
var row = $(this).closest("tr"),
tds = row.find("td:nth-child(1)").first(); //get row closest to click then grab first column info
var textval = $.trim(tds.text()); //tons of whitespace around the text, needs to be removed
$.ajax({
url: "EditApplication?handler=GetRowInfo",
type: "POST",
dataType: "json",
data: { textval },
beforeSend: function (xhr) {
xhr.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
},
complete: function (result) {
$("#appName").val(textval);
$("#appShortName").val(result.responseJSON);
$('#modalServerTB').load('/EditApplication?handler=ServerPartial');
$('#editAppModal').modal('show');
}
})
});
});
</script>
partial view
<tbody id="tableBody">
#foreach(var s in Model.serverUrl)
{
<tr style="border-bottom: 0.3px outset whitesmoke" >
<td style="width:40%">
<input type="text" value="#s.Key">
</td>
<td>
#foreach(var u in s.Value)
{
#Html.DropDownListFor(a=>u.Urlid, Model.urls, new{style = "width:50%", #class = "selectedURL"})
<br>
}
</td>
<td class="newURLS" style="border:solid 1px">
</td>
<button class="AddURLBtn"> + </button>
<br>
</tr>
}
</tbody>
<div>
<button type="button" class="btn btn-dark btn-sm" id="AddServerBtn">Add Server </button>
</div>
#Html.DropDownList("selectedURL",Model.urls, "Select URL" , new {style = "width:50%; display:none;", #class = "selectedURL", id="urlDDL"})
<script>
$(document).ready(function(){
$(".AddURLBtn").click(function(e)
{
e.preventDefault();
console.log("inaddurl");
$(".newURLS").append('sgagfsafsafsf');
});
});
</script>
As of right now i was just testing to see if i can add just text to the td but it doesn't seem to work
I am also passing a view model to my partial
Turns out you need a table tag for this to all work. With just TBody the div was not being created therefore my jquery function had no target
<table>
<tbody id="tableBody">
#foreach(var s in Model.serverUrl)
{
<tr style="border-bottom: 0.3px outset whitesmoke" >
<td style="width:40%">
<input type="text" value="#s.Key">
</td>
<td class="urlsTD">
#foreach(var u in s.Value)
{
#Html.DropDownListFor(a=>u.Urlid, Model.urls, new{style = "width:50%", #class = "selectedURL"})
<br>
}
</td>
<td>
<button class="AddURLBtn"> + </button>
</td>
</tr>
}
</tbody>
<div>
<button type="button" class="btn btn-dark btn-sm" id="AddServerBtn">Add Server </button>
</div>
</table>
I have a list of table for survey form and each one of them have a button/asp-action to view the answers of at least 3 competitors. but I need to select the competitors of a survey form using a modal. inside that modal, I should populate the body with a checkbox of competitors who answered that survey form. How can I push through to direct the data-toggle modal to the controller?
Here is my View:
#for (int i = 0; i < Model.SurveyNames.Count; i++)
{
<tr>
<td>
#Model.SurveyNames[i].SurveyName
</td>
<td>
#Model.SurveyNames[i].SurveyFor
</td>
<td>
#Model.SurveyNames[i].Description
</td>
<td>
#Model.SurveyNames[i].CreatedBy
</td>
<td>
#Model.SurveyNames[i].Status
</td>
<td>
<!-- Button trigger modal -->
<a asp-action="ViewCompetitors" asp-route-id="#Model.SurveyNames[i].Id" data-toggle="modal" data-target="#ChooseCompetitors">View Competitors</a>
</td>
</tr>
}
And this is my Controller, it should return the values to index modal:
public IActionResult Index(int? id)
{
var model = new CompetitorAnswerViewModel();
var SurveyList = _context.MainSurvey.ToList();
foreach (var zsurvey in SurveyList)
{
model.SurveyNames.Add(new survey { Id = zsurvey.Id, SurveyName = zsurvey.SurveyName, SurveyFor = zsurvey.SurveyFor,Description = zsurvey.Description,CreatedBy = zsurvey.CreatedBy,Status = zsurvey.Status}) ;
}
var competitorList = _context.SurveyCompetitor.ToList().Where(x => x.MainSurveyId == id);
foreach (var competitors in competitorList)
{
model.CompetitorNames.Add(new Competitor { CompetitorName = competitors.CompetitorName});
}
return View(model);
}
I should populate the body with a checkbox of competitors who answered that survey form. But it doesn't forward to the controller whenever I click "View Competitors".
I want the table data id to pass it to the contoller to filter the survey competitors and then return the filtered data to the modal in the same index
You could put the Competitors view in a partial view and render it to Index view using ajax.
1.Create the partial view in Shared folder /Views/Shared/_CompetitorsPartialView.cshtml
#model YourViewModel
<div class="col-md-12">
Your View
</div>
2. Return the filtered data to this partail view
public IActionResult ViewCompetitors(int id)
{
// filter logic
return PartialView("_CompetitorsPartialView",YourViewModel);
}
3.Use ajax in Index view.
Modify <a> to <button>:
<button id = "ViewCompetitors" onclick="viewCompetitor(#item.CustomerId)">View Competitors</button>
Modal and ajax:
<div class="modal fade" id="ChooseCompetitors" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Header</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div id="showresults"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#section Scripts{
<script>
function viewCompetitor(id) {
$.ajax({
type: 'Get',
url: '/Home/ViewCompetitors/' + id,//your url
success: function (result) {
$("#ChooseCompetitors").modal();//open modal
$('#showresults').html(result);//populate view to modal
}
})
}
</script>
}
How to Display a Datatable in Modal Popup with out using partial view.
hear is the my indax.cshtml
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork">Branch Network</button>
<div class="modal fade" id="itemModel" 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"> Branch Network</h4>
</div>
<div class="modal-body no-padding">
<div style="width:100%; margin:0 auto;">
<table id="branchTable">
<thead>
<tr>
<th>BranchName</th>
<th>Address</th>
<th>Manager Name</th>
<th>Mobile</th>
<th>Telephone</th>
<th>fax</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color: #F5F5F5 !important;
}
</style>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
hear i'm using /Branch/GetBranchNetwork for getting Data.
#section Scripts{
<script>
$(document).ready(function () {
$('#branchTable').DataTable({
"processing": true, // for show progress bar
"ajax": {
cache: false,
url: "/Branch/GetBranchNetwork",
type: "POST",
datatype: "json",
},
"columns": [
{ "data": "branchName", "width": "5%", },
{ "data": "address"},
{ "data": "managerName"},
{ "data": "mobile"},
{ "data": "telephone"},
{ "data": "fax"},
]
});
});
</script>
}
popup Modal section
<script>
$('.btn-BranchNetwork').on('click', function () {
var url = '/Branch/BranchNetwork';
$.get(url, function (data) {
//debugger;
$('#ItemModelContent').html(data);
$('#itemModel').modal('show');
});
});
Method
[HttpPost]
public ActionResult GetBranchNetwork()
{
WebPortalEntities db = new WebPortalEntities();
var jsonData = new
{
data = from a in db.tbl_branchNetwork.ToList() select a
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
public ActionResult BranchNetwork()
{
return PartialView("_BranchNetwork");
}
_BranchNetwork.cshtml is my Partial view and no content there.
i want to without calling partial view.load data to modal dialog
So... just put the Modal on the parent page with the table defined in it. No need for modal. BUT the table will populate when the parent page populates.
change your button html to
<button type="button" class="btn btn-info btn-infolink btn-BranchNetwork"
data-toggle="modal" data-target="#itemModel">Branch Network</button>
I am trying to filter data based on a query. I am using a partial view to show the filtered data. However, nothing is updated in the partial view. How can I fix this?
Controller class:
public IActionResult Index() {
IEnumerable<Organisation> organisations = _organisationRepository.GetAll().OrderBy(b => b.Name).ToList();
if (isAjaxRequest()) {
string text = Request.Form["text"].ToString();
return PartialView("_Organisations", _organisationRepository.GetByName(text).ToList());
}
return View(organisations);
}
private bool isAjaxRequest() {
return Request != null && Request.Headers["X-Requested-With"] == "XMLHttpRequest";
}
Organisation View:
<form asp-controller="Organisation" asp-action="Index">
<div class="form-inline">
<div class="form-group">
<label for="text">Filteren in organisaties</label>
<input type="text" name="text" id="text" required pattern="^([0-9]{4}|[a-zA-Z]+)$">
<label for="selected"></label>
<select name="selected" id="selected" class="form-control">
<option value="name">Naam</option>
<option value="postalcode">Postcode</option>
</select>
</div>
<button type="submit" class="btn btn-default" id="search">Zoeken</button>
</div>
</form>
<div id="partial">
#Html.Partial("_Organisations", Model);
</div>
Partial view:
<table class="table table-striped table-condensed table-bordered">
<tr>
<th>Naam</th>
<th>Adres</th>
<th></th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#item.Name
</td>
<td>
#item.Location.ToString()
</td>
<td>
<a onClick="showForm(this, #item.OrganisationId)" href="#">Selecteer</a>
</td>
</tr>
}
Javascript file:
$("#search").click(function () {
$.ajax({
url: "Organisation/Index",
type: "post",
data: $("form").serialize(),
success: function (result) {
$("#partial").html(result);
}
});
});
Any help would be appreciated!
First answer (not correct): If it's not a typo, you forgot a $ in jquery $("#search").click(function () {.
New answer: I think here is the bug: you must prevent the normal behavior of the click event. Change your javascript function (2 modifications):
$("#search").click(function (e) {
e.preventDefault();
$.ajax({
url: "Organisation/Index",
type: "post",
data: $("form").serialize(),
success: function (result) {
$("#partial").html(result);
}
});
});
Now the function is taking e (the event) in parameter and before we make the Ajax call, we need to call e.preventDefault(); The bug was that the Ajax call returned the partial view, the #partial html was updated, but then the normal behavior of the "click" would reload the page with a HTTP GET request
I have a textbox that when the user enters a string and presses a button this is then compared to find which matching fields are in database. I also have another button that launches the display of a bootstrap modal which then views the results.
The issue I'm having is I only want one button but when I try to combine the two i get the modal and the string search never happens.
Can anyone tell me how I combine the two ?
Button 1 (search string button)
#using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<p>
<label for="platform" class="control-label">Enter Code:</label><br />
#Html.TextBox("filtername")
<input type="submit" value="Filter" "/>
</p>
}
Button 2 (Activates modal but no data comparision)
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="span7 text-center">
<input type="text" class="form-control" id="theCode" placeholder="Please Enter Code">
<input type="submit" value="Go!" class="btn btn-success" id="sendcoderequest" data-toggle="modal"
data-target="#basicModal2" />
</div>
</div>
</div>
Home/Index Method:
public ActionResult Index(string filtername)
{
var filterresults = from m in db.UserInfoes
select m;
filterresults = filterresults.Where(x => x.UserCode.ToString().Contains(filtername)).OrderBy(x => x.UserCode);
return View(filterresults);
}
Modal :
<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">Summary</h4>
</div>
<div class="modal-body">
<h2>Results</h2>
<span id="printCode"></span><br />
<div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>
<table class="table">
<thead>
<tr>
<th></th>
<th>Date</th>
<th>Test Type</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" class="checks">
</td>
<td>
#Html.DisplayFor(modelItem => item.CreationDateTime)
</td>
<td>
#Html.DisplayFor(modelItem => item.AppModeId)
</td>
</tr>
}
</tbody>
</table>
Code currently working with:
Form:
<form id="formid">
<label for="platform" class="control-label">Enter Code:</label>
<input type="text" name="filtername" />
<input type="submit" class="btn btn-success" value="Filter" />
</form>
JQuery:
$("#formid").submit(function () {
$.ajax({
url: "Home",
data: $(this).serialize()
}).done(function (response) {
$('#modal_content').html(response);
$('#basicModal2').modal('show');
});
return false; // prevent the form submission
});
Modal is unchanged.
You could use an AJAX call instead of the form submission. Then you could open the modal via Javascript once you receive the AJAX response. According to the tags, you're probably using JQuery, so it would look like this :
$("form").submit(function(){
$.ajax({
url: "Home",
data: $(this).serialize()
}).done(function(response){
// Fill your modal window with the response here
$('#basicModal2').modal('show');
});
return false; // prevent the form submission
});
Edit
You can find here an example that uses AJAX to send the filter name to the server, fill the modal with the server response and finally show the modal:
http://jsfiddle.net/yohanrobert/e3p4yv55/