Fire javascript after a partial view loads - javascript

I have a view which loads a partial on the change event of several dropdowns:
I have some javascript that calls an action:
$("#filterdd").on('change', function () {
var datefrom = $('#fromdt').val().replace("/", "-").replace("/", "-");
var dateto = $('#todt').val().replace("/", "-").replace("/", "-");
$("#partialexpcal").load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto);
});
Then this returns a partial:
public ActionResult experienceCalendarFilter(string fromdt = "", string todt = "")
{
myModel model = new myModel();
model = gd.getstuff(fromdt, todt);
if (Request.IsAjaxRequest())
{
return PartialView("_expcalendar", model);
}
else
{
return View(model);
}
}
<div id="partialexpcal">
#Html.Partial("_expcalendar", Model)
</div>
I am using jQuery Datetimepicker which need to fire after the partial has loaded:
function afterload() {
$(".datefield").datepicker({ dateFormat: "dd/mm/yy", changeYear: true });
$(function () {
$.validator.addMethod('date',
function (value, element) {
if (this.optional(element)) {
return true;
}
var ok = true;
try {
$.datepicker.parseDate('dd/mm/yy', value);
}
catch (err) {
ok = false;
}
return ok;
});
$(".datefield").datepicker({ dateFormat: 'dd/mm/yy', changeYear: true });
});
}
I have tried all of the following in both the parent view and the partial where 'expcalfilterdiv' is the main container in the partial view:
$('#expcalfilterdiv').ready(function () {
alert("hit1");
afterload()
});
This hits but only on initial load not after the partial has been changed.
$('#expcalfilterdiv').live(function () {
alert("hit1");
afterload()
});
This doesn't hit at all.
$('#expcalfilterdiv').livequery(function () {
alert("hit1");
afterload()
});
Is there a way I can catch the Ajax success when doing it how I am?

If you see $.load() docs, you'll find that this function receives 3 parameters. The third one is complete, and this is a callback which will run once the load request has fulfilled. I.e. modify your load code adding a third parameter which can be a function definition, or the name of an existing function, that will be executed when load finishes:
$("#partialexpcal")
.load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto,
function() { /* */});
or
$("#partialexpcal")
.load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto,
functionToInvoke);
NOTE: in the docs the second parameter is dentoed as optional sith square brackets, so you can omit it and specify the third one directly

Load has a second parameter that is called once the AJAX call is completed, like below.
$("#partialexpcal").load('/home/experienceCalendarFilter?fromdt=' + datefrom + '&todt=' + dateto,function( response, status, xhr ){
//.. check for error here ...
afterload();
});

Related

why these cookie codes didn't work in asp.net mvc?

