Tablesorter not working on MVC3 web app on Visual Studio 2010?
To reproduce the problem:
open Visual Studio 2010
create a new ASP.NET MVC 3 Web Application
Replace Views/Shared/_Layout.cshtml with:
<!DOCTYPE html>
<html>
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#* This doesn't work and I don't know why *#
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablesorter.min.js")" type="text/javascript"></script>
#*This works*#
#*<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
*#
</head>
<body>
<div class="page">
<div id="main">
#RenderBody()
</div>
</div>
</body>
</html>
Replace Views/Home/Index.html with:
<h2>debug jquery Kano</h2>
<p>
testing
</p>
<table id="theTable" class="tablesorter">
<thead>
<tr><th>Tic</th><th>Tac</th><th>Toe</th></tr>
</thead>
<tbody>
<tr><td>o</td><td>o</td><td>x</td></tr>
<tr><td>x</td><td>o</td><td>o</td></tr>
<tr><td>o</td><td>x</td><td>x</td></tr>
</tbody>
</table>
<script type="text/javascript">
// $(function () {
// alert("$: jQuery found!");
// });
$(document).ready(function () {
$("#theTable").tablesorter();
});
</script>
Download jquery.tablesorter.min.js from http://tablesorter.com and put into /Scripts directory.
Build and run the app.
As you will hopefully see, the tablesorter call in Index.cshtml doesn’t seem to successfully execute.
Thank you for your help!
Cheers,
Kevin
bestway to do is add tablesorter.js to bundleconfig.cs like this-
bundles.Add(new ScriptBundle("~/bundles/jquery.tablesorter").Include("~/Scripts/jquery.tablesorter.js"));
On _layout.cshtml page
add css-
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
<link href="#Url.Content("~/Content/style.css")" rel="stylesheet" type="text/css" />
</head>
and on bottom add script like
</footer>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryui")
#RenderSection("scripts", required: false)
</body>
</html>
and on the page using add a session for it.. so u dont have to use on every single page
#section scripts
{
#Scripts.Render("~/bundles/jquery.tablesorter")
<script type="text/javascript">
$(document).ready(function () {
$("#myTable").tablesorter();
});
$(document).ready(function () {
$("#myTable").tablesorter({ sortList: [[0, 0], [1, 0]] });
});
</script>
}
The problem seems to be in the way that Javascript is cached. The workaround is to close all instances of the browser between runs and to minimize the use of the back buttons on the browser.
Related
I can find several tutorials on how to render stl files to something that looks like thingiverse renderings but I can't seem to get anything to work on a windows machine. Anyone know how I can do this?
Well someone obviously doesn't like the question but I am sure others have had the problem so here is how I solved it.
I created a web page that rendered the image using jsc3d
<html>
<header>
<link rel="stylesheet" href="/web_inc/all.css">
<script type="text/JavaScript" src="/web_inc/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/web_inc/jquery.form.min.js"></script>
<link rel="stylesheet" href="/web_inc/bootstrap.min.css">
<link rel="stylesheet" href="/web_inc/bootstrap-theme.min.css">
<script type="text/javascript" src="/web_inc/bootstrap.min.js"></script>
<script type="text/javascript" src="/web_inc/jsc3d.js"></script>
<script type="text/javascript" src="/web_inc/jsc3d.console.js"></script>
<script type="text/javascript" src="/web_inc/jsc3d.webgl.js"></script>
<script type="text/javascript" src="/web_inc/jsc3d.touch.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var canvas = document.getElementById('cv');
canvas.width=1200;
canvas.height=900;
var viewer = new JSC3D.Viewer(canvas);
viewer.setParameter('SceneUrl', '/model/1.stl');
viewer.setParameter('InitRotationX', 0);
viewer.setParameter('InitRotationY', 30);
viewer.setParameter('InitRotationZ', 0);
viewer.setParameter('ModelColor', '#57524C');
viewer.setParameter('BackgroundColor1', '#FFFFFF');
viewer.setParameter('BackgroundColor2', '#999999');
viewer.setParameter('RenderMode', 'flat');
viewer.setParameter('MipMapping', 'on');
viewer.setParameter('Renderer', 'webgl');
viewer.setParameter('Definition', 'high');
viewer.init();
viewer.update();
});
function savePreview() {
var canvas = document.getElementById("cv");
$("#imageData").val(canvas.toDataURL("image/png"));
$("#uploadForm").ajaxSubmit({url: '/ajax_update_sim.php', type: 'post'});
}
</script>
</header>
<body>
<canvas id="cv" class="viewerCanvas"></canvas>
<form action="/ajax_upload_sim.php" method="post" enctype="multipart/form-data" id="uploadForm">
<input type="hidden" name="id" value="1">
<input type="hidden" name="data" id="imageData">
</form>
<input type="button" class="button" value="Save Preview" onclick="savePreview();"/>
</body>
</html>
I then created a php file to save the results
$src="img/1.png"
file_put_contents($src, base64_decode(explode(",", $_REQUEST['data'])[1]));
I've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I need fadeout a div in my page using prototype. How can I fadeout following jquery code in prototype?
$('.exercise-main .content .loading-failure').fadeOut(function(){
//my code
}
I think you will need to use script.aculo.us (which is an excellent add-on to the fantastic prototype.js) so as to achieve the Fade effect.
Basic Syntax
new Effect.Fade('id_of_element', [options]);
OR
new Effect.Fade(element, [options]);
Complete Code.
<html>
<head>
<title>script.aculo.us examples</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function FadeEffect(element){
new Effect.Fade(element,
{ duration:1});
}
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:1.0, to:1.0});
}
</script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
Click me to display the image once again
</div>
<br />
<div id="hideshow">
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</body>
</html>
Tutorial link - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm
I myself have used prototype.js and this add-on very heavily so just in case you face any issue, feel free to comment.. :-)
I have the following code:
<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.Event.subscribe('edge.create',
function(response) {
alert('TEST');
}
);
</script>
</head>
<body>
<div id='fb-root'></div>
<fb:like send="true" width="450" show_faces="true" />
</body>
</html>
When I click on like, the alert is not showing up. I have tried the same code before and it seemed to work. Do you see something wrong? I don't see any errors in JS console...I am in localhost.
EDIT:
Here you can see it live: http://jsfiddle.net/jCE5K/
Per http://developers.facebook.com/docs/reference/plugins/like/, you need to have a fb-root DIV tag.
I am trying out knockoutjs at the moment, with my fairly rudimentary knowledge of javascript. I have set up a basic ASP.NET MVC 3 app for this purpose. Here's the snippet I set up in the Home/Index.cshtml view:
#if(false)
{
<script src="../../Scripts/jquery-1.6.3.js" type="text/javascript"></script>
<script src="../../Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
}
#{
ViewBag.Title = "Home Page";
}
<script type="text/javascript">
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
</script>
<h2>#ViewBag.Message</h2>
<p>
Registration: <span data-bind="text: registration"></span><br />
Name: <span data-bind="text: registeredName"></span><br />
Class: <span data-bind="text: entryClass"></span><br />
To learn more about ASP.NET MVC visit http://asp.net/mvc.
</p>
For some weird reason nothing is showing, not even the default values. If I debug through Firebug the ViewModel is showing the properties as being empty too. Have I missed something here?
Many thanks,
Dany.
ADDED: the content of the _Layout.cshtml - it's all stock standard stuff, except for the addition of knockout, and using jquery 1.6.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/knockout-1.3.0beta.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.6.3.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
#Html.Partial("_LogOnPartial")
</div>
<nav>
<ul id="menu">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
</ul>
</nav>
</header>
<section id="main">
#RenderBody()
</section>
<footer>
</footer>
</div>
</body>
</html>
The answer I voted above only worked when I tried it in a plain webpage - not when I tried it in my MVC view. As it turned out I put the script block in the wrong position. I moved it to the end of the view, after the page elements have been processed. The other option is to wrap it within $(document).ready() then you can put the script block containing ViewModel and call to ko.applyBindings() anywhere you want...
use $(document).load(function(){:
<script type='text/javascript'>
//<![CDATA[
$(document).load(function(){
var entryDataViewModel = {
registration: ko.observable("Registration"),
registeredName: ko.observable("Name"),
entryClass: ko.observable("Junior")
};
ko.applyBindings(entryDataViewModel);
});
//]]>
</script>
Have a look: http://jsfiddle.net/S8Rh5/ - it works just fine.