I have a treeview on a view in mvc and when a user clicks one of the items I want to load a partial view to the right of the main treeview
I have a a helperresult inside a div that should load the view, but when I call it like this it just freezes the treeview and I cannot click any items.
Here is what I am trying
#helper RenderFirst()
{
<div class="treeview-back">
#Html.Action("Results", "Results");
</div>
}
</div>
</body>
</html>
</div>
<script>
var treeview;
var siteSelect = "Result1";
function onSelect(e) {
if (this.text(e.node) == siteSelect) {
#RenderFirst();
} else {
alert('false');
}
}
$(document).ready(function() {
treeview = $("#treeview").data("kendoTreeView");
});
</script>
if i replace #RenderFirst(); with this alert('true') it is fine.
I am using ASP.NET MVC4 with VS 2012 C#
Thanks for any help.
You're mixing server-side code with JavaScript which can't work. You should either use jQuery to insert the div element or render it when loading the page (make it invisible initially), then in onSelect:
$(".treeview-back").show();
Related
This question already has answers here:
Injecting content into specific sections from a partial view ASP.NET MVC 3 with Razor View Engine
(23 answers)
Closed 5 years ago.
The .hide function in my partial view is not rendering for second and third person initially, then the delay .hide and .fadein will not work either. I am new to js and jquery so I am probably missing something obvious... Why would this js script not be working inside of a partial view?
Everything works when it is all in the main view, but the reason I need a partial view is because I do not want to reload the entire page every 15 seconds. I have done some research and there might be something wrong with getting an html data type?
Main View:
#model IEnumerable<project.Models.MyList>
<div id="scrolllist">
#Html.Partial("_ScrollList")
</div>
#section Scripts{
<script>
function loadScrollListPV() {
$.ajax({
url: "#Url.Action("ScrollList")",
type: 'GET', // <-- make a async request by GET
dataType: 'html', // <-- to expect an html response
success: function(result) {
$('#scrolllist').html(result);
}
});
}
$(function() {
loadScrollListPV();
// re-call the functions each 15 seconds
window.setInterval("loadScrollListPV()", 15000);
});
</script>
}
Controller Action:
public ActionResult ScrollList()
{
return PartialView("_ScrollList", db.MyList.ToList());
}
Partial View:
#model IEnumerable<project.Models.MyList>
<div id="firstperson">
#*Get lastest record and display.*#
#foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Take(1))
{
}
</div>
<div id="secondperson">
#*Get second lastest record and display.*#
#foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(1).Take(1))
{
}
</div>
<div id="thirdperson">
#*Get third lastest record and display.*#
#foreach (var donor in Model.OrderByDescending(p => p.ProcessTime).Skip(2).Take(1))
{
}
</div>
#section Scripts{
<script>
$("#secondperson").hide();
$("#thirdperson").hide();
function person() {
$("#firstperson").delay(5000).hide(0, function () {
$("#secondperson").fadeIn();
$("#secondperson").delay(5000).hide(0, function () {
$("#thirdperson").fadeIn();
$("#thirdperson").delay(5000).hide(0, function () {
$("#firstperson").fadeIn();
person();
});
});
});
}
</script>
}
Any help would be awesome and thanks in advance!
I am not 100% sure here, but I think there may be a problem with rendering the #script section in partial views according to this answer. It is mentioned that Partial Views are not able to use the #section element by default.
Try removing the razor syntax around the script section and just use:
<script type="text/javascript">
$("#secondperson").hide();
$("#thirdperson").hide();
function person() {
$("#firstperson").delay(5000).hide(0, function () {
$("#secondperson").fadeIn();
$("#secondperson").delay(5000).hide(0, function () {
$("#thirdperson").fadeIn();
$("#thirdperson").delay(5000).hide(0, function () {
$("#firstperson").fadeIn();
person();
});
});
});
}
</script>
1) Remove the #section Scripts{ and your code will work.
2) You should avoid the callback hell of hide() and fadeIn(). If there are 10 divs, you'd have to add 10 layers of that code. The below approach would work with any number of divs in your partial view:
You can assign your divs a class. Make only the first div visible by default. Create a function which will be called every 5 seconds.
// gets the currently visible div. Hides it.
// If this is last content `div`, shows the first div, else shows the next div
function incremental() {
$visible = $(".content-div:visible");
$visible.hide();
$visible.next().is('.content-div')
? $visible.next().fadeIn()
: $(".content-div").first().fadeIn();
}
setInterval(incremental, 3000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-div">first content</div>
<div class="content-div" style="display:none">second content</div>
<div class="content-div" style="display:none">third content</div>
This partialIntervalRef variable will be defined in the global scope (Main View). And every time before loading your partial view, you should clear it.
<script>
var partialIntervalRef;
function loadScrollListPV() {
clearInterval(partialIntervalRef);
-----
----
}
This is much more cleaner and extensible than the using the callbacks.
3)window.setInterval("loadScrollListPV()", 15000) should be changed to window.setInterval(loadScrollListPV, 15000)
You can't call a section from within a partial view. You can call it as an action with Layout = null; to achieve a similar result.
I have a checkbox in the NavBar element of my ASP MVC 5 site. The state of that checkbox is used on each page to determine if the Grid will show Inactive records in addition to active records.
I have a static class with a static prop that I am trying to write to from the _Layout.cshtml with some jQuery so that each of my controllers can check that same prop on there Index() method.
I tried the below but then I realized that it wouldn't work as one is Client and the other Server.
So, is there a way to do this or something similar?
_Layout.cshtml (html)
<div class="nav pull-right checkbox navbar-btn">
#Html.CheckBox("ShowInactive", false) Show Inactive
</div>
_Layout.cshtml (JS, very bottom)
<script type="text/javascript">
$(document).ready(function () {
$("#ShowInactive").prop("checked", #HttpContext.Current.Application["ShowInactive"]);
$("#ShowInactive").click(function () {
if (this.checked) {
#HttpContext.Current.Application["ShowInactive"] = true;
}
else
{
#HttpContext.Current.Application["ShowInactive"] = false;
}
//This is to make the grid reload after the checkbox is changed.
location.reload();
});
});
</script>
GlobalVariables.cs
public static class GlobalVariables
{
public static bool ShowInactive
{
get { return (bool)HttpContext.Current.Application["ShowInactive"]; }
set { HttpContext.Current.Application["ShowInactive"] = value; }
}
}
Use this :
document.getElementById('ShowInactive').checked = true;
OR
$('#ShowInactive').attr('checked', 'checked');
OR
$("#ShowInactive").prop("checked", true);
$(document).ready(function () {
$("#ShowInactive").prop("checked", true);
});
I am using window popup and selecting template from that window. Now I want to show selected html template in ckeditor in another window.
I tried following code but is showing me html content in ckeditor instead of html template.
function sendValue(selvalue){
$.getJSON("A2B_entity_mailtemplate.php", { id: ""+ selvalue, action: "load" },
function(data){
window.opener.CKEDITOR.instances.msg_mail.setData(unescape(data.messagetext));
window.opener.document.getElementById('from').value = data.fromemail;
window.opener.document.getElementById('fromname').value = data.fromname;
window.opener.document.getElementById('subject').value = data.subject;
window.close();
});
}
I have also tried following but it is also not working for me.
if (window.opener.CKEDITOR.instances.msg_mail.mode == 'wysiwyg') {
window.opener.CKEDITOR.instances.msg_mail.insertHtml(unescape(data.messagetext));
} else {
window.opener.CKEDITOR.instances.msg_mail.setMode('wysiwyg', function() {
window.opener.CKEDITOR.instances.msg_mail.insertHtml(unescape(data.messagetext));
window.opener.CKEDITOR.instances.msg_mail.setMode('source');
});
}
So how can I get html template instead of html content in ckeditor?
Any help/suggestion would be appreciated.
I am trying to display the Jquery dialog when the JSP loads. I check for a flag from the bean (showPopupFlag), so this is different from user clicking a button on a already loaded page.
I am trying to push some data into the pop when it displays using the dialogContent.
Is this possible to send/push data to the dialog (I know it is) but some how I am missing something. Any help is appreciated. - Thanks
My html code is
<div id="dialogId" title="JqueryDialogTest">
<div id="dialogContent"></div>
</div>
My included Js is
$(document).ready(function () {
$(function(){
$("#dialogId")
.dialog({autoOpen: false, modal : true} );
} );
});
$(function(){
if($("#showPopupFlag").val() === "true") {
$("#dialogContent").html($("#displaySubjectNotFoundPopup").val());
$("#dialogId").dialog("open");
}
});
You are messing up the auto execute function and the document ready block. So you can do achieve it by :
//document ready block
$(document).ready(function () {
//initialize the dialog ui box
$("#dialogId").dialog({
autoOpen: false,
modal: true
});
//auto executing function
//or you could simply remove the function and let the code block be executed on document ready
(function(){
if($("#showPopupFlag").val() == "true") {
$("#dialogContent").html("someValue");
$("#dialogId").dialog("open");
}
}());
});
And here is the demo JSFIDDLE
I have a dropdown that will trigger the ChangeGraph javascript function. In Chrome/Firefox, when my partial view (.ascx) is loaded, I get the hello alert. This is not the case in IE. Any ideas on how to solve this. Basically I can't initiate a javascript function once the ascx page is written using "$('#GraphForm').html(data);"
From my Index.aspx:
<div id="GraphForm"></div>
Javascript:
function ChangeGraph(displayTypeId) {
$('#GraphForm').html("");
$.get('/Dashboard/GetGraphForm', { id: displayTypeId }, function(data) {
$('#GraphForm').html(data);
});
}
Controller:
public PartialViewResult GetGraphForm(int id)
{
//... Build Model (removed)
return PartialView("EnergyConsumedFormView"/* , model */);
}
EnergyConsumedFormView.ascx Javascript:
<script type="text/javascript">
$(document).ready(function() {
alert('hello');
});
</script>
I'm new to javascript so the answer wasn't obvious until I figured it out. Know it seems REAL obvious. Just call the function if you don't care if the document is ready...
<script type="text/javascript">
alert('hello');
</script>