Where would the on-load handler be in MVC? - asp.net-mvc

I'm looking to add code to my Onload handler but am unsure where it would be in an MVC application?
// You may want to place these lines inside an onload handler
CFInstall.check({
mode: "overlay",
destination: "http://localhost:1414/"
});
});
The code above needs to be placed in the onload handler.

If I understand you correctly, you just need this expression below, if you are using jQuery:
<script>
$(document).ready(function() {
// Handler for .ready() called. Put your logic here.
});
</script>
or this one, without usage of jQuery:
<script>
window.onload = function(){
// Put your logic here.
}
</script>
to be included on your view.cshtml.

Here your meaning Adding Window Onload Event.
You can try this inside the js file:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
/* more code to run on page load */
});
For more information Simon Willison’s Weblog

I think you can add it just like in any other html page into your cshtml..
#{
ViewBag.Title = "Authenticate";
}
<script type="text/javascript">
$(document).ready(function () {
CFInstall.check({
mode: "overlay",
destination: "http://localhost:1414/"
});
});
</script>
<h2>Congrats..</h2>

Related

js firing only once in jquery mobile site

I have a mobile layout page that loads a js file and it works fine.
#RenderBody()
<script>
$(document).ready(function () {
var moonth = $("#getcurrmonth").val();
var yeear = $("#getcurryear").val();
$("#hiddenyearval").val(yeear);
$("#hiddenmonthval").val(parseInt(moonth) - 1);
$("#caltab").collapsible("expand");
LOCAL.LoadMore();
LOCAL.LoadMore();
LOCAL.LoadMore();
$("#caltab").collapsible("collapse");
});
</script>
<script>
LOCAL = {
LoadMore: function () {...}
}
</script>
#Html.Partial("~/Views/Shared/_Tabs.mobile.cshtml")
But when I change to a page that uses the same layout the script never fires.
I have tried $(document).on('pagebeforeshow', '[data-role="page"]', function{..} as well as other suggestions I have found on here but no luck.
Thanks for your time.

How to show a partial view in JqueryUI dialog ASP.NET MVC4

When I'm on my DeskAlert creation page, I wish to open in a dialog box a partial view which contains a list of Alert Template. So I have put a link to open a JqueryUI dialog, and I'm trying to link my Template partial view with it.
But... I don't understand why the view didn't show up, in the dialog box.
I have created Controller/View with VS 2013 assistant. Could you explain me this mecanism ?
Thanks
RouteConfig
routes.MapRoute("Index",
"AlertTemplatesModal/Index/",
new { controller ="AlertTemplatesModal",action="Index"},
new[] {"WebAppDeveloppement.Controllers"});
Create.cshtml
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
$('#myDialogContent').dialog("open");
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
open:function () {
$.ajax({
url:"#(Url.RouteUrl("Index"))",
type:"GET",
succes:function(data)
{
$('#myDialogContent').html("");
$('#myDialogContent').html(data);
},
error:function(xhr,ajaxOptions, thrownError){
alert("error");
}
});
},
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
</script>
<div id="myDialogContent"></div>
AlertTemplatesModalController
private DSdatabaseEntities db = new DSdatabaseEntities();
public ActionResult Index()
{
var alertTempalte = db.AlertTemplate.Include(a=>a.AlertMode).Include(a=>a.AlertPriority).Include(a=>a.RecipientMap);
return View(alertTemplate.ToList());
}
Index.cshtml
#model IEnumerable<WebAppDeveloppment.AlertTemplate>
<div id="myDialogContent">
...
</div>
Ok, I've found the solution. Your response give me the idea to test with Firebug... and I could see my error. I make a confusion in the url syntax between Controller/Action/View. So I have created a special action, a partialview, and finally, it's worked.
This link helps me to understand : http://www.itorian.com/2013/02/jquery-ui-autocomplete-with-json-in-mvc.html the logic, and this one : Loading a partial view in jquery.dialog how to call partial view. My solution :
Create.cshtml
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
$('#myDialogContent').dialog("open");
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
open:function () {
$(this).load("/AlertTemplatesModal/TemplateView/");
},
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
</script>
<div id="myDialogContent"></div>
AlertTemplatesModalController
public ActionResult TemplateView()
{
ViewBag.AlertTemplateTitle = new SelectList(db.AlertTemplate,"AlertTemplateID","AlertTemplateTitle");
return PartialView("Index");
}
I have changed the code little bit. Created a function to load partial view in div and created a parameter for callback function so that when partial view is loaded, you could apply jquery dialog on that div. Give it a try and let me know.
<script type="text/javascript">
$(document).ready(function() {
$(".tlist").on("click",function (event) {
event.preventDefaut();
loadPartialView(function(){
$('#myDialogContent').dialog("open");
});
});
$('#myDialogContent').dialog({
autoOpen:false,
height:500,
width:500,
modal:true,
buttons:{
Cancel:function() {
$(this).dialog("close");
}
}
});
});
function loadPartialView(callback){
$.ajax({
url:"€(Url.RouteUrl("Index")}",
type:"GET",
succes:function(data)
{
$('#myDialogContent').html("");
$('#myDialogContent').html(data);
callback();
},
error:function(xhr,ajaxOptions, thrownError){
alert("error");
}
});
}
</script>

JQueryMobile: pagecontainershow on a particular page not working

JQueryMobile 1.4 has deprecated the pageshow event and instead recommends using pagecontainershow; however, while I'm able to get the pagecontainershow event at a document level, I can't bind a function to a particular page.
<div id="page1" data-role="page">
...
<script>
$( "#page1" ).on( "pagecontainershow", function( event, ui ) {
console.log("page1 pagecontainershow");
} );
</script>
</div>
Demonstration: http://jsbin.com/IFolanOW/22/edit?html,console,output
I also considered using the alternative form of the jQuery "on" function where we use a selector, but that would need to be a parent of the page div, and that might include other pages, so that doesn't work.
As a workaround, I've done this, but it is very inefficient:
function registerOnPageShow(pageId, func) {
var strippedPageId = pageId.replace("#", "");
var e = "pagecontainershow." + strippedPageId;
// TODO why isn't it working to use $(pageId) instead of $(document)?
$( document ).off(e).on(e, null, {page: strippedPageId, f: func}, function(e, ui) {
if ($(":mobile-pagecontainer").pagecontainer("getActivePage")[0].id == e.data.page) {
e.data.f(e, ui);
}
});
}
You can get the page ID like this.
$(document).on('pagecontainershow', function(e, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id');
});
There is currently no way to have a show/hide event on a specific page.
Here is what I'm using (jqmobile >1.4):
$(document).on("pagecontainershow", function () {
var activePage = $.mobile.pageContainer.pagecontainer("getActivePage");
var activePageId = activePage[0].id;
switch (activePageId) {
case 'loginPage':
...
break;
case 'homePage':
...
break;
case 'groupPage':
...
break;
default:
}
});
$(document).on("pagecontainershow", function(event, ui) {
var pageId = $('body').pagecontainer('getActivePage').prop('id'),
showFunc = pageId+'_show';
if (typeof MobileSite[showFunc] == 'function') {
MobileSite[showFunc]();
}
});
MobileSite is contained in an external .js file with all the show() functions.
$(document).on("pagecontainerbeforeshow", function (event, ui) {
if (typeof ui.toPage == "object") {
var crrentPage = ui.toPage.attr("id")
}
});
and you must use this code before calling Index.js !!

Jquerymobile: registering events within pageinit?

I'm writing a simple mobile web site using JQuery Mobile.
I wrote this code to handle clicks on anchors pointing to bookmarks within the page.
I put the code within a function and call the function from within the section in the . Here is the code:
function initPage() {
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
}
Here is my HTML fragment calling the code:
<html>
<head>
...
<script type="text/javascript">
initPage();
</script>
...
My code works fine, but I have a doubt, so here comes my question: should I wrap my code with $(document).on('pageinit')? Like this:
function initPage() {
$(document).on('pageinit', function(){
// Anchor links handling.
$(document).on('vclick', 'a[href^=#][href!=#]', function() {
location.hash = $(this).attr('href');
return false;
});
});
}
I am not sure whether do I need to do that for stuff that register an event, like vclick on specific elements.
Thanks for support.

Jquery mobile is not applying styles when the page is dynamically added

Hi I have a small app that uses JQM and Sammy. I am using Sammy to load pages dynamically and appending to the body of my index.html. the problem is i dont see the JQM themes are getting applied and there are no errors in console as well.
Are there any reason for this. I do call the following
context.render('view/abc.template')
.appendTo(context.$element(),function(){
$(document).ready(function () {
$("#container").trigger('pagecreate');
});
});
Thanks
This is how I did it;
1) firstly I disabled my JQM routing like so in a file called plugins.js;
$(document).bind("mobileinit", function() {
/**
* check out http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/ for more details
*/
$.mobile.ajaxEnabled = false;
$.mobile.linkBindingEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
});
This code was loaded before I loaded JQM, like so;
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script src="js/vendor/sammy/sammy.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vendor/sammy/plugins/sammy.template.js" type="text/javascript" charset="utf-8"></script>
<script src="js/main.js"></script>
Then my main.js function looks like this;
(function($) {
var app = $.sammy('#main', function() {
this.use('Template');
this.get('#/', function(context) {
context.load('/templates/index.template', function() {
$("#container").trigger('pagecreate');
}).appendTo(context.$element());
});
this.get('#/landing', function(context) {
context.load('/templates/landing.template', function() {
$("#container").trigger('pagecreate');
}).replace(context.$element());
});
});
$(function() {
app.run('#/');
});
})(jQuery);
I think you are not far off on your code snippet above. NB you have your $(document).ready function as a callback to appendTo, which does not take a callback. You will see mine is in load() which does

Resources