I'm developing an asp.net mvc 5 online store project . I want to create cart to add Goods with Cookie . I'm confused about it and don't know why it didn't work . it didn't gave me any error . also I add break points to debug it but any data didn't send to my actions !
could anyone help me ? what's the problem ?
I'm not good in javascript and I think problem would be in javascript codes :/
Thanks in advance
Goods controller
[HttpPost]
public ActionResult AddToCart(int Id, int Count)
{
try
{
if (Request.Cookies.AllKeys.Contains("NishtmanCart_" + Id.ToString()))
{
//edit cookie
var cookie = new HttpCookie("NishtmanCart_" + Id.ToString(), (Convert.ToInt32(Request.Cookies["NishtmanCart_" + Id.ToString()].Value) + 1).ToString());
cookie.Expires = DateTime.Now.AddMonths(1);
cookie.HttpOnly = true;
Response.Cookies.Set(cookie);
}
else
{
//add new cookie
var cookie = new HttpCookie("NishtmanCart_" + Id.ToString(), Count.ToString());
cookie.Expires = DateTime.Now.AddMonths(1);
cookie.HttpOnly = true;
Response.Cookies.Add(cookie);
}
int CartCount = Request.Cookies.AllKeys.Where(p => p.StartsWith("NishtmanCart_")).Count();
return Json(new MyJsonData()
{
Success = true,
Script = MessageBox.Show("product added to your basket", MessageType.Success).Script,
Html = "Shopping Cart (" + CartCount.ToString() + ")"
});
}
catch (Exception)
{
return Json(new MyJsonData()
{
Success = false,
Script = MessageBox.Show("product didn't add to your basket", MessageType.Error).Script,
Html = ""
});
}
}
public ActionResult RemoveCart(int Id)
{
try
{
int CartCount = Request.Cookies.AllKeys.Where(p => p.StartsWith("NishtmanCart_")).Count();
if (Request.Cookies.AllKeys.Contains("NishtmanCart_" + Id.ToString()))
{
Request.Cookies["NishtmanCart_" + Id.ToString()].Expires = DateTime.Now.AddDays(-1);
return Json(new MyJsonData()
{
Success = true,
Script = MessageBox.Show("product removed from your basket", MessageType.Success).Script,
Html = "Shopping Cart (" + CartCount.ToString() + ")"
});
}
else
{
return Json(new MyJsonData()
{
Success = false,
Script = MessageBox.Show("this product doesn't have in your basket", MessageType.Warning).Script,
Html = "Shopping Cart (" + CartCount.ToString() + ")"
});
}
}
catch (Exception)
{
return Json(new MyJsonData()
{
Success = true,
Script = MessageBox.Show("product didn't remove from your basket", MessageType.Error).Script,
Html = ""
});
}
}
MyJsonData.cs
public class MyJsonData
{
public string Script { get; set; }
public string Html { get; set; }
public bool Success { get; set; }
}
_GoodDetailsAjax.cshtml
#foreach (var item in Model.GoodDetails)
{
<div>
<p class="nowprice">NowPrice : #item.DetailsNowPrice</p>
<p class="preprice">PrePrice : #item.DetailsPrePrice</p>
<a class="button icon-cart" href="#" GoodID="#item.DetailsGoodID">Add to cart</a><br>
<a class="link" >Shopping Cart (0)</a>
</div>
}
#section scripts{
<script src="~/Scripts/jquery-2.1.4.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script>
$(function () {
$("a.button.icon-cart").click(function (e) {
e.preventDefault();
var goodId = $(this).attr("GoodID");
alert(goodId); //////// I just added this code
$.ajax({
url: "/Goods/AddToCart",
data: { Id: goodId, Count: 1 },
type: "Post",
dataType: "Json",
success: function (result) {
if (result.Success) {
$("#CartItems").html(result.Html);
}
eval(result.Script);
},
error: function () {
alert("Error!");
}
});
});
});
</script>
}
I don't know what's the implementation of MessageBox.Show("....", MessageType.Error).Script but I'm assuming that it just generates a simple JavaScript statement like this:
Script = "alert('product added to your basket');"
So you can add this tag for the result:
<div id="CartItems">
</div>
Now it works without any problem.
All of my codes was true , I just made some simple mistakes .
I loaded a JQuery file in my layout and also I loaded another version of JQuery in my view! I deleted one of them .
And also I used those codes in a partial view and loaded they using Ajax but my partial view couldn't pass data to Controller , I moved codes to main view (GoodDetails.cshtml) and it works fine now .

Call SignalR Javascript function from modal popup

