JQuery Mobile: Randomly Sort Checkboxes Except One - sorting

In a survey, I need to show several checkboxes displayed in a randomly fashion, but one of them have to be still, since I need to capture a text for example
What is your favorite color?
( ) Red
( ) Yellow
( ) Blue
Other, please specify:____________________
--------------
What is your favorite color?
( ) Yellow
( ) Red
( ) Blue
( ) Other, please specify:____________________
--------------
What is your favorite color?
( ) Blue
( ) Yellow
( ) Red
( ) Other, please specify:____________________
I have a code that works, but I can't keep the last option still...
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<meta charset=utf-8 />
<title>Semi-Random Checkboxes</title>
</head>
<body>
<fieldset id="checkboxes" data-role="controlgroup">
<label><input type="checkbox" value="red">Red</label>
<label><input type="checkbox" value="blue">Blue</label>
<label><input type="checkbox" value="yellow">Yellow</label>
<label><input type="checkbox" value="Other">Other, specify</label><input type="text" value="text">
</fieldset>
<script>
(function($) {
var container = $("#checkboxes");
var cbs = container.children("label");
var index;
for (index = 0; index < cbs.length; ++index) {
$(cbs[Math.floor(Math.random() * cbs.length)]).appendTo(container);
}
})(jQuery);
</script>
</body>
</html>

Related

CKEditor math formula rendering on target div

I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.
When I do with the following approach it is displaying math formula as text(not formatting as formula).
<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
function onSubmit(){
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML=data
}
</script>
</head>
<body>
<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()" >
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
}
</script>
</body>
</html>

It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html.
For reference(Comparison between katex and latex ) :
https://www.intmath.com/cg5/katex-mathjax-comparison.php
So the solution by using katex will be :
<!DOCTYPE html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
crossorigin="anonymous"></script>
<script>
function onSubmit() {
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML = data
domChanged();
}
</script>
</head>
<body>
<form action="#">
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()">
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
});
if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
document.getElementById('ie8-warning').className = 'tip alert';
}
function domChanged() {
renderMathInElement(document.body);
}
</script>
</body>
</html>
Good luck !!!

Bind visible to whether field (in kendo observable) has changed or not?

I would like to show or hide elements of my kendo template based on whether or not a field in my model has changed or not.
First attempt:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne.dirty"/>
Attempt two is to have a 'schedulerEventFieldOneOrigValue' field added to my model, then doing this:
<input type="text" data-bind="value: schedulerEventFieldOne"/>
<input type="text" data-bind="value: schedulerEventFieldTwo, visible: schedulerEventFieldOne != schedulerEventFieldOneOrigValue"/>
But this gives me an error stating that schedulerEventFieldOne is not defined. It seems that it doesn't like the equality test. Which is odd since, using a < o r > test seems to work fine: "visible: schedulerEventFieldOne > 0"
Is there a way to accomplish my task using the kendo binding? Or will I have to resort to jQuery again?

