Develop Reference

signalr client doesn't fire on click listener

The process is : When the .post-thread is clicked, it calls the server through the hub, returns a <p data-id = id class = 'take-thread'>, and appends on foo div. Then I click the <p>, it should run TakeThread at server side.
However, when I click on the newly appended <p>, console.log('test') doesn't fire until I added the code in the star rectangle. I don't understand why. There is already a listener in the Hub.start().done() to trigger the click. Why do I have to do it in the hub client function ?
JS:
var chat = $.connection.chatHub;
chat.client.updateThings(id){
$('.foo').append('<p data-id = "id" class = "take-thread"></p>');
// Why do I need to these code below?
************************************************
* $('.take-thread').on('click', function () { *
* console.log("test"); *
* chat.server.takeThread("blah..."); *
* }); *
************************************************
}
$.connection.hub.start().done(function () {
$('.post-thread').on('click', function () {
chat.server.postThread("Test"); // works
});
$('.take-thread').on('click', function () {
console.log("test");
chat.server.takeThread("blah...");
});
}
C# Hub:
public void PostThread(string title) {
var id = someCalculation();
Clients.All.updateThings(id);
}
public void TakeThread(string title) {
// do things
}

This is a binding problem. Dynamic elements added to the page after document.ready is called do not automatically get rebound. This is what you were doing when you added the second on click event to the updateThings function.
You need to us .on() with a static parentSelector that is there on document.ready (.foo) together with a selector of your dynamic element being added by the SignalR callback (.take-thread).
See this example using standard alerts in place of SignalR: http://jsfiddle.net/kspearrin/0zyoqyxL/
In the end, your Javascript should be updated to the following:
var chat = $.connection.chatHub;
chat.client.updateThings(id){
$('.foo').append('<p data-id="id" class="take-thread"></p>');
}
$.connection.hub.start().done(function () {
$('.post-thread').on('click', function () {
chat.server.postThread("Test"); // works
});
$('.foo').on('click', '.take-thread', function () {
console.log("test");
chat.server.takeThread("blah...");
});
}

Saving data from a jquery post into a .net Session variable

I have built a .aspx page that calls a web api service and returns some data. The button in question is an HTML button(non .net) of type "button". I would like to save the data returned (which is a boolean) from the following jquery post:
<script>
$(document).ready(function () {
$('#custSubmit').click(function () {
var user = {
email: $('#custEmail').val(),
password: $('#custPassword').val()
};
$.post("http://blahblah", user, function (data, status) {
if (data == "true" && status == "success") {
//I imagine my save logic will go here, but I could be wrong
}
$('#custEmail').val('');
$('#custPassword').val('');
});
});
});
</script>
but I'm having trouble finding an example of how to save it to a session variable in .net. Can anyone explain to me how to do this? Thanks in advance.

Using PagedList in partial views in MVC 4 is throwing off jQuery/JS when navigating 'paged' pages

I've just implemented paging using PagedList in my MVC 4 application. The homepage of my app contains a partial view that displays a list of summarised data about certain objects. Beside each list item is a button that when clicked launches a modal window, displaying more information about that particular list item.
All works well on the first 'paged' page of list items, however if I navigate to the second 'paged' page and click the button to launch modal nothing happens. From developer tools in Chrome I get Uncaught TypeError: Object [object Object] has no method 'modal'.
The partial in question outputs the list, contains the DIV for the modal and a JS function to handle the button click event that launches modal windows. Here's the JS from that partial view:
<script type="text/javascript">
$(document).ready(function () {
$('.show-modal').click(function () {
var url = $('#modal-view-property-from-get-all').attr('data-url');
var id = $(this).attr('data-id');
$.get(url + '/' + id, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});
</script>
When I navigate back to the first 'paged' page, the button doesn't fire either and same uncaught typeError is thrown. Another jQuery plugin I use that truncates multi-line text also stops working and text overflows its containing DIV.
What's actually happening here - why does using paging interfere with JS like this?
How can I resolve this?
EDIT:
All records of particular type are returned from controller action:
return PartialView("_GetAllPropertiesPartial", model.ToPagedList(pageNumber, pageSize));
Since it's a partial, paging navigation is handled by Ajax.ActionLinks():
#Ajax.ActionLink("<<", "GetAllProperties", new { page = 1 }, new AjaxOptions { UpdateTargetId = "quick-property-search-results" })

You need to bind the event handler to something that doesn't get replaced in your markup, and use the .on() method rather than .click(), like so:
<script>
$(function () {
$('body').on('click', '.show-modal', function (e) {
var url = $('#modal-view-property-from-get-all').attr('data-url');
var id = $(this).attr('data-id');
$.get(url + '/' + id, function (data) {
$('#view-property-from-get-all-container').html(data);
$('#modal-view-property-from-get-all').modal('show');
});
});
});
</script>
You can use something other than body if you have a parent element that you know won't get replaced. It's also worth noting that you could be using .load(): http://api.jquery.com/load/
$('#view-property-from-get-all-container').load(url + '/' + id, function (response, status, jqxhr) {
// this is an optional callback
$('#modal-view-property-from-get-all').modal('show');
});

How to handle session in asp.net mvc

How can I do this in Asp.Net MVC?
Activity Timer : When user navigates on the page (means doing something that calls ActionResult) the timer will reset.
When the user doesn't do any activity in more than 15 minutes, he will be prompted and be asked "Are you still there?" (Yes/LogOut), if he click yes, then activity timer will go back to zero, and starting counting again.
This activity timer must be unique per user and must be destroy upon logging out.
PLEASE PLEASE! Be PATIENT TO ME! I don't know how to this.
I had posted this question but I didn't get any answer that solves this problem. So I plan to do it from the start, and I need some help/guide to do it properly.
Any reference links or tutorials will be much appreciated!

I would handle this on the client. Create an object to encapsulate the functionality.
Something like:
var UserInactivityMonitor = UserInactivityMonitor || {};
UserInactivityMonitor = (function (module) {
var inactivityIndex;
var promptIndex;
var timer;
module.startInactivityMonitor = function () {
module.timerTick();
};
module.timerTick = function () {
inactivityIndex--;
if (inactivityIndex === 0) {
module.fireInactivityAlert();
}
if (inactivityIndex === promptIndex) {
module.fireIdlePrompt();
}
timer = setTimeout(module.timerTick, 1000);
};
module.fireIdlePrompt = function () {
var response = confirm('are you stil there?');
if (response === true) {
module.resetInactivityIndex();
}
};
module.resetInactivityIndex = function () {
inactivityIndex = 15;
promptIndex = 5;
};
module.fireInactivityAlert = function () {
alert('Inactivity alert!');
};
module.initialize = function () {
module.resetInactivityIndex();
module.startInactivityMonitor();
};
return module;
})(UserInactivityMonitor || {});
Set inactivityIndex to the number of seconds that will pass before the inactivity event fires. Set promptIndex to the number of seconds remaining when the user will be prompted if they are still there. The code above sets the inactivity timeout to 15 seconds and a idle prompt will be invoked at the 5 second remaining mark.
On page load start the inactivity timer:
$(function () {
UserInactivityMonitor.initialize();
});
On any AJAX request, reset the counter:
$("#fooButton").on('click', function () {
$.ajax(
{
url: $("#buttonClickPostUrl").val(),
data: {
someData: 'data'
},
type: 'POST',
complete: function () {
UserInactivityMonitor.resetInactivityIndex();
}
});
});
If the server is maintaining session state then you will want to make a request back to the server to kill the session and optionally direct the browser to the appropriate page for the event. You would do this in the fireInactivityAlert() function.

Jquery datepicker is not working in MVC?

Here i am using a jquery datepicker from this sample http://dev.jtsage.com/jQM-DateBox2.
It is working fine but the problem is after clicking the submit button if there is any mandatory field validation error,the next time when i click the textbox jquery datepicker is not working means the script is not loading after submit click.it is throwing the error in firebug console like
TypeError: $(...).datebox is not a function
$('#txtstartdate').datebox('open');
Here is my code
$(document).ready(function () {
$('#txtstartdate').live('click', function () {
$('#txtstartdate').datebox('open');
$("#txtstartdate").datebox("option", {
mode: "calbox",
highDatesAlt: ["2011-11-09", "2011-11-10"],
highDates: ["2011-11-02", "2011-11-03"],
pickPageOAHighButtonTheme: "b"
});
});
});
and
#Html.TextBoxFor(m => m.StartDate, new { #name = "mydate", #id = "txtstartdate", style = "height:20px; font-size:10px;", data_role = "datebox", data_options = "{\"mode\":\"calbox\",\"useButton\": false}" })
Any suggestion?

as the firebug error suggest the browser could not find the function being used within the script can you make sure that the dependencies of the datebox is availiable after the submit call.
also try to send the dependencies with the view itself so that on every rendering of the view page at the client end it hold these js file with in it.