My DiaryHub.vb has the following:
Imports Microsoft.AspNet.SignalR
Imports Microsoft.AspNet.SignalR.Hubs
Namespace UIS
<HubName("DiaryHub")>
Public Class DiaryHub
Inherits Hub
Public Sub PostDiaryHeadline()
' Call the addNewMessageToPage method to update clients.
Clients.All.addNewDiaryHeadlineToPage()
End Sub
End Class
End Namespace
My Home/Index window has the following code to initiate/configure SignalR.
$(function () {
// Save the reference to the SignalR hub
var dHub = $.connection.DiaryHub;
// Invoke the function to be called back from the server
// when changes are detected
// Create a function that the hub can call back to display new diary Headline entry.
dHub.client.addNewDiaryHeadlineToPage = function () {
// refresh the Headline Entries to the page.
outputHLDiaryEntries();
};
// Start the SignalR client-side listener
$.connection.hub.start().done(function () {
// Do here any initialization work you may need
outputHLDiaryEntries();
});
})
The code works and on launch the Headline diary entries are displayed.
I also have a button that opens a Kendo window as a modal with a form for adding new diary entries using this function:
function openAddWindow() {
var addWindow = $("#window").data("kendoWindow");
addWindow.refresh({
url: "Home/AddDiaryEntry/"
});
addWindow.open();
addWindow.center();
}
I then have the following Javascript in my AddDiaryEntry page:
function createDiaryEntry() {
var validFlag = true;
var errorMsg = "";
//Validate New Diary Entry
// removed for brevity...
if (validFlag) {
//data is valid
//get value of checkbox
var cbValue = ($("#addNew_dHeadline").is(':checked')) ? true : false;
//clear error area
$('#errorArea').html("");
var response = ''
$.ajax({
url: 'Home/SaveDiaryEntry',
type: 'POST',
data: {
dDate: $("#addNew_dDate").text(),
dCreatedBy: $("#addNew_dCreatedBy").text(),
dName: '#AppShort',
dTeam: teamValue.value(),
dType: typeValue.value(),
dRef: $("#addNew_dREF").val(),
dHeadline: cbValue,
dServer: multiSelect.value(),
dComment: editor.value()
},
success: function (result) {
response = result;
alert(response);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
response = "err--" + XMLHttpRequest.status + " -- " + XMLHttpRequest.statusText + " -- " + errorThrown;
alert(response);
}
});
//close window
var addWindow = $("#window").data("kendoWindow");
addWindow.close();
//if headline entry call SignalR post function to refresh diary entries
if (cbValue) {
// reference to the SignalR hub
var dHub = $.connection.DiaryHub;
// function to update all clients
dHub.client.PostDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
}
} else {
//error in data
var out = '<ul class="error">' + errorMsg + '</ul>';
// display errors
$('#errorArea').html(out);
}
}
The code works fine - validates the data, saves data to database. The issue I'm having is when I try to call dHub.client.PostDiaryHeadline() to invoke the SignalR function. I get the error: JavaScript runtime error: Object doesn't support property or method 'PostDiaryHeadline'
How do I call the function? Should I call the function before I close the modal window?
From what I can see your actually expecting a response rather than a server call.
adding server will fire a request.
if (cbValue) {
// reference to the SignalR hub
var dHub = $.connection.DiaryHub;
// function to update all clients
dHub.server.PostDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
}
Your already receiving the response here:
dHub.client.addNewDiaryHeadlineToPage = function () {
// refresh the Headline Entries to the page.
outputHLDiaryEntries();
};
//EDIT
There seems to be slight issues through out, so apart from the above(which needs fixing).
On the hub name (backend) replace with: <HubName("diaryHub")>
In your JS replace with: var dHub = $.connection.diaryHub;
Finally in your createDiaryEntry(); body should look like so:
$.connection.hub.start().done(function () {
// Do here any initialization work you may need
if (cbValue) {
// reference to the SignalR hub
var dHub = $.connection.diaryHub;
// function to update all clients
dHub.server.postDiaryHeadline(); //THIS IS A FUNCTION IN DiaryHub.vb
}
});
There are a few SignalR issues but that should get you on the right path.
Most SignalR issues stem from case sensitivity and structuring. All very common.
Should be the last issue, replace with: dHub.server.postDiaryHeadline();
lower case "p"

How to get system properties __CreatedAt, __Version in javascript backend of Azure Mobile services?

