I have a Kendo splitter control with left/right panes. Inside the left pane I have a Kendo panel bar control that builds a navigation menu. Unfortunately I inherited this from another developer that left the company and I'm not familiar with the Kendo control.
It all works, but when the user clicks on a menu item, the entire page refreshes, That's for the birds! I want only the right panel to refresh.
Here's the code for the for the layout page:
<body>
#(Html.Kendo().Splitter().Name("splitter").Panes(panes => {
panes.Add().Size("220px").Collapsible(true).Content(#<text>
#Html.Partial("_Panelbar")
</text>);
panes.Add().Content(#<text>
<section id="main">
#RenderBody()
</section>
</text>);
}))
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text]').addClass('k-textbox');
});
</script>
#RenderSection("scripts", required: false)
</body>
and here's the code for the panel partial view:
#(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
corp.Add().Text("Vendors").Action("Index", "Vendor");
corp.Add().Text("Materials").Action("Index", "CostMaterials");
corp.Add().Text("Packaging").Action("Index", "CostPackaging");
corp.Add().Text("Reports").Action("UnderConstruction", "Home", new { pageTitle = "Reports" });
});
}))
I tried replacing the .Action method on the PanelBar with LoadContentsFrom method. That replaced the content in the left pane. So I guess my question is, how do I target the right side of the splitter control?
Any help would be appreciated.
Thanks
-Alex
Your code maybe like this:
#(Html.Kendo().PanelBar().Name("panelbar")
.SelectedIndex(0)
.Items(items => {
items.Add().Text("Corporate").Items(corp =>
{
corp.Add().Text("Vendors").Url("javascript:void(0);")
.HtmlAttributes(
new {
#class= "helloWorld",
#data-href="/Vendor/Index"
});
});
}))
<script>
$document.ready(function(){
$('.helloWorld').click(function(){
var href = $(this).attr('data-href');
$('#main').load(href);
});
});
</script
UPDATE
There is one thing very important: I think the view /Vendor/Index have the same template with your current page.
It means that when you load /Vendor/Index into the right side. The right side will include entire content (include left panel again).
Solution
You have to create a new view(a template) , which just include your left menu,banner,...
Then, You have to remove all template of other views (which will be loaded into right side - /Vendor/Index , /CostMaterials/Index,...)
2.This way is not a good approach. But I think It will work.
//Reference : Use Jquery Selectors on $.AJAX loaded HTML?
<script>
$document.ready(function(){
$('.helloWorld').click(function(){
var href = $(this).attr('data-href');
$.ajax({
type: 'GET',
url: href,
success: function (data){
var rHtml = $('<html />').html(data);
$('#main').html(rHtml.find('#main'));
}
});
});
});
</script
Related
I have a jquery to show links in a div without reloading page:
jQuery Code:
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$("#content").load( $(this).attr("href") + " #content");
})
});
</script>
everything is fine and working, but this is so simple! how i can add a loading image before content loading in this code?
and second question, is there any way to show a new page link in address bar after loading?
You can use the call back function to remove the loader.
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function(event) {
// Prevent default click action if javascript is enabled
event.preventDefault();
//load the content of the new page into the content of the current page
$('#loader').show(); // Show some hidden loader on the page
$("#content").load( $(this).attr("href") + " #content", function() {
$('#loader').hide(); // Hide the loader when it completely loads the given URL.
});
})
});
</script>
For your second question this should be the answer. Change the URL in the browser without loading the new page using JavaScript
Apologies in advance if this becomes a very long question...
Background Info
I have an MVC 3 application, using Telerik components and this particular issue is specific (I think) to the Window() component.
From my main view (Index.cshtml) I executing an ajax request to return a partial view which is what I am populating the contents of my window with. This is the jquery which is executing the request:
var url = '#Url.Action("GetAddPart", "Jobs")';
var window = $("#Window").data("tWindow");
var data = $("#indexForm").serialize();
window.ajaxRequest(url, data);
window.center().open();
the controller action is:
[HttpGet]
public ActionResult GetAddPart(MDTCompletedJobM model)
{
// show the AddPart window
//TryUpdateModel<MDTCompletedJobM>(model);
model.ActionTakenList = ActionTakenList;
model.ProblemTypes = ActualProblemList;
var addPartM = new MDTAddPartM() { CompletedJobM = model };
return PartialView(string.Concat(ViewDefaultUrl, "AddPart.cshtml"), addPartM);
}
this opens my window hunky dory.
in my partial view i have a form with two or three fields and an "Add", "Cancel button. For the sake of brevity I'll just show what I think are the relevant parts of the partial view, but i can produce the entire view if need be:
<div id="resultDiv">
#using (Html.BeginForm("AddPart", "Jobs", FormMethod.Post, new { id = "addPartForm", name = "addPartForm" }))
{
** layout components removed from here **
<input type="button" value="Add" class="t-button" id="btnAdd"/>
<input type="button" value="Cancel" class="t-button" id="btnCancel"/>
<p />
<div id="progressdiv">
</div>
}
</div>
is the "top level" tag in the partial view.
my jquery to handle the Cancel button is:
$("#btnCancel").click(function () {
var window = $("#Window").data("tWindow");
window.close();
});
In my main view, I have a submit button, which when completed effectively reders the main view "disabled" or displays errors. The action for this submit button returns the main view:
Controller's action snippet:
if (ViewData["DoPayJobWarningStr"] == null)
return RedirectToAction("GetAutoDispatchJob", new { autoDispatchJob = model.JobReferenceNumber});
else
return View(string.Concat(ViewDefaultUrl, "Index.cshtml"), tmpModel);
My actual problem
For a specific example I am using, I am expecting ViewData["DoPayJobWarningStr"] NOT to be null, there the return View(...) will be executed.
if I execute this action (for the submit button) without opening the window, my view returns correctly and the page is updated to show the warning message. However, if I open the window first then execute the submit button, the View isn't updated on the page, but seems to be placed into the Window's html. ie, if I hit the submit button (nothing happens), then click on the button which opens the Telerik window, I briefly see the View returned by the submit Action being shown before it's updated with what the Partial View should contain. I don't understand at all how or why the returned View is being placed there?
Things I've tried:
Commenting out the ajax request (window.ajaxRequest(url, data);) fixes the issue (even though I obviously have a blank partial view to look at).
Not making the Partial View a "Form" doesnt' work
No matter how I "close" the window, the view is still placed within there. eg clicking the x in the top right hand corner
Using Firebug, the HTML after the submit button is clicked is not updated.
Rather than using "window.ajaxRequest(url, data)", i've also tried (with the same result):
$.ajax({
type: "GET",
cache: false,
url: url,
data: $("#indexForm").serialize(),
success: function (data) {
var window = $("#Window").data("tWindow");
window.content(data);
window.center().open();
$("#progress").html('')
},
error: function (e) {
alert(e.Message);
}
});
Is it all possible to determine what I am doing wrong? Is it the ajax request? Only assuming that because removing it fixes the issue, but there might be more to it than that.
Thanks and of course if you need more info, ask :)
Thanks
EDIT
After suggestions from 3nigma, this is what I've updated to (still no luck)...
Telerik window definition:
#{Html.Telerik().Window()
.Name("Window")
.Title("Add Part")
.Draggable(true)
.Modal(true)
.Width(400)
.Visible(false)
.Height(270)
.ClientEvents(e => e.OnOpen("onWindowOpen"))
.Render();
}
jquery function which is an OnClick event for a button:
function AddBtnClicked() {
$("#Window").data('tWindow').center().open();
}
the onWindowOpen event:
function onWindowOpen(e) {
//e.preventDefault();
var data = #Html.Raw(Json.Encode(Model));
var d2 = $.toJSON(data);
$.ajax({
type: 'GET',
url: '#Url.Action("GetAddPart", "Jobs")',
data: d2,
contentType: 'application/json',
success: function (data) {
var window = $("#Window").data("tWindow");
window.content(data);
$("#progress").html('');
},
error: function (xhtr, e, e2) {
alert(e +'\n' + xhtr.responseText);
}
});
};
OK.
Issue was related to this line in the Partial View:
<script src="#Url.Content("~/Scripts/ValidationJScript.js")" type="text/javascript"></script>
As soon as I took that out, it all works. Not sure why that was causing the issue - I don't think it had been previously been loaded but maybe it had which was causing the problem.
Thanks to 3nigma for your thoughts, nonetheless!
I am using validation engine from http://www.position-absolute.com/ site.
The validation is applied on the div tag which is opened as popup on parent page.
Issue : when error message is shown on a control, it is appearing behind the div.
Search to similar issue suggest the usages of z-index, but how to control the z-index of error message poping from validation engine? Giving high number to div z-index:99999 did not work.
Please help
just change your script as
<script type="text/javascript">
$(function () {
$(".primary").click(function () {
$(".formError").remove();
});
$(".close").click(function () {
$(".formError").remove();
});
$("#yourformid").submit(function (ev) {
ev.preventDefault();
var validForm = $("#yourformid").validationEngine('validate');
$(".formError").css("z-index", 15000);
if (validForm) {
$("#yourformid").submit();
}
});
});
</script>
it works fine
So I have a view that allows users to Approve or Reject items listed on the page. When approved, I simply use the #Ajax.ActionLink to post to the appropriate controller action. When the user Rejects an item, the user is required to enter a reason for the rejection. I'm found code on the internet that gave me a popup dialog and added a textbox and OK/Cancel buttons. I can capture the input from the user and show it in an alert, but now I need to complete it and I'm not sure how.
1st - I need add functionality to pass to my jquery link handler, the ID associated with the Item being rejected.
2nd - I need a way to call my Controller Action from the jquery.
Here is the code I have up to this point.
My link is simply an 'a' tag. I can't see to post the code for this without removing the <>
a href="#dialog" name="modal" Reject a
My script handles this here
$(document).ready(function () {
//select all the a tag with name equal to modal
$('a[name=modal]').click(function (e) {
//Cancel the link behavior
e.preventDefault();
//Get the A tag
var id = $(this).attr('href');
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({ 'width': maskWidth, 'height': maskHeight });
//transition effect
$('#mask').fadeIn(1000);
$('#mask').fadeTo("slow", 0.8);
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top', winH / 2 - $(id).height() / 2);
$(id).css('left', winW / 2 - $(id).width() / 2);
//transition effect
$(id).val('');
$(id).fadeIn(2000);
});
Here is my pop up dialog and the mask that grays out the screen when the dialog is opened.
<div id="boxes">
<div id="dialog" class="window">
Enter the reason for rejection:</br>
<textarea class="multiline" id="rejectreason" rows="10" cols="20"></textarea><br/>
<div style="margin-left: 120px"><input type="button" value="OK" class="ok" style="width:70px"/> <input type="button" value="Cancel" style="width:70px" class="close"/>
</div>
</div>
<!-- Mask to cover the whole screen -->
<div id="mask"></div>
</div>
It could be that I'm going about this completely wrong, but it's all I could find on line and pieced it all together from there. As this is my first experience with jquery and MVC, I'm struggling a bit here. Any help would be greatly appreciated.
Thanks
UPDATE
OK, so I added a data-id attribute to my link that allows me to get the ID of the link clicked. I tested it using this code and it works.
var iD = $(this).attr('data-id');
I now need to pass this value to my dialog so I can then retrieve it again when the OK button on the dialog is clicked. I can set a hidden field on the page if necessary and retrieve it from there.
Here is some code to get you on the right path...
jQuery Ajax:
$(document).ready(function () {
$("#InputButtonId").click(function () {
$.ajax({
url: '#Url.Action("SomeAction", "Controller")',
type: 'POST',
data: { id: $("#hidden").val(), reason: $("#rejectreason").html },
dataType: "json",
beforeSend: function () {
},
success: function (result) {
// Do action if success
},
error: function (result) {
// Do action if error
}
});
return false;
});
});
And the controller action:
[HttpPost]
public JsonResult SomeAction(string id, string reason)
{
//Perform Actions
return Json(new
{
value1 = value1,
value2 = value2
}, JsonRequestBehavior.AllowGet);
}
Hope this helps.
I want to hide a button until other button is getting submitted.
ex. button1 is hidden.
button 2 visible
if(button2 submitted)
button 1 get visible.
can you tell a method to do that??
I'm rather new to jQuery, but I believe this may work:
HTML:
<form id="someform">
...
</form>
JS:
$(function() {
$('#button1').hide();
}
$('#someform').submit(function() {
$('#button2').show();
}
Try this:
$('#button1').bind('click', function() {
$(this).hide();
$('#button2).show();
});
$('#button2').bind('click, function() {
$(this).hide();
$('#button1).show()
});