I am working on a website and the owner of the website found three broken links (through a software/tool of IBM) in the given page. I removed two broken links but there is one broken link left. I searched the whole web page but I am unable to find it.
What can I do to find that link?
Here is the code of the page:
<?php
session_start();
ob_start();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Legal Aid Service Monitoring System</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery3.js"></script>
<script type="text/javascript" src="js/jquery4.js"></script>
<script type="text/javascript" src="js/jquery5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#login-form").validate({
debug: false,
rules: {
email: {
required: true,
email: true
}
},
messages: {
email: "Please enter a valid email.",
},
});
});
</script>
<style type="text/css">
label.error { width: 250px; color: red;}
</style>
</head>
<body>
<?php
if($_POST['login'])
{
require_once("config.php");
if($_POST['user_type']=='admin')
{
$user=mysql_real_escape_string($_POST['uname']);
$password=md5($_POST['pwd']);
$sql=mysql_query("select id from admin where username='$user' and password='$password'");
$count=mysql_num_rows($sql);
if($count>0)
{
$row=mysql_fetch_array($sql);
$_SESSION['admin']=$row['id'];
$date=date('d-m-y');
$time_now=mktime(date('h')+0,date('i')+00,date('s'));
$time=date('h:i:s',$time_now);
$login=mysql_query("insert into user_login (user_id, login_date, login_time) values ('$_SESSION[admin]', '$date', '$time')");
header('location: administrator');
}
else
{
?>
<script type="text/javascript"> alert('Incorrect Username and Password.');</script>
<?php
}
}
else if($_POST['user_type']=='advo')
{
$user=mysql_real_escape_string($_POST['uname']);
$password=md5($_POST['pwd']);
$sql=mysql_query("select id, status from advocates where email='$user' and password='$password'");
$count=mysql_num_rows($sql);
$row=mysql_fetch_array($sql);
if($count>0 and $row['status']=='1')
{
$_SESSION['advocate']=$row['id'];
$date=date('d-m-y');
$time_now=mktime(date('h')+0,date('i')+00,date('s'));
$time=date('h:i:s',$time_now);
$login=mysql_query("insert into advo_login (advo_id, login_date, login_time) values ('$_SESSION[advocate]', '$date', '$time')");
header('location: advocate');
}
else
{
if($row['status']=='0')
{
?>
<script type="text/javascript">alert('Your account has been blocked by admin.');</script>
<?php
}
else
{
?>
<script type="text/javascript">alert('Incorrect Username and Password.');</script>
<?php
}
}
}
}
?>
<div class="main" id="main">
<div id="headerbg">
<div id="header"></div>
</div>
<div id="center">
<div class="style1" id="centerright">
<div id="centerup">
<table width="514" border="0" align="center">
<tr>
<td><h3>Welcome to Legal Aid Service Monitoring System</h3></td>
</tr>
</table>
</div>
<div id="centerdown">
<div id="loginbg">
<form id="login-form" name="login-form" method="post" action="">
<table width="500" border="0" >
<tr><td></td>
<td height="30">
<input type="radio" name="user_type" value="advo" checked="checked" />Advocate
<input type="radio" name="user_type" value="admin" />Administrator
</td>
</tr>
<tr>
<td width="50"><span class="style5">Username:</span></td>
<td width="236"><label>
<input type="text" name="uname" class="required input" size="30" />
</label></td>
</tr>
<tr>
<td><span class="style5">Password:</span></td>
<td><label>
<input type="password" name="pwd" id="pwd" class="required input" size="30"/>
</label></td>
</tr>
<tr>
<td></td>
<td><label>
<input type="submit" class="style1loginbg" name="login" id="button" value="Login" />
</label></td>
</tr>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If you have Firebug or somekind of similar console access you could run this snippet of code on a page by page basis:
jQuery(function(){
var getHost = function(url){
url = String(url);
if ( (url.substr(0,5) == 'http:') || (url.substr(0,6) == 'https:') ) {
return url.split('/').slice(0,3).join('/');
}
else {
return null;
}
}
var host = getHost(window.location);
jQuery('a').each(function(){
var link = $(this), href = link.attr('href'), hst = getHost(href);
if ( hst === host || hst === null ){
jQuery.ajax({
url: href,
error: function(){
link.css('border', '5px solid red');
}
});
}
else {
link.css('border', '5px solid purple');
window.open( link,'_blank');
}
});
});
It should highlight with a red border any internal links that fail to load via ajax, and highlight any external links with purple (at which point it'll try and open the external link in a new tab for you to visually check). Obviously this might go a bit mad if your page has many external links...
It would be far better to actually get some link checking software - search Google - and run that... as that should act in a way that's know as 'Spidering a site'. Basically it would step through each of your pages and return a report of all the broken links found (you'd have to make sure the software supported cookies seeing as the site you've given requires authorisation).
One further thing to be aware of is that it isn't just links that can cause software to fire a 'broken link' error. You may find that some of your page resources trigger a 404... i.e. you should check all your images, css and js to make sure they load.
This suggestion doesn't solve the question, but I believe it's worth mentioning that the WebDev toolbar (http://chrispederick.com/work/web-developer/ (a firefox add-on) can at least help here.
It can display all links in a webpage and highlight and show all anchors. This can help the developer to 'scan' a website for out-of-place links. )
When installed, choose INFORMATION » and either
Display anchors
Display page information
Display link information
You can use a tool like phantomjs or protractor for this. One working tool can be found on https://github.com/ashittheone/broken-links-log.
this repository can be used to log all broken links upto 5 depth of anywebsite.
Although in a later version the depth is expected to be coming customizable
Related
I want to be able to use a Stimulus Controller in multiple places in a web app. I want do something like this:
<div data-controller="mycontroller">
<OneComponent />
</div>
<SomeOtherComponent />
<div data-controller="mycontroller">
<NewComponent />
</div>
But the controller just seem to connect to the first Component and not in the second. Is it possible to use it as I'm intending to?
Thanks!
Stimulus controllers can be reused. See this sample.
Possible problems that may prevent this from working is if there is a JS error, or that you expect elements in nested components to be used in the parent component, if they have not been rendered yet.
const application = Stimulus.Application.start()
application.register("hello", class extends Stimulus.Controller {
connect() {
console.log("connect to", this.element.getAttribute("data-language"))
}
static get targets() {
return [ "name" ]
}
greet() {
if (this.element.getAttribute("data-language") == "es-ES") {
console.log(`¡Hola, ${this.nameTarget.value}!`);
} else {
console.log(`Hello, ${this.nameTarget.value}!`);
}
}
})
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
</head>
<body>
<div data-controller="hello" data-language="en-US">
<input data-hello-target="name" type="text" value="John">
<button data-action="click->hello#greet">Greet</button>
</div>
<div data-controller="hello" data-language="es-ES">
<input data-hello-target="name" type="text" value="Jose">
<button data-action="click->hello#greet">Saudar</button>
</div>
</body>
</html>
I ran into this error when I updating OneNote page content. But let me explain my input HTML for OneNote first before I show you the issue.
Here is my input HTML template:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<object data-id="markdown-file" data-attachment="markdown.md" data="name:markdown" type="text/markdown" />
<div data-id="content">{{ content goes here }}</div>
</body>
</html>
And I sent the following patch command to update content if div[data-id="content"] exists:
{
'target': generated id of div[data-id="content"],
'action': 'replace',
'content': '<div data-id="content">{{ actual content }}</div>'
}
otherwise, I use another command:
{
'target': 'body',
'action': 'append',
'content': '<div data-id="content">{{ actual content }}</div>'
}
Most of time, it works fine. But sometimes not. Suppose we have the following output html:
HTML
<html lang="en-US">
<head>
<title>2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{bbed3bc8-6ec5-4900-b1ee-a11259b4d796}{2}" data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
<object data-attachment="markdown.md" type="text/markdown" data="https://graph.microsoft.com/v1.0/users('195d63c8-4d1e-4073-b535-5d8a32b6f6ce')/onenote/resources/1-5ae390556d1e4351b358b6e1a667a226!1-051437c2-f608-445d-b537-e68aea2dfcd9/$value" data-id="markdown-file" />
<div data-id="content" id="div:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{69}:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{81}">
<table id="table:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{69}" style="border:1px solid;border-collapse:collapse">
<tr id="tr:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{70}">
<td id="td:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{72}" style="background-color:white;border:1px solid;text-align:center"><span style="font-family:BlinkMacSystemFont;color:#363636;font-weight:bold">Head</span></td>
</tr>
<tr id="tr:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{71}">
<td id="td:{ce16905b-a76b-4e35-86de-1a46b5f8a62f}{75}" style="background-color:white;border:1px solid"><span style="font-family:BlinkMacSystemFont;color:#363636">Column</span></td>
</tr>
</table>
</div>
</div>
</body>
</html>
Notice that div[data-id="content"] only contains a table. If I try to replace div[data-id="content"], it shows the error The PATCH target $value specified and page content related to the specified PATCH target cannot be located. The error message is not quite clear, so I cannot know which target is missing.
But if the output HTML contains not only tables, but also other elements, it can be replaced successfully. My code works with the following output HTML:
<html lang="en-US">
<head>
<title>3</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body data-absolute-enabled="true" style="font-family:Calibri;font-size:11pt">
<div id="div:{a61d7d65-215f-4936-a8c3-4dda9a805827}{249}" data-id="_default" style="position:absolute;left:48px;top:120px;width:624px">
<object data-attachment="markdown.md" type="text/markdown" data="https://graph.microsoft.com/v1.0/users('195d63c8-4d1e-4073-b535-5d8a32b6f6ce')/onenote/resources/1-c52b2dd5a8d74a89a0e038373b52b3f1!1-051437c2-f608-445d-b537-e68aea2dfcd9/$value" data-id="markdown-file" />
<div data-id="content" id="div:{25489f27-57fa-4798-b4ef-d229a5c5841f}{171}:{25489f27-57fa-4798-b4ef-d229a5c5841f}{187}">
<table id="table:{25489f27-57fa-4798-b4ef-d229a5c5841f}{171}" style="border:1px solid;border-collapse:collapse">
<tr id="tr:{25489f27-57fa-4798-b4ef-d229a5c5841f}{172}">
<td id="td:{25489f27-57fa-4798-b4ef-d229a5c5841f}{174}" style="background-color:white;border:1px solid;text-align:center"><span style="font-family:BlinkMacSystemFont;color:#363636;font-weight:bold">Head</span></td>
</tr>
<tr id="tr:{25489f27-57fa-4798-b4ef-d229a5c5841f}{173}">
<td id="td:{25489f27-57fa-4798-b4ef-d229a5c5841f}{177}" style="background-color:white;border:1px solid"><span style="font-family:BlinkMacSystemFont;color:#363636">Column</span></td>
</tr>
</table>
<p id="p:{25489f27-57fa-4798-b4ef-d229a5c5841f}{187}" style="margin-top:5.5pt;margin-bottom:5.5pt"><span style="font-family:BlinkMacSystemFont;color:#4a4a4a">hello</span></p>
</div>
</div>
</body>
</html>
The only difference of two output html is the second one has a p tag. This issue seems weird.
Here is my code to update page content:
def update_page(id):
original_content = _get_page_content(id)
original_document = PyQuery(original_content)
content_div = original_document('div[data-id="content"]')
page = request.json
new_document = PyQuery(page['content'])
commands = [
{
'target': 'title',
'action': 'replace',
'content': page['title']
},
{
'target': '#markdown-file',
'action': 'replace',
'content': MARKDOWN_FILE_OBJECT_HTML
}
]
content = '<div data-id="content">{0}</div>'.format(
OneNoteHtmlMapper(new_document).get_html()) # OneNoteHtmlMapper is not implemented, it simply calls new_document.outer_html()
if content_div:
commands.append({
'target': content_div.attr('id'),
'action': 'replace',
'content': content
})
else:
commands.append({
'target': 'body',
'action': 'append',
'content': content
})
files = {
'Commands': ('', io.StringIO(json.dumps(commands)),
'application/json'),
'markdown': ('markdown.md', io.StringIO(page['markdown']),
'text/markdown')
}
oauth_client = oauth.microsoft_graph
response = oauth_client.request(
'PATCH', 'me/onenote/pages/{0}/content'.format(id), files=files)
return response.content, response.status_code
Thanks in advance!
A temporary fix: append a 1px * 1px white image to div if it only contains tables.
I tried lot,googling even took help from laracast.com/discuss but could not solve the issue. why the session flash is not working? please drop your suggestion. Here is my code of all_controll.php
<?php
namespace App\Http\Controllers;
use DB;
use App\Quotation;
use App\Model\students;
use Illuminate\Http\Request;
//use Auth;
use Illuminate\Support\Facades\Auth;
use App\Http\Requests;
use App\Http\Controllers\Session;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\Input;
use Illuminate\Support\Facades\Redirect;
class all_control extends Controller
{
public function index()
{
return view('index');
}
public function insert_students(Request $request)
{
$std = new students();
$std->name = $request->input('name');
$std->email = $request->input('email');
$std->save();
return redirect('/index');
}
public function getform()
{
return view('form');
}
public function postform()
{
$roll = Input::get('roll');
$ct_number = Input::get('ct');
DB::table('test')->insert(array(
'name' => $roll,
'age' => $ct_number
));
Flash :: Session ("key",
"You have done successfully!!!!");
//Session::flash('message','You have done successfully!!!!');
return Redirect::route('getform');
//return redirect('/index');
}
}
and my form.blade.php code is given below
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
<meta charset="UTF-8">
<meta name=description content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<div class="container">
<h1>Form</h1>
<h3>
<?php
if(Session::has('key')){
echo Session::get('key');
}
?>
</h3>
<form action="{{ URL::route('postform') }}" method="post" role="form">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<legend>Form Title</legend>
<div class="form-group">
<label for="">name</label>
<input type="text" class="form-control" name="roll" id="roll" placeholder="Input...">
</div>
<div class="form-group">
<label for="">Marks of Physisc CT</label>
<input type="number" class="form-control" name="ct" id="ct" placeholder="Input...">
</div>
<button type="submit" class="btn btn-primary">Hit the Button</button>
</form>
</div>
</body>
</html>
You can use the built in redirect() helper which will flash the data to the session by using ->with().
public function postform(Request $request)
{
$roll = $request->roll;
$ct_number = $request->ct;
DB::table('test')->insert([
'name' => $roll,
'age' => $ct_number
]);
return redirect('index')->with('key', 'You have done successfully');
}
SIDENOTE:
Inject Request into your method and use it instead of Input. Input was used in laravel 4 while injecting the Request class is the recommended way in laravel 5.1
I have also faced same issue with you.
My solution is to include use Flash; on top of the controller that you wanted to use the Laracasts Flash plugin.
Hope this helps.
return redirect()->route('posts.index')->with('success_msg', 'Post deleted successfully');
Here Success_msg is used to display msg on redirected page.
I've used the solution here http://jsfiddle.net/KADqA/23/ to add an image to a jquery mobile checkbox, and it works fine, but now the label text is out of alignment with the checkbox images (too high) and I can't figure out how to center it with css.
Here's a portion of the code to generate the html
<input type=checkbox id=chk" + ingindex + " class='chk chk" + ingindex + "' name=chk" + ingindex + "><label for=chk" + ingindex + ">" + item + "<a href='#' data-rel='dialog' ><img class=recimg src='http://webrecipemanager.com/images/recipe/" + image + "' alt='" + name + "'></a></label>
This is the generated html from firebug
<div id="div0" class="drag inaisle ui-draggable" name="div0">draggable=Object {
element={...}, options={...}, started=
false
, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}
<div class="ui-checkbox">
<input id="chk0" class="chk chk0" type="checkbox" name="chk0">checkboxradio=Object { element={...}, options={...}, label={...}, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmousedown=
true
, vclick=
true
}
<label class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-btn-up-i" for="chk0" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="i">corners=
true
shadow=
false
iconshadow=
true
wrapperEls=
"span"
icon=
"checkbox-off"
theme=
"i"
buttonElements=Object { bcls=
"ui-btn ui-btn-up-i ui-b...er-all ui-btn-icon-left"
, outer=label.ui-btn, inner=span.ui-btn-inner, more...}jQuery16405345229560181788=Object { events={...}, handle=function()}virtualMouseBindings=Object { vmouseover=
true
, vclick=
true
}
</div>
<input id="item0" type="hidden" value="1/2 c Baking Cocoa" name="item0">
<input id="ing0" type="hidden" value="Baking Cocoa" name="ing0">
</div>
you can use Firebug or another developer tool to examine the CSS to manipulate...
see the docu
Overriding themes
The themes are meant as a solid starting point, but are meant to be
customized. Since everything is controlled by CSS, it's easy to use a
web inspector tool to identify the style properties you want to
modify. The set of of theme classes (global) and semantic structural
classes (widget-specific) added to elements provide a rich set of
possible selectors against which to target style overrides. We
recommend adding an external stylesheet to the head, placed after the
structure and theme stylesheet references, that contain all your style
overrides. This allows you to easily update to newer versions of the
library because overrides are kept separate from the library code.
In your case add the following
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
see modified jsfiddle and the complete code of the working example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.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>
<style>
.ui-mobile a img, .ui-mobile fieldset {
vertical-align: middle;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<input type="checkbox" class="cbox" name="OptIn" id="OptIn"/>
<label for="OptIn">Receive E-mails From Us</label>
<input type="checkbox" value="1" class="cbox" name="tandc" id="tandc"/>
<label for="tandc">I agree to the <a href="#tc" data-rel="dialog" ><img src="http://dummyimages.com/25x25" /></a></label>
</fieldset>
</div>
</div>
<div data-role="page" id="tc">
<div data-role="header">
<h1>T and C</h1>
</div>
Read me
</div>
<script>
$('.ui-btn-text').click(function(event) {
var checked = $("#tandc[type='checkbox']").is(":checked");
var $this = $(this);
if($this.children('a').length) {
$.mobile.changePage('#tc', {
transition : 'pop',
role : 'dialog'
});
}
stateOfCheckbox(checked);
});
function stateOfCheckbox(checked) {
$('#home').live( 'pagebeforeshow',function(event){
$("#tandc[type='checkbox']").attr("checked",checked).checkboxradio("refresh");
});
}
</script>
</body>
</html>
screenshot:
I have option of photo upload in my create.gsp page. I'm able to see the uploaded photo in my create page and able to upload my photo in database, but cannot see that photo in my show page.
This is create.gsp page
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="billing-without-grid" />
<g:set var="entityName"
value="${message(code: 'skeletonBill.label', default: 'SkeletonBill')}" />
<title><g:message code="default.create.label"
args="[entityName]" /></title>
<script>
function showPhoto(imageFile) {
var fileReader = new FileReader();
var image = document.getElementById("uploadPhotoFile");
fileReader.onload = function(e) {
image.src = e.target.result;
}
fileReader.readAsDataURL(imageFile.files[0]);
}
</script>
</head>
<body>
<div class="body">
<div class="container-fluid">
<div class="row">
<div class="span6">
<img src="" name="uploadPhotoFile" id="uploadPhotoFile"
height="200" width="160" />
<table style="width: 25%">
<tbody>
<tr class="prop">
<td valign="top" class="name"><label for="uploadPhoto"><g:message code="uploadInformation.uploadPhoto.label" default="Upload Photo" /></label></td>
<td valign="top" class="value ${hasErrors(bean: uploadInformationInstance, field: 'uploadPhoto', 'errors')}">
<input type="file" id="uploadPhoto" name="uploadPhoto" onchange="showPhoto(this)" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html> '
Domain class that I created
class UploadInformation {
static constraints = {
uploadPhoto(nullable:true, maxSize: 16384 /* 16K */)
}
byte[] uploadPhoto
static transients = ["uploadPhoto"]
static mapping = {
uploadPhoto column:"uploadPhoto",sqlType: "blob"
}
}
Anuj.
The problem I see after quick look at your code is:
static transients = ["uploadPhoto"]
UploadPhoto will not be saved to database because it's declarated as transient.
See more details transient properties