Here is the header
--
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<link type="text/css" rel="stylesheet"
href="http://jquery-validatation-engine-extended.googlecode.com/files
/validationEngine.jquery.css" />
<script type="text/javascript" src="http://jquery-validatation-engine-
extended.googlecode.com/files/jquery.validationEngine.js"></script>
<script type="text/javascript" src="http://jquery-validatation-engine-
extended.googlecode.com/files/jquery.validationEngine-en.js"></script>
here is the js to initialize jquery
$("#formID").validationEngine({ /* create the form validation */
inlineValidation: false,
promptPosition: "centerRight",
success : function(){use_ajax=true}, /* if everything is OK enable AJAX */
failure : function(){use_ajax=false} /* in case of validation failure disable AJAX */
})
here is the form in html
<form name=formID method=post action=devenir_membre2.php>
<table width=85% cellspacing=1>
<tr><td width=50% style="padding-bottom: 15px;">Nickname:</td>
<td width=50%> <input type=text class="validate[required]" name=nickname></td></tr>
</table>
</form>
What could I do ?
Regards, thanks for reading
Assign a correct id to the HTML form, that is :
<form id="formId" name="...." ...
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'm using JQuery Mobile with a form that changes server side. I need to reload the page so the most recent form is included on the page. The form also needs validation.
I'm able to get the validation to work once but once until a submit. The page successfully is refreshed and the form appears but the validation is gone and if I submit, a standard submit is done instead of a changePage.
The on pageinit seems to be firing every time. I've been pulling my hair out on this one. It seems like this should be so simple.
<?php //
session_start();
if (isset($_SESSION['mytest']))
$_SESSION['mytest']++;
else
$_SESSION['mytest'] = 1;
$s = $_SESSION['mytest'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mytestout</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"> </script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
</head>
<body>
<div data-role="page" data-theme='b' id="testit" >
<div data-role="content" class="content" id="cart" style="margin-top: 25px; margin-left: 40px">
<p> counting session var = <?=$s?> </p>
<form id="myform">
<input type="text" name="myname">
<input type="submit">
</form>
</div>
</div>
<script>
function submitme(e) {
$.mobile.changePage( "#testit", { transition: "slideup", changeHash: false, reloadPage: true, allowSamePageTransition: true });
}
$(document).on('pageinit', function(){ //
$("#myform").validate( {
rules: {
myname: "required"
}
,submitHandler: function(e) { submitme(e);}
});
});
</script>
</body>
</html>
The problem here is the 'pageinit' event, which runs just once per page (its also deprecated). You'd have to use the pagecontainershow event, which runs each time the page is shown. That should initialize the form validation again, making it work for each time its rendered. Note that I haven't tested that solution, yet.
I tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">
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.
I am pretty new and got a following problem...
case:
We got an accordion and within this accordion we got an sexy-combo-box
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery.sexy-combo-2.1.2.min.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/examples/usage.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/jquery.autogrow.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/lib/jquery.bgiframe.min.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/development-bundle/ui/ui.core.js"></script>
<script type="text/javascript" src="../../../../Library/WebServer/Documents/sexy-combo/development-bundle/ui/ui.accordion.js"></script>
<link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/lib/sexy-combo.css" />
<link rel="stylesheet" type="text/css" href="../../../../Library/WebServer/Documents/sexy-combo/skins/sexy/sexy.css" />
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion();
$("#basic-combo").sexyCombo();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="accordion">
<h3>Form A</h3>
<div>
<p>Please fill out the following:</p>
<p>1. What cookies do you like?</p>
<p><select id="basic-combo" name="resObj" size="2">
<option>jelly</option>
<option>biscuit</option>
<option>chocolate</option>
</select>
</p>
<p>2. What ice cream do you like?</p>
<p><select id="empty-combo" name="sort" size="2">
<option>strawberry</option>
<option>chocolate</option>
<option>vanilla</option>
</select></p>
<p>3. please tell us, how did you get attention to this site?</p>
<p>
<textarea style="width: 400px; height: 84px; min-height: 80px;" class="expanding" name="myTextarea"></textarea>
</p>
</div>
<h3>Form B</h3>
<div>
<p>4. Please tell us the minimum and max amount of chocolate that you eat:</p>
<p>min
<input name="minConsump" type="text" id="start" size="5" />
max
<input name="maxConsump" type="text" id="finish" size="5" />
required time (in minutes) that you take to eat the amount
<input name="reqTime" type="text" id="time" size="5" />
</p>
</div>
</body>
</html>
problem:
- accordion works fine, but sexy combo does not, you can just see the "normal" selection-box
already tried/strange phenomenon:
- removing $("#accordion").accordion(); causes that sexy combo works
possible reason:
- accordion starts before the sexy combo object ...after all the sexy combo object is not being loaded or some sort of "hidden" by the accordion object
does someone has an idea what the reason for this behavior could be ? or how to fix it ?
After reading some topics here I found smth. out like a jQuery live plugin, and that maybe I do need this plugin in order to handle it that when accordion is loaded, the sexy-combo plugin loads too.
best regards
leejin
I found a similar problem when using the sexyCombo in a dialog, so it would be worth checking whether the same problem exists when using it with an accordion.
After examining the markup I realised that the height of the list was being set to 0 when the combo was rendered in the dialog.
I added a dirty hack to my local copy of sexyCombo. Check out line 194 (ish) of the Javascript:
this.singleItemHeight = this.listItems.outerHeight();
For some reason outerHeight() returns 0, so I just added a check to see if singleItemHeight was 0 and if so set it to a sensible value.