I am trying to explicitly get the system properties from my table but it is not working. I can see that the URL is returning all the data including these fields if I use https://myservice.azure-mobile.net/tables/todoitem?__systemProperties=* but on the code I cannot get it as item.__version or item.version. I have tried adding todoitemtable = WindowsAzure.MobileServiceTable.SystemProperties.All; but no success! I have also looked at http://azure.microsoft.com/en-us/documentation/articles/mobile-services-html-validate-modify-data-server-scripts/ but this is adding a new column instead of using the existing system columns.
$(function() {
var client = new WindowsAzure.MobileServiceClient('https://ib-svc-01.azure-mobile.net/', 'key');
var todoItemTable = client.getTable('todoitem');
// = WindowsAzure.MobileServiceTable.SystemProperties.All;
// Read current data and rebuild UI.
// If you plan to generate complex UIs like this, consider using a JavaScript templating library.
function refreshTodoItems() {
var query = todoItemTable.where({ complete: false });
query.read().then(function(todoItems) {
var listItems = $.map(todoItems, function(item) {
return $('<li>')
.attr('data-todoitem-id', item.id)
.append($('<button class="item-delete">Delete</button>'))
.append($('<input type="checkbox" class="item-complete">').prop('checked', item.complete))
.append($('<div>').append($('<input class="item-text">').val(item.id))
.append($('<span class="timestamp">'
+ (item.createdAt && item.createdAt.toDateString() + ' '
+ item.createdAt.toLocaleTimeString() || '')
+ '</span>')));
});
$('#todo-items').empty().append(listItems).toggle(listItems.length > 0);
$('#summary').html('<strong>' + todoItems.length + '</strong> item(s)');
}, handleError);
}
function handleError(error) {
var text = error + (error.request ? ' - ' + error.request.status : '');
$('#errorlog').append($('<li>').text(text));
}
function getTodoItemId(formElement) {
return $(formElement).closest('li').attr('data-todoitem-id');
}
// Handle insert
$('#add-item').submit(function(evt) {
var textbox = $('#new-item-text'),
itemText = textbox.val();
if (itemText !== '') {
todoItemTable.insert({ text: itemText, complete: false }).then(refreshTodoItems, handleError);
}
textbox.val('').focus();
evt.preventDefault();
});
// Handle update
$(document.body).on('change', '.item-text', function() {
var newText = $(this).val();
todoItemTable.update({ id: getTodoItemId(this), text: newText }).then(null, handleError);
});
$(document.body).on('change', '.item-complete', function() {
var isComplete = $(this).prop('checked');
todoItemTable.update({ id: getTodoItemId(this), complete: isComplete }).then(refreshTodoItems, handleError);
});
// Handle delete
$(document.body).on('click', '.item-delete', function () {
todoItemTable.del({ id: getTodoItemId(this) }).then(refreshTodoItems, handleError);
});
// On initial load, start by fetching the current data
refreshTodoItems();
});
I was trying to access the system properties from within the API scripts and found this and thought it was useful and relevant: http://www.brandonmartinez.com/2014/10/22/retrieve-system-properties-in-azure-mobile-services-javascript-backend/
Basically you can do this (example from the post):
myTable.read({
systemProperties: ['__createdAt', '__updatedAt'],
success: function(tableEntries) {
// So on and so forth
}
}

How to show View after Ajax call to a Controller

I cant figured out how to show whole page after Ajax call to Controler. After 'Order' buton click I call javascript function where I make Ajax call to controler action to get XML in string and with that string I call another controller action where I return model. In last step I want to call third controller action with return View(model) but I get null object parameter.
function order(model) {
$('#details-container').html("<h2>Loading Complete Frame Module. Please wait...</h2>");
$.p({
url: '#Url.Action("CompleteFrameBrandDetails", "PacCompleteFrame")',
data: { item: model },
success: function (xml) {
if (xml.Success) {
$.p({
url: '#Url.Action("GlassCompleteFrame", "PacModule")',
data: JSON.stringify({ b2bXml: xml.Data }),
success: function (model) {
var pacModuleModel = {
CustomerNumber: model.Data.CustomerNumber,
Language: model.Data.Language,
Comission: model.Data.Comission,
GlassXml: model.Data.GlassXml,
Price: model.Data.Price,
ReadOnly: model.Data.ReadOnly,
Mode: model.Data.Mode,
IframeUrl: model.Data.Mode
};
var url = '#Url.Action("GlassCompleteFrameView", "PacModule", "__view__")';
window.location.href = url.replace("__view__", JSON.stringify(pacModuleModel));
}
});
} else {
$.alert({
message: 'error while trying to load xml details'
});
}
}
});
}
public ActionResult GlassCompleteFrame(string b2bXml)
{
string mode = "5";
//If the Store isn't selected, redirect to HomePage
if (string.IsNullOrEmpty(_workContext.SelectedCustomerNumber))
{
return RedirectToRoute("HomePage");
}
else
{
PacModuleModel model = new PacModuleModel();
model.CustomerNumber = _workContext.SelectedCustomerNumber;
model.Language = _workContext.WorkingLanguage.UniqueSeoCode;
model.Comission = "";
if (b2bXml == null || b2bXml == String.Empty)
{
return RedirectToRoute("HomePage");
}
else
{
model.GlassXml = b2bXml.Replace("\"", "\\\"");
}
int index = b2bXml.IndexOf("<price>") + "<price>".Length;
string p = b2bXml.Substring(index, b2bXml.IndexOf("</price>") - index);
model.Price = Convert.ToDouble(p, System.Globalization.CultureInfo.InvariantCulture);
model.ReadOnly = false;
model.Mode = ModuleMode.ByProduct;
model.IframeUrl = "http://ItkCompleteConfiEmbedded.aspx?lang=" + _workContext.WorkingLanguage.LanguageCulture; //_pacGeneralSettings.GlassModuleUrl + ;
return new JsonResult()
{
Data = new
{
Success = true,
Data = model
}
};
}
}
public ActionResult GlassCompleteFrameView(PacModuleModel model)
{
// here I get null model parameter
return View("Glass", model);
}
Curently I don't know how to pass model to the last action controller. Thank you nice people for help.
If I understand correctly, something like this should do the trick:
Let's say you have, in your controller MyModelController:
public ActionResult SomePage(MyModel myModel){
return View(myModel);
}
To naviguate to that page, you could do:
<script>
window.location.href = "#Url.Action("SomePage", "MyModel", myModelObject)";
</script>
I hope this helps!
I use Session variable to get model in GlassCompleteFrameView(PacModuleModel model) and works perfect. I set Session variable in public ActionResult GlassCompleteFrame(string b2bXml).
public ActionResult GlassCompleteFrameView(PacModuleModel model)
{
model = Session["xml"] as PacModuleModel;
return View("Glass", model);
}

Calling a jQuery Function from code behind

I want call jQuery Function from code behind because I must send variable for function.
I Used this code in code behind :
ClientScript.RegisterClientScriptBlock(this.GetType(), "myfunction", "ValidateTB("+ num+ "," + count +");", true);
And my function is :
function ValidateTB(num,count) {
var check = false;
alert("alert");
for (var i = 0; i < num; i = i + 1) {
check = false;
for (var j = 0; j < count; j = j + 1) {
var id = "myTextBox" + i + j;
if ($("input[type='text']").val().length > 0) {
check = true;
}
if (check == false) {
$("#error").text("error");
return false;
}
}
}
return true;
};
Why my function doesn’t work? It sounds my function doesn’t run
Make sure that this function is declared in a <script> block which is in the <head> section.
Your code should look like this.
ClientScript.RegisterClientScriptBlock(this.GetType(), "myfunction", "return ValidateTB("+ num+ "," + count +");", true);
Your jquery function return true or false value, so you have to write "return" when you will call your function.
While calling any jquery code from codebehind make sure, you surround your code with $(document).ready. You need to change your codebehind call to below:
ClientScript.RegisterClientScriptBlock(this.GetType(), "myfunction", "$(document).ready(function(){ValidateTB('"+ num+ "','" + count +"');});", true);
Use RegisterStartupScript instead
Documentation
Suppose we have the following jquery class "ChangeDate" with some properties and an OnSelect event which will be invoked during selection,then if we want to use this class in codebehind and change it,then one way is to take a stringbuilder and do as follows,
$(document).ready(function () {
$('.ChangeDate').datepicker({
beforeShowDay: $.datepicker.noWeekends,
changeMonth: true,
changeYear: true,
dateFormat: 'mm/dd/yy',
yearRange: '-100:+100',
showButtonPanel: true,
onSelect: function (date) {
sMsg = sMsg + getErrorMessage('HME0002');
if (confirm(sMsg) == true) {
$('.ChangeDate').val('As of ' + date);
$(this).datepicker("hide");
return true;
}
else {
$('.ChangeDate').val('As of ' + oldD);
return false;
}
}
}); });
Taking StringBuilder in codebehind and append to it the function which is required and calling it using RegisterClientScriptBlock as follows
StringBuilder sb = new StringBuilder();
sb.Append("$(document).ready(function () {");
sb.Append("$('.ChangeDate').val('As of " + DateTime.Now.ToString("MM/dd/yyyy") + "');");
sb.Append("});");
BuildJSString("KEY", sb.ToString());
private void BuildJSString(string keyStr, string scriptStr)
{
ClientScript.RegisterClientScriptBlock(this.GetType(), keyStr, scriptStr,true);
}

Categories

Resources