【发布时间】：2017-06-08 04:33:14
【问题描述】：
@{
ViewBag.Title = "iifl_conference";
Layout = "/Views/Shared/_ConferenceLayout.cshtml";
}
@model IIFLWeb.Models.Parents.EventsParent
@section Conference
{
<div class="search-ac-list">
@Html.DropDownList("ddlSpeaker", Model.lstSpeakerData, "Select Speaker", new { @onchange = "GetSearchedSpeakerData(this)", @class = "select2" })
</div>
}
主要问题是我无法在搜索中生成弹出窗口
function GetSearchedSpeakerData(val) {
var selectedSpeaker = val.value;
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: {"name": selectedSpeaker },
success: function (result) {
var SpeakData = '';
$.each(result, function (i, val) {
var SpeakerName = '';
SpeakData += ' <li>';
SpeakData += '<a href="#SpeakerPopup" onclick="GetSelectedSpeakerData(\'' + val.Name + '\');" data-effect="mfp-zoom-in" id="SpeakerDetails" class="open-popup-link popup-block">';
SpeakData += '<div class="height240">';
SpeakData += '<div class="circle-img">';
if(val.Name=="Panel Discussions")
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="Panel Discussions "/>';
}
else
{
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/' + val.ImageUrl + ' " alt="'+val.Name+'"/>';
}
SpeakData += '</div>';
SpeakData += '<h4>'+val.Title +'</h4>';
SpeakData += '<label class="speaker-date">';
SpeakData += +val.TimeSlot + ", " + val.Venue + " at "+val.SpeakerDate ;
SpeakData += ' </label>';
SpeakData += '</div>';
SpeakData += '<div class="speaker-bx">';
SpeakData += '<h3 id="SpeakerName">' + val.Name + '</h3>';
SpeakData += '<h4>' + val.Designation + '</h4>';
SpeakData += '</div>';
SpeakData += '</a>';
SpeakData += '</li>';
});
$("#UlProfileList ").empty();
$("#UlProfileList").append(SpeakData);
}
});
}
我从 dropdownlist 和名为 GetSearchedSpeakerData(val) 的 Ajax 函数名称中获取名称，我得到了特定的 div
现在 OnClick 的那个特定 Div 需要生成弹出窗口，为此我使用另一个名为 GetSelectedSpeakerData(val) 的 Ajax 函数名称，创建此函数以便在选择特定 div 时我得到“名称”值在该名称上的值是并且弹出窗口是从 ajax 函数GetSelectedSpeakerData(val).. 中创建的。
function GetSelectedSpeakerData(val) {
$.ajax({
type: "POST",
dataType: "json",
url: "/NewConference/getSearchedSpeaker",
data: { "name": val },
success: function (result) {
var SpeakData = '';
var Speaktopic='';
var Speaktab='';
$.each(result, function (i, val) {
var SpeakerName = '' ;
SpeakData += ' <div class="col-sm-3">';
SpeakData += ' <div class="circle-img">';
SpeakData += ' <img src="../../Upload/SpecialistSpeaker/'+ val.ImageUrl+ ' " alt=" '+val.Name+ '"/>';
SpeakData += '</div>';
SpeakData += '</div>';
SpeakData += '<div class="col-sm-9">';
if(val.Name=="Panel Discussions")
{
SpeakData += '<h3>Panel Discussion</h3>';
}
else
{
SpeakData += '<h3>'+val.Name+'</h3>';
}
SpeakData += '<h5>'+val.Designation+'</h5>';
SpeakData += '<h4>' + val.Title + '</h4>';
if(@Html.Raw(Json.Encode(ViewBag.IsVenue)) == true)
{
SpeakData += '<label class="speaker-date"> ( ' + val.SpeakerDate + ", " + val.TimeSlot + " at " + val.Venue + ')</label>';
}
SpeakData +='</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane active" id="Tab1-1">' + val.Description + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-2">' + val.CompanyDesc + '</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-3">';
Speaktopic += '<h4>' + val.Title + '</h4>';
Speaktopic += val.Topic +'</div>';
Speaktopic += '<div role="tabpanel" class="tab-pane" id="Tab1-4">';
Speaktopic += '<video controls class="VideoPlayer">';
Speaktopic +='<source src="http://www.iiflcap.com/IPad/Conference/Videos/2017/'+val.VideoUrl+'" type="video/mp4"></video></div>';
if (val.Description != "")
{
Speaktab += '<li role="presentation" class="active">';
Speaktab +=' <a href="#Tab1-1" aria-controls="Tab1-1" role="tab" data-toggle="tab">Profile</a>';
Speaktab +=' </li>';
}
if (val.CompanyDesc != "")
{
Speaktab +='<li role="presentation" >';
Speaktab +=' <a href="#Tab1-2" aria-controls="Tab1-2" role="tab" data-toggle="tab">Company</a>';
Speaktab +=' </li>';
}
if(val.Topic != "")
{
Speaktab +=' <li role="presentation">';
Speaktab +='<a href="#Tab1-3" aria-controls="Tab1-3" role="tab" data-toggle="tab">Topic</a></li>';
Speaktab +='</li>';
}
if(val.VideoUrl != "")
{
Speaktab +=' <li role="presentation">';
Speaktab += '<a href="#Tab1-4" aria-controls="Tab1-4" role="tab" data-toggle="tab">Video</a></li>';
Speaktab += '</li>';
}
});
$("#Details").empty();
$("#Details").append(SpeakData);
$("#Tabcontent").empty();
$("#Tabcontent").append(Speaktopic);
$("#Menutabs").empty();
$("#Menutabs").append(Speaktab);
}
});
}
我可以在浏览器上看到名为 div 的弹出 div 被命名为 #SpeakerPopup 但我看不到弹出窗口
<div id="SpeakerPopup" class="white-popup mfp-with-anim mfp-hide">
<div id = "Details" class="row">
<div class="col-sm-3">
<div class="circle-img">
<img src="resources/images/speakers/1.jpg"/>
</div>
</div>
<div class="col-sm-9">
<h3>Dr. Jim Walker</h3>
<h5>Renowned economist, Founder and Managing Director, Asianomic</h5>
<h4>"World War Three"</h4>
<label class="speaker-date">(Tuesday, 21 February, 8:30am at Golconda)</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<ul id="Menutabs" class="nav nav-tabs Border-0 popuptabs" role="tablist">
<li role="presentation"><a href="#Tab1-1" aria-controls="Tab1-1" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation" class="active"><a href="#Tab1-2" aria-controls="Tab1-2" role="tab" data-toggle="tab">Company</a></li>
<li role="presentation"><a href="#Tab1-3" aria-controls="Tab1-3" role="tab" data-toggle="tab">Topic</a></li>
<li role="presentation"><a href="#Tab1-4" aria-controls="Tab1-4" role="tab" data-toggle="tab">Video</a></li>
</ul>
<div id="Tabcontent" class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Tab1-1">
<p>hello </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-2">
<p>HEllo</p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-3">
<h4>"World War Three"</h4>
<p>hi </p>
</div>
<div role="tabpanel" class="tab-pane" id="Tab1-4">tttddd
</div>
</div>
</div>
</div>
</div>
【问题讨论】：
标签： javascript c# jquery ajax model-view-controller