You do not state any concern, so why dont you do it on the view model with the second approach? It's possible to do this i believe :
$(document).ready(function() {
var vm = kendo.observable({
form: {
country: ""
},
original: {
country: ""
},
isDisabled: function() {
return this.get("form.country") != this.get("original.country");
},
save: function() {
}
})
kendo.bind($("#test"), vm);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<input type="text" data-bind="value: form.country" />
<button data-bind="click:save, visible:isDisabled">Save</button>
</div>
</body>
</html>

Fit parent area

I'm testing ckeditor.
I'm trying to create a ckeditor which fits the "div" where it's placed.
This is what I've tried, but only works on startup and not with resize window.
Is there an easy way to fit ckeditor the div where it's places?
Thanks
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.3/menu.css">
<script src="jquery-easyui-1.4.3/jquery.min.js"></script>
<script src="jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
<script src="ckeditor/ckeditor.js"></script>
<script>
function iniciar()
{
e= CKEDITOR.replace( 'editor1',
{ uiColor: '#CCEAEE' ,
on: { 'instanceReady' : function( evt )
{redimensionar();}
}
} );
}
var r;
function redimensionar(p1)
{
if (p1==1)
{ console.log("e: " + $("#").width() +','+$("#c1").height());
console.log("c1: " + $("#c1").width() +','+$("#c1").height());
e.resize($("#c1").width(),$("#c1").height());
}
else
{ if (r)
clearTimeout(r);
r=setTimeout(redimensionar, 500, 1);
}
}
</script>
</head>
<body class="easyui-layout" onload="iniciar()" onresize="redimensionar()">
<!-- Norte -->
<div data-options="region:'north'" style="height:10%">
My title
</div>
<!-- Centro -->
<div id="c1" data-options="region:'center'" style="height:80%; background:skyblue;">
<textarea id="editor1" >
<p>This is some <strong>sample text</strong>. You are using CKEditor.</p>
<p><iframe align="middle" frameborder="1" height="500" id="portada" longdesc="La gran portada" name="Portada" scrolling="yes" src="portada.html" style="background: green" title="La portada" width="500">Contenido iframe.</iframe></p>
<p> </p>
</textarea>
</div>
<!-- Pie -->
<div data-options="region:'south'" style="height:30px">
Foot
</div>
</body>
</html>

How to get the html of CKEditor

I am diving in the deep end of this magic world of HTML. I have the CKEditor woring and myFunction produces the alert. I need to get the HTML of the text in the editor.
I got this from another post:
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
I could not comment or reply to the post as I don't have enough points so I have to ask a duplicate.
I have the alert working and pasted the code in myFunction but I get the error in the console Uncaught TypeError: Cannot call method 'on' of undefined.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
alert(htmldata);
}
</script>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<button onclick="myFunction()">Click me</button>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.....
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
MrWarby
<!DOCTYPE html>
<html>
<head>
<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor
</textarea>
<script>
function myFunction()
{
alert('test');
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
}
CKEDITOR.replace( 'editor1' );
</script>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I've tried moving into different place but I still get the same error.
test page is at http://www.wilsea.com/ckeditor/testckeditor.html
MrWarby.

Before your SCRIPT in HEAD add two more lines:
<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
But change path to CkEditor script.

Python and Scrapy doesn't work well with malformed HTML

I was trying to crawl a website which has badly formatted HTML web pages. Take some web page as an example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="physician, doctor, CME, CE, physician job recuiter, Chinese speaking doctors, medical school alumni," />
<meta name="description" content="An online database for physicians who obtained medical degree in China and are practicing in USA. It contains over 6,000 profiles. Email:admin#cmgforum.net for any question." />
<title>
CMG Physician Database - 华人医生数据库
</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-27283808-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript">
function validateForm()
{
valid = true;
if ( document.myForm.last.value == "" )
{
alert ( "Last name is required" );
valid = false;
}
else if ( document.myForm.first.value == "" )
{
alert ( "First name is required" );
valid = false;
}
else if ( document.myForm.states.value == "" )
{
alert ( "State is required" );
valid = false;
}
else if ( document.myForm.specialty_id.value == "" )
{
alert ( "Specialty is required" );
valid = false;
}
else if ( document.myForm.gradschool_id.value == "" )
{
alert ( "School is required" );
valid = false;
}
return valid;
}
</script>
<script type="text/javascript">
if (screen.width<800) {
window.location="http://physician.cmgforum.net/m/";
}
</script>
<script language="JavaScript"
type="text/JavaScript">
function changePage(newLoc)
{
nextPage = newLoc.options[newLoc.selectedIndex].value
if (nextPage != "")
{
document.location.href = nextPage
}
}
</script>
</head>
<body>
<div id="outer">
<div id="upbg"></div>
<div id="inner">
<div id="header">
<embed src="flash/cmglogo.swf" width="685" Height="90">
</div>
<div id="menu">
<center>
<ul>
<li>Home</li>
<li>Combo Search</li>
<li>Name</li>
<li>Schools</li>
<li>Specialties</li>
<li>Local Specialties</li>
<li>States</li>
<li>Cities</li>
</center>
</div>
<table width="100%">
<tr>
<td width="2%"></td>
<td>
<form method="POST" name="menu" >
<select name="selectedPage"
onChange="changePage(this.form.selectedPage)">
<option value = "" selected>Site Navigation</option>
<option value = "/index.php">Home</option>
<option value = "/facilities.php"> Medical Facilities</option>
<option value = "/stats-d.php">Statistics</option>
<option value = "/contact.php">Contacts</option>
<option value = "/top5.php">The Top5</option>
<option value = "http://blog.cmgforum.net">Blog</option>
<option value = "/links.php">Links</option>
<option value = "/addme.php">Add Me</option>
<option value = "/news.php">News</option>
<option value = "/faq.php">FAQ</option>
<option value = "/pop-d.php">人气</option>
<option value = "/pgy-d.php">PGY</option>
<option value = "/video2-d.php">CMG Videos</option>
<option value = "/url.php">CMG Website</option>
</select>
</form>
</td>
<td>
<script type="text/javascript"><!--
google_ad_client = "ca-pub-6867265085889194";
/* header-links */
google_ad_slot = "9503010667";
google_ad_width = 468;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr></table>
</body>
</html>
<center>
<table><tr>
<td width="5%"></td>
<td>
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-6867265085889194";
/* 468x60, created 8/19/10 */
google_ad_slot = "1699885909";
google_ad_width = 400;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</td>
<td>
<img src="images/code.jpg" alt="QR Code" height="60" width="60">
</td>
</tr></table>
</center>
<!---
<marquee ALIGN="Top" LOOP="infinite" BGCOLOR="#FFFFFF" DIRECTION="left" HEIGHT=16 WIDTH=640 scrollamount="3" scrolldelay="1"><FONT SIZE="3" FACE="courier" COLOR=blue>
第三届健桥医学峰会即将在波士顿召开, 更多的信息请点击这里！
</font></marquee>
--->
<table width="100%" style="text-shadow: 1px 1px 3px #999;"><tr><td width="3%"></td><td width="16%">Allergy & Immunology(20)<br>Anesthesiology(595)<br>Cardiology(129)<br>Dentistry(437)<br>Dermatology(29)<br>Emergency Medicine(8)<br>Endocrinoloy(60)<br>Family Practice(434)<br>Gastroenterology(88)<br>General Surgery(94)<br>Geriatric Medicine(48)<br>Hem/Onc(295)<br>Infectious Disease(12)<br>Internal Medicine(1880)<br>Medical Genetics(47)<br><br></td><td width="3%"></td><td width="16%">Nephrology(114)<br>Neurology(333)<br>Neurosurgery(11)<br>OB/GYN(83)<br>Occupational Med(33)<br>Ophthalmology(63)<br>Optometry(28)<br>Orthopaedics(18)<br>Otolaryngology(10)<br>Pathology(1235)<br>Pediatrics(300)<br>Pediatric Hem/Onc(8)<br>Pediatric Cardiology(9)<br>Pediatric GI(9)<br>Pediatric Neurology(13)<br><br></td><td width="3%"></td><td width="17%">Pediatric Endocrinology(10)<br>Pediatric Rheumatology(2)<br>Pediatric Allergy(Immu)(5)<br>Plastic Surgery(5)<br>Psychiatry(319)<br>Pulmonary Disease(30)<br>Radiation Oncology(54)<br>Diag Radiology(Nuclear)(156)<br>Rehabilitation(216)<br>Sports Medicine(2)<br>Rheumatology(43)<br>Thoracic Surgery(17)<br>Urology(12)<br>Add New Specialty<br>Add New Specialty<br><br></td><td width="3%"></td><td width="20%"><script type="text/javascript"><!--
google_ad_client = "ca-pub-6867265085889194";
/* spe-120-240 */
google_ad_slot = "2416199460";
google_ad_width = 120;
google_ad_height = 240;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br>
</td></tr></table><div id="top5">
<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<center>
<div id="ad">
<script type="text/javascript"><!--
google_ad_client = "pub-6867265085889194";
/* 728x90, created 8/26/10 */
google_ad_slot = "7083487992";
google_ad_width = 715;
//google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</center>
</body>
</html>
</div>
<center>
<table border="0" BORDERCOLOR=orange><tr>
<td><div style="padding: 2px; border: 1px red solid;"></div></td>
<td><img src="http://physician.cmgforum.net/images/wikilips.jpg" border="1" width="160" height="80"></td>
<td><img src="http://physician.cmgforum.net/images/MedicalCareer_150x65.gif" border="1" width="170" height="80"></td>
<td><img src="http://physician.cmgforum.net/images/scan.JPG" border="0" width="80" height="80">
<img src="http://physician.cmgforum.net/images/qrcode.png" border="0" width="80" height="80">
</td>
</tr></table>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>terrafirma1.0 by nodethirtythree</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link rel="stylesheet" type="text/css" href="default.css" />
</head>
<body>
<center>
<div id="footer">
© copyright 2007 cmgforum.net. all rights reserved.
Contact: admin#cmgforum.net
</div>
</div>
</div>
</body>
</html>
As we can see from this, there are two root elements here. In such case, Scrapy can't parse the XPath correctly. Any ideas how to handle this?

When you face malformed HTML pages, try to generalize your xpaths since the browser and scrapy don't interpret the page in the same way. In this case, if you want to extract the list of links in the table, try an xpath like this:
//tr//td//a[contains(#href,'/specialty/')]

Resources