How do I sort results in my search table by use of a drop down menu? - sorting

I am having trouble creating a drop down that can sort my search results, any help is welcome. I have tried a couple of different methods that I have found from the internet but so far none have worked (I have no doubt in my mind that it is user error as others seem to have had success using those methods.) I apologise in advance for my being new at coding.
I have put my new code into this post if you could assess it and explain to me why it is not working I would be eternally grateful to you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jenewan Pets</title>
<link rel="icon" type="image/gif/png" href="img/Logo.png"/>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<body background="img/bckgrnd.png">
<div id="container">
<div id="header">
<img src="img/Header.png" style="position: absolute; top: 0px;"/>
<h1>
<img src="img/logo.png" alt="logo" height="100px" width="100px" border="0px" style=position:relative; />
<div class="box">
<div class="container-1">
<form method="get" action="searchresults11.php" id="searchForm">
<input type="text" id="searchBox" name="q" placeholder="Let's Sniff it Out...">
<div class="search-icon">
<img class="search-icon" img src="img/PawSearch.png" width="18" height="18" alt="search icon" />
</div>
</div>
</div>
</h1>
</div>
<div id="content">
<div id="nav">
<ul>
<li><a class="selected" href="/index.php">Home</a></li>
<li>Dogs</li>
<li>Cats</li>
<li>Birds</li>
<li>Reptiles/Exotic</li>
<li>Aquatics</li>
</ul>
</div>
<div id="Results">
<h2>We sniffed and we found...</h2>
<?php
$con=mysqli_connect("localhost","root","","catalog");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
if(isset($_GET['q'])){
$searchq = $_GET['q'];
}
$q = mysqli_query($con,"SELECT * FROM final_dog_catologue_full where
keywords LIKE '%$searchq%' OR brand LIKE '%$searchq%' OR name LIKE '%$searchq%' LIMIT 0, 40") or
die(mysqli_error("Sorry we lost the scent..."));
echo "<table border='2'>
<tr>
<th> </th>
<th id='Name_Header'>Item Name</th>
<th>Brand</th>
<th id='Price_Header'>Price</th>
</tr>";
while($row = mysqli_fetch_array($q))
{
echo "<tr>";
echo "<td><img src='img/".$row['Picture']."'></td>";
echo "<td headers='Name_Header'>" . $row['Name'] . "</td>";
echo "<td headers='Brand'>" . $row['Brand'] . "</td>";
echo "<td headers='Price_Header'>£" . $row['Retail_Price_With_Delievery'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<script type="text/javascript">
var table = $('table');
$('#Name_Header, #Price_Header')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
</script>
</div>
</div>
<div id="footer">
Copyright © 2017 Jenewan Pets
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>

Related

TypeError: $.ajax is not a function with jquery 3.2.1

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<!--Navigation bar-->
<div id="nav-placeholder">
</div>
<div id="carousel">
</div>
<div id="successfulModal">
</div>
<script>
$(function(){
$("#nav-placeholder").load("newnavbar.html");
$("#carousel").load("carousel.php");
});
</script>
<!--end of Navigation bar-->
<?php
if($_REQUEST['signupValue']==1)
{
echo "<script>";
echo "alert('Thank you for signup');";
echo "</script>";
}
require "database.php";
/* echo " after requre database.php"; */
$result = home_page_image();
if(!$result)
{
/* echo 'Could not run query'.mysql_error(); */
exit;
}
/* $row = $result->fetchAll(PDO::FETCH_ASSOC); */
/* $row = $result->fetch(PDO::FETCH_ASSOC); */
/* echo 'inside php'; */
$count = $result->rowCount();
echo '<div class="container">';
while($count>0)
{
echo '<div class="row">';
$i=0;
while($i<3)
{
$row = $result->fetch(PDO::FETCH_ASSOC);
echo '<div class="col-sm-4">';
echo '<div class="card">';
echo '<div class="card-body"><a href="productDetails.php?id=';
echo $row['code'];
echo '"><img src="../';
echo $row['imageurl'];
echo '" class="img-responsive" style="width:250px;height:250px" alt="Image">';
echo '</a></div><div class="card-footer">';
echo mb_strimwidth($row['name'],0,28,"...");
echo '<button type="button" class="btn btn-outline-dark pull-right" onclick="like('.$row['code'].')"><i class="fa fa-thumbs-o-up"></i></button><button type="button" class="btn btn-outline-dark pull-right" onclick="cart('.$row['code'].')"><i class="fa fa-cart-arrow-down"></i></button></div></div></div>';
$i++;
$count--;
}
echo '</div>';
}
?>
</div><br><br>
<div id="footer">
</div>
<script>
function like($code)
{
alert("like button clicked");
$.ajax({
url: 'insertLike.php',
type: 'POST',
data: {
code: $code
}
/*success: function(msg) {
alert('Email Sent');
} */
});
};
$(function(){
$("#footer").load("footer.html");
});
</script>
</body>
</html>
When I use <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
instead of <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> the output damaged.
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> works.
But the original view of the output is
newnavbar.html uses some other script where there is a different version of jquery. I don't sure whether this generates the error or not.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
I view some answer answer with the same error, but nothing solves my problem. For that I have to post a new question with same error. Is it jquery version problem? Or, syntax error problem?
first you should put any scripts in the end of body
for that you should put jquery script in the end of body
As e.g
<body>
<h1> hello world </h1>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</body>
replace https://code.jquery.com/jquery-3.3.1.slim.min.js with the full jQuery version https://code.jquery.com/jquery-3.3.1.min.js that works.

Correct way to initialize kendo widgets inside template

Im inserting an widget within template like this:
<script id="example-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>#= example #</h3>
</div>
</script>
But the widget is does not initialize, just show as plain html.
Some people suggest to use kendo.mobile.init and it works, but looks like a hack. This method is not at least documented.
My question is: what can I do to properly initialize widgets inside template?
Complete example:
<!DOCTYPE html>
<html>
<head>
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="https://da7xgjtj801h2.cloudfront.net/2015.2.624/styles/kendo.silver.min.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://da7xgjtj801h2.cloudfront.net/2015.2.624/js/kendo.ui.core.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div data-role="collapsible" data-expand="expandHandler">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
<script>
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
}
function expandHandler(){
console.log("expand");
}
</script>
</body>
</html>
Not sure how you do that mvvm way, go on with this initializing it on the javascript instead if it is okay
See the example :
var app = new kendo.mobile.Application();
var data = [
{"title": "title1", "line1": "line 1", "line2": "line 21"},
{"title": "title2", "line1": "line 12", "line2": "line 22"}
];
function expandHandler(){
console.log("expand");
}
function onShow(){
var template = kendo.template($("#collapsible-template").html());
$("#bar").html(kendo.render(template, data));
$(".test").kendoMobileCollapsible({
expand: expandHandler
})
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script></head>
<body>
<!-- view -->
<div id="foo"
data-role="view"
data-show="onShow"
data-model="viewModel">
<div id="bar">
</div>
</div>
<!-- template -->
<script id="collapsible-template" type="text/x-kendo-template">
<div class="test">
<h3>
#= title #
</h3>
<table>
<tr>
<td>Line 1:</td>
<td>#= line1 #</td>
</tr>
<tr>
<td>Line 2:</td>
<td>#= line2 #</td>
</tr>
</table>
</div>
</script>
</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>

Struts2 jqGrid issues in IE6

Is there any alternative which can make struts2 jqgrid better in IE6. The images are sample images.
In my application I have developed several grids using plugins All are working fine in all browsers but looking weird in IE6
You can find the differences between them IN IE6 header columns looks weird and that hide/unhide button also missing ..
Please help me how to fix this thing My application has to work in IE6
versoins I am using
Struts2-core 2.3.8
Struts2-jquery-grid-3.6.1
Struts2 jQuery-3.6.1
This one is the html code by clicking on view source
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="keywords" content="struts2,jquery, hibernate, plugin,showcase, grid" />
<meta http-equiv="description" content="Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins" />
<title>Struts2 jQuery Grid Plugin Showcase - 3.7.0</title>
<link href="/struts2-jquery-grid-showcase-3.7.0/styles/flexible-grids.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="/struts2-jquery-grid-showcase-3.7.0/yaml/core/iehacks.min.css;jsessionid=3934431750DCFB5887508B8F186FD38D" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/base/jquery-ui.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.form.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/plugins/jquery.subscribe.min.js?s2j=3.7.0"></script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/struts/js/struts2/jquery.struts2.min.js?s2j=3.7.0"></script>
<script type="text/javascript">
$(function() {
jQuery.struts2_jquery.version="3.7.0";
jQuery.struts2_jquery.debug = true;
jQuery.struts2_jquery.loadAtOnce = true;
jQuery.scriptPath = "/struts2-jquery-grid-showcase-3.7.0/struts/";
jQuery.ajaxSettings.traditional = true;
jQuery.ajaxSetup ({
cache: false
});
jQuery.struts2_jquery.require("js/struts2/jquery.ui.struts2.min.js?s2j=3.7.0");
});
</script>
<link id="jquery_theme_link" rel="stylesheet" href="themes/showcase/jquery-ui.css?s2j=3.7.0" type="text/css"/>
<script type="text/javascript">
var employee_detail_url = '/struts2-jquery-grid-showcase-3.7.0/employees-detail.action;jsessionid=3934431750DCFB5887508B8F186FD38D';
</script>
<script type="text/javascript" src="/struts2-jquery-grid-showcase-3.7.0/js/showcase.js; jsessionid=3934431750DCFB5887508B8F186FD38D"></script>
</head>
<body>
<header class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-wbox" style="padding: 5px 0 0 0;">
<div>
<h1 class="ui-state-default" style="background: none; border: none; margin: 0;">Showcase for Struts2 jQuery Grid Plugin and Full Hibernate Struts2 Plugins</h1>
<h4 class="ui-state-default" style="background: none; border: none;">Struts2 jQuery Plugin - Version 3.7.0 / Full Hibernate Plugin - Version 2.2.1 GA</h4>
</div>
</div>
</header>
<nav id="nav" class="ui-widget-header">
<div class="ym-wrapper">
<div class="ym-hlist">
<ul id="navlist">
<li><a id="gridlink" href="javascript:void(0)">Grid (Editable)</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridlink = {};
options_gridlink.jqueryaction = "anchor";
options_gridlink.id = "gridlink";
options_gridlink.targets = "main_content";
options_gridlink.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridlink'),options_gridlink);
});
</script></li>
<li><a id="gridsubgridlink" href="javascript:void(0)">Grid with Subgrid</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_gridsubgridlink = {};
options_gridsubgridlink.jqueryaction = "anchor";
options_gridsubgridlink.id = "gridsubgridlink";
options_gridsubgridlink.targets = "main_content";
options_gridsubgridlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- subgrid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#gridsubgridlink'),options_gridsubgridlink);
});
</script></li>
<li><a id="griddndlink" href="javascript:void(0)">Grid with Drag and Drop</a>
<script type='text/javascript'>
jQuery(document).ready(function () {
var options_griddndlink = {};
options_griddndlink.jqueryaction = "anchor";
options_griddndlink.id = "griddndlink";
options_griddndlink.targets = "main_content";
options_griddndlink.href = "/struts2-jquery-grid-showcase-3.7.0/grid- dnd.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#griddndlink'),options_griddndlink);
});
</script></li>
<li>Struts2 jQuery Plugin</li>
<li>Full Hibernate Plugin</li>
</ul>
</div>
</div>
</nav>
<div id="main">
<div class="ym-wrapper">
<div id="main_content"
class="ym-wbox"
>
<img id="indicator" src="images/indicator.gif" alt="Loading..."/>
</div><script type='text/javascript'>
jQuery(document).ready(function () {
var options_main_content = {};
options_main_content.jqueryaction = "container";
options_main_content.id = "main_content";
options_main_content.href = "/struts2-jquery-grid-showcase- 3.7.0/grid.action;jsessionid=3934431750DCFB5887508B8F186FD38D";
jQuery.struts2_jquery.bind(jQuery('#main_content'),options_main_content);
});
</script>
</div>
</div>
<footer>
<div class="ym-wrapper">
<div class="ym-wbox">
<p style="text-align: center;">
Written by Johannes Geppert and José Yoshiriro<br/>
Layout based on YAML
</p>
</div>
</div>
</footer>
</body>

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