In Home Created Index as on View and PartialView as ViewData
But Div is not getting refresh.
<script type="text/javascript">
$(document).ready(function () {
var refreshid = setInterval(function () {
alert("test");
$("#dynamictabs").load("/Home/Index/")
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
<div class="dynamictabs">
#Html.Partial("ViewData", #Model);
</div>
Try the following:
<script type="text/javascript">
$(document).ready(function () {
window.setInterval(function () {
var url = '#Url.Action("SomePartial", "Home")';
$('#dynamictabs').load(url)
}, 9000);
$.ajaxSetup({ cache: false });
});
</script>
<div class="dynamictabs">
#Html.Partial("SomePartial")
</div>
and then you will have a controller:
public class HomeController: Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult SomePartial()
{
return PartialView();
}
}
and then you will have a SomePartial.cshtml:
#DateTime.Now
Could you explain more on what you are trying to do here, please? Based on your code I see you have set your interval to 9 seconds. And you are trying to load content from home/index into #dynamictabs. Is this element on the same page?
Related
Why Marionette events are not triggered when I access a URL?
When I access the URL it suppose to call the function API.goHome()
but it doesn't! I don't understand why?
Here is my Code:
App.js
var PatientPortal = new Marionette.Application();
PatientPortal.addRegions({
'headerRegion': '#header',
'bodyRegion': '#body',
'footerRegion': '#footer'
});
PatientPortal.on("before:start", function () {
console.log("Started");
});
PatientPortal.navigate = function (route, options) {
options || (options = {});
Backbone.history.navigate(route, options);
};
PatientPortal.getCurrentRoute = function () {
return Backbone.history.fragment
};
PatientPortal.on("start", function(){
if (Backbone.history) {
Backbone.history.start();
}
if(PatientPortal.getCurrentRoute() == ""){
PatientPortal.navigate('home');
}
});
PatientPortal.start();
and Router Code:
PatientPortal.module("Portal", function (Portal, PatientPortal, Backbone, Marionette, $, _) {
Portal.Router = Backbone.Marionette.AppRouter.extend({
controller: "API",
appRoutes: {
"": "goHome",
"home": "goHome"
}
});
var API = {
goHome: function () {
console.log("go home");
}
};
PatientPortal.on("home:route", function () {
console.log("OKOKOK")
API.goHome();
});
PatientPortal.addInitializer(function () {
new Portal.Router({
controller: API
});
});
});
and here a home page code:
<!DOCTYPE html>
<html>
<head>
<title>INSAH - Login Page</title>
</head>
<body>
<div id="header"></div>
<script src="./js/assets/provider/jquery/jquery-2.1.1.min.js"></script>
<script src="./js/assets/provider/underscore/underscore-min.js"></script>
<script src="./js/assets/provider/backbone/backbone-min.js"></script>
<script src="./js/assets/provider/backbone/backbone.babysitter.min.js"></script>
<script src="./js/assets/provider/backbone/backbone.wreqr.min.js"></script>
<script src="./js/assets/provider/marionette/backbone.marionette.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/routes/route.js"></script>
</body>
</html>
Thanks.
I figured out the problem, it was because of starting the backbone history, the AddInitializer functuion shoudl be as following:
PatientPortal.addInitializer(function () {
new Portal.Router({
controller: API
});
Backbone.history.start();
});
and we should remove this line from app.js:
Backbone.history.start();
Im using jQuery to delete and fade the item container. This code will delete and fade div class box2. what i want to do this to fade div class box1. without changing the delete link to box1.
if anyone can point me out how to do this, highly appropriated. thanks in advace.
<div class="box1">
<div class="box2">
x
</div>
</div>
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('#load').hide();
});
$(function () {
$(".delete").click(function () {
$('#load').fadeIn();
var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id=' + id;
$.ajax({
type: "POST",
url: "delete.php",
data: string,
cache: false,
success: function () {
commentContainer.slideUp('slow', function () {
$(this).remove();
});
$('#load').fadeOut();
}
});
return false;
});
});
</script>
Try this code :
$(function() {
$('#load').hide();
$('.delete').click(function(){
$('#load').fadeIn();
$(this).parent().slideUp('slow', function () {
$('.delete').appendTo('.box1')
$(this).remove();
$('#load').fadeOut();
});
return false;
})
})
If you change it to var commentContainer = $(this).parent().parent();. It will now target .box1. You can then unwrap .box2 :
commentContainer.slideUp('slow', function() {
$('.box2').unwrap();
$(this).remove();
});
I believe you want
var commentContainer = $(this).parent().parent();
to get to .box1 and not .box2 Does that solve the problem?
Just a couple of comments though. A valid id should start with an alphabetic character. The digit '1' is not valid. 'a1' would be better, or just 'a'. Also use the ajax callback done rather than success as it is currently deprecated.
I have some code which displays a dropbox with a list of entries from a database and calls a controller action on the change event. The controller takes the selected entry as a string and returns a new view (I think herein lies my issue), the trouble is I think that the old view still remains as the newly returned view is never displayed.
Do I need to redesign this or if not, should I be forcibly destroying any old view?
My code is as follows:
EditSchool view:
#model namespace.Models.SchoolDetails
#{
ViewBag.Title = "EditSchool";
Layout = "~/Views/AuthorisedAdmin/_LayoutAdmin.cshtml";
}
<script src="#Url.Content("~/Scripts/chosen/chosen.jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/bubble-popup-chosen-upload-functions.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#School").change(function () {
var SelectedSchool = $('#School').val();
$.ajax({
url: '/AuthorisedAdmin/RetrieveSchool'
, type: 'POST'
, data: { School: SelectedSchool }
, success: function (data) {
}
, error: function (request, textStatus, errorThrown) {
alert(errorThrown.toString());
}
, complete: function (request, textStatus) {
}
});
});
});
</script>
<fieldset>
<legend>Select School</legend>
<div class="editor-field">
#Html.DropDownList("School", ViewBag.RegisteredSchools as SelectList, namespace.Models.Helpers.LanguageSchoolsConstants.m_sDropdownDisplayText,
new
{
id = "School",
#class = "chosen",
})
</div>
</fieldset>
#{
if (null != Model)
{
#Html.Partial("Partial/EditSchoolPartial", Model)
}
else
{
#Html.Partial("Partial/NoSchoolSelected")
}
}
Note that the partial view (EditSchoolPartial) is probably not a concern here, so I'm not posting the code.
Controller methods of interest:
EditSchool action:
public ActionResult EditSchool()
{
List<string>kRegisteredSchools = DBHelperFunctionsSchool.Instance().GetRegisteredSchoolsNamesOnly();
ViewBag.RegisteredSchools = new SelectList(kRegisteredSchools, "Name");
SchoolDetails schoolDetails = null;//DBHelperFunctionsSchool.Instance().GetSchoolDetailsForName(kRegisteredSchools.FirstOrDefault());
return View(schoolDetails);
}
RetrieveSchool action (called by AJAX):
[HttpPost]
public ActionResult RetrieveSchool(string School)
{
SchoolDetails schoolDetails = null;
List<string> kRegisteredSchools = DBHelperFunctionsSchool.Instance().GetRegisteredSchoolsNamesOnly();
ViewBag.RegisteredSchools = new SelectList(kRegisteredSchools, "Name");
try
{
schoolDetails = new SchoolDetails();
schoolDetails.School = DBHelperFunctionsSchool.Instance().GetSchoolForName(School);
DBHelperFunctionsSchool.Instance().PopulateSchoolDetailsSuppData(schoolDetails);
schoolDetails.ActionNameToExecuteOnFormSubmit = "EditSchoolDetails";
schoolDetails.ControllerNameToExecuteOnFormSubmit = "AuthorisedAdmin";
}
catch
{
schoolDetails = null;
}
finally
{
}
return View("EditSchool", schoolDetails);
}
Instead of doing ajax on onchange ,do below
$("#School").change(function () {
var SelectedSchool = $('#School').val();
window.location='/AuthorisedAdmin/RetrieveSchool?School='+SelectedSchool;
});
Note:You may have to give full path url instead of relative url.
What i want to do:
at page load to automatically pop up a jquery dialog fill in some data, post that to an action and close the dialog (regardless if the action succeeds or not).
in the View in which the pop up should occur i have the following:
<script type="text/javascript">
$(function () {
$('#PopUpDialog').dialog(
{
modal: true,
open: function ()
{
$(this).load('#Url.Action("Subscription", "PopUp")');
},
closeOnEscape: false
}
);
$('.ui-dialog-titlebar').hide();
$('#closeId').live('click',function () {
$('#PopUpDialog').dialog('close');
return false;
}
);
$('#SubscriptionForm').submit(function () {
$("#PopUpDialog").dialog("close");
$.ajax({
url: encodeURI('#Url.Action("Subscription", "PopUp")' ),
type: this.method,
data: $(this).serialize()
})
return fase;
}
);
});
</script>
the Subscription view has the following:
#using (Html.BeginForm( new { id = "SubscriptionForm" }))
{
#Html.ActionLink(Deals.Views.PopUp.SubscriptionResources.AlreadySubscribed, "", null, new { id = "closeId" })
<br />
<br />
#Deals.Views.PopUp.SubscriptionResources.FillEmail
#Html.TextBoxFor(m => Model.Email)
<input type="submit" id="subscribeId" value="#Deals.Views.PopUp.SubscriptionResources.IWantToSubscribe" />
<br />
}
which works fine.
The POST action is defined as follows:
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult Subscription(FormCollection formValues)
//public void Subscription(FormCollection formValues)
{
Deals.ViewModels.PopUpSubscriptionVM VM = new ViewModels.PopUpSubscriptionVM();
TryUpdateModel(VM);
if (!String.IsNullOrEmpty(VM.Email))
{
//do the update to the dbms
}
return Json(new { success = true });
}
The problem is that after posting back i get an empty screen with the success message, which i don't want!
What am i doing wrong?
You can handle the success and error callbacks:
$('#SubscriptionForm').submit(function () {
$("#PopUpDialog").dialog("close");
$.ajax({
url: encodeURI('#Url.Action("Subscription", "PopUp")' ),
type: this.method,
data: $(this).serialize(),
success: function (result) {
//Do Whatever you want to do here
},
error: function (x, e) {
//Do Whatever you want to do here
}
})
return fase;
}
To see what i am doing wrong i set up a small project (ASP.NET MVC 3) with the following ingredients:
<script type="text/javascript">
$(function () {
// Does not cache the ajax requests to the controller e.g. IE7/9 is doing that...
$.ajaxSetup({ cache: false });
var $loading = $('<img src="#Url.Content("~/images/ajax-Loader.gif")" alt="loading" class="ui-loading-icon">');
var $url = '#Url.Action("Subscription", "PopUp")';
var $title = 'Some title';
var $dialog = $('<div></div>');
$dialog.empty();
$dialog
.append($loading)
.load($url)
.dialog({
autoOpen: false
, closeOnEscape: false
, title: $title
, width: 500
, modal: true
, minHeight: 200
, show: 'fade'
, hide: 'fade'
});
$dialog.dialog("option", "buttons", {
"Cancel": function () {
$(this).dialog("close");
$(this).empty();
},
"Submit": function () {
var dlg = $(this);
$.ajax({
url: $url,
type: 'POST',
data: $("#SubscriptionForm").serialize(),
success: function (response) {
//$(target).html(response);
dlg.dialog('close');
dlg.empty();
});
}
});
$dialog.dialog('open');
})
</script>
The controllers' actions:
public ActionResult Subscription()
{
Thread.Sleep(2000); //just for testing
TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
return View(VM);
}
//POST
[AcceptVerbs(HttpVerbs.Post)]
//[OutputCache(CacheProfile = "ZeroCacheProfile")]
public ActionResult Subscription(FormCollection formValues)
{
TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
TryUpdateModel(VM);
return Json(new { success = true });
}
...and the according View:
#model TestModalAjax.ViewModels.PopUpVM
#{
Layout = null;
ViewBag.Title = "Subscription";
}
<h2>Subscription</h2>
#* ----- NOTICE THE FOLLOWING!!! WITHOUT THIS DATA GETS NOT POSTED BACK!!!! ---- *#
#using (Html.BeginForm("Subscription","PopUp",FormMethod.Post, new { id="SubscriptionForm"}))
{
<h1> Give me your name</h1>
#Html.TextBoxFor(M => Model.Name)
}
...so it seems everything works as expected!
I think the problem is with jQuery, i don't know for sure.
Let me explain the situation.
Screenshot 1
I fill in the partialView and click on submit.
The submit is a jQuery event handler with the following code:
_CreateOrEdit.cshtml
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
});
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
$.post(action, serializedForm, function (data) {
$("#main-content").html(data);
});
return false;
});
</script>
This all works fine on the first-run.
Then when i submit the form when it is invalid (Screenshot 1),
[HttpPost]
public ActionResult Create(Client client)
{
if (ModelState.IsValid)
{
context.Clients.Add(client);
context.SaveChanges();
return RedirectToAction("Index");
}
return PartialView(client);
}
Then it tries to redisplay the same form again (Controller Client, Action Create), but something isn't triggered right (Screenshot 2). The layout is wrong (buttons still hidden), the tabs aren't working (javascript), ...
Worst of all, i don't get any error in Firebug, Chrome Console, ...
Does anyone have an idea what could be the problem, because i really haven't got a clue what's happening. It seems to me that nothing has changed, but it did :s
Fyi, an equivalant for the post function is :
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
request.done(function (msg) {
$("#log").html(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
Before submit, everything loads fine
After submit, same form is called. jQuery isn't working anymore and form is getting bricked (i think this is "side" behaviour from the jQuery breaking)
Edit: (on request)
Here is the partialView in full
_CreateOrEdit.cshtml doesn't contain any javascript for now, the result is the same, so i only posted Create.cshtml.
Create.shtml
#model BillingSoftwareOnline.Domain.Entities.Client
<div class="container_12 clearfix leading">
<div class="grid_12">
#using (Html.BeginForm("Create", "Client", FormMethod.Post, new { #class="form has-validation", id="CreateOrEditSubmit"}))
{
#Html.Partial("_CreateOrEdit", Model)
<div class="form-action clearfix">
<button class="button" type="submit">
OK</button>
<button class="button" type="reset">
Reset</button>
</div>
}
</div>
</div>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.itextclear.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.uniform.min.js")"></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery.tools.min.js")"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
});
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
// $.post(action, serializedForm, function (data) {
// $("#main-content").html(data);
// });
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
return false;
request.done(function (msg) {
alert(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
</script>
Since this markup is returned as a partial, you need to reinitialize your javascript.
This is hacky, but try putting your script in the partial view, instead of _CreateOrEdit.cshtml, and see if that works.
Update
After seeing the cshtml, it looks like it is not working because $(document).ready() has already executed, before the ajax load. Try this instead:
$(function () {
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(window).bind('drilldown', function () {
$(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
//get the form
var f = $("#CreateOrEditSubmit");
//get the action
var action = f.attr("action");
//get the serialized data
var serializedForm = f.serialize();
// $.post(action, serializedForm, function (data) {
// $("#main-content").html(data);
// });
var request = $.ajax({
type: 'POST',
url: action,
data: serializedForm,
success: function (data) {
$("#main-content").html(data);
},
dataType: 'HTML'
});
return false;
request.done(function (msg) {
alert(msg);
});
request.fail(function (jqXHR, textStatus) {
alert("Request failed: " + textStatus);
});
});
});
Add the following instructions to the end of your ajax callback, so that the styling is applied after the form has been injected to the DOM:
$('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(".tabs > ul").tabs("section > section");