I'm looking to add hyperlinks to the table I have. I'm using DataTables Editor and at this point I'm just adding tags in order to add the links to the url's. This requires me to parse through thousands of URL's and add the url tags. Any way for me to apply this to particular attributes in the table?
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.tableTools.css">
<link rel="stylesheet" type="text/css" href="css/dataTables.editor.css">
<link rel="stylesheet" type="text/css" href- "//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css">
<script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.tableTools.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="js/table.Brown_AP.js"></script>
<script type="text/javascript" language="javascript" charset="utf-8" src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<!--FancyBox-->
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
<script>
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 1600,
maxHeight : 1200,
fitToView : true,
width : '100%',
height : '100%',
autoSize : true,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
<script>
jQuery(document).ready(function () {
$('a.modalGeneric').fancybox({
type: 'iframe',
fitToView: true,
autoSize: true,
openEffect: 'fade',
openSpeed: 'slow'
});
});
</script>
</head>
<body>
<div class="container-fluid">
<h1>
<center>
AP
</center>
</h1>
<table cellspacing="0" class="display responsive nowrap" id="Brown_AP" width="100%">
<thead>
<tr>
<th>Building</th>
<th>Floor</th>
<th>Number of AP</th>
<th>Associated Floor Plans</th>
<th>AP</th>
<th>Status</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Above is the HTML the following is the PHP. How would I go about adding hyperlinks into the attributes pulled from the MYSQL.
<?php
/*
* Editor server script for DB table AP
* Automatically generated by http://editor.datatables.net/generator
*/
// DataTables PHP library
include( "lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Join,
DataTables\Editor\Validate;
// Build our Edit instance and process the data coming from _POST
Editor::inst( $db, 'APS', 'Assoicated_Floor_Plans' )
->fields(
Field::inst( 'Building' ),
Field::inst( 'Floor' ),
Field::inst( 'Number_Of_AP' ),
Field::inst( 'Associated_Floor_Plans' ),
Field::inst( 'AP' ),
Field::inst( 'Status' )
)
->process( $_POST )
->json();
Related
Please help, ajax is not working..
I tried the tutorial from here,
Ajax box PHP
it works well, but when the code is installed in a different page, I just don't want to work.
here is codes
<!DOCTYPE html>
<html lang="en">
<head>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
<link rel="stylesheet" type="text/css" href="asset/css/bootstrap.min.css">
<script src="typeahead.min.js"></script>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/font- awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/simple-line-icons.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/animate.min.css"/>
<link rel="stylesheet" type="text/css" href="asset/css/plugins/fullcalendar.min.css"/>
<link rel="stylesheet" href="asset/datepicker/datepicker3.css">
<link rel="stylesheet" type="text/css" href="asset/css/plugins/datatables.bootstrap.min.css"/>
<link href="asset/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="asset/select2/select2.min.css">
<!-- end: Css -->
<script type="text/javascript" src="asset/js/jquery.min.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<link rel="shortcut icon" href="asset/img/logomi.png">
</head>
<body>
<div id="content">
<div class="bs-example">
<input type="text" name="typeahead" class="typeahead tt-query" autocomplete="off" spellcheck="false" placeholder="Type your Query">
</div>
</div>
</div>
please help... thanks..
Please try by including the js and other bootstrap files first. And then try to execute the jquery and ajax code.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="typeahead.min.js"></script>
<script>
$(document).ready(function(){
$('input.typeahead').typeahead({
name: 'typeahead',
remote:'search.php?key=%QUERY',
limit : 10
});
});
</script>
Now it will works. Also make sure that all the js related files are included properly. While running the page in browser, type f12 and check the ajax call is generated or not.Hope it works.
I installed the plugin layeredpopups. But it does not work for me
I’ve tested the plugin on other sites, but it does not work on my site!
My site: artawp.com
Is js,jquery a problem?
Now I have the following js
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
tag head :
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<title><?php wp_title(''); ?></title>
<!-- Bootstrap CSS -->
<?php wp_head(); ?>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Before closing body
This code is located in the footer
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" crossorigin="anonymous"></script>
<script>
</body>
Ok, I've searched google and all over this site and am not finding the solution.
I have a php file with a button. I have all the included bootstrap/jquery-ui css files at the top and the corresponding .js files at the bottom. I also have a custom .js file that has ONE function which defines a custom dialog box. When I try to call it from the php file I get:
ReferenceError: $myDialog is not defined.
The included js file is called dialog.js and IS in the js folder.
Here are the php and js files:
$(function() {
/**
* $myDialog Custom Dialog Function
*
* Example Usage:
* var theTitle = "CUSTOM TITLE GOES HERE!";
* var msg = 'Your message goes here...';
* $myDialog.dialog("option", "title", theTitle);
* $myDialog.html(msg + '</div>');
* $myDialog.dialog('open');
*
* Filename: dialog.js
**/
var $myDialog = $('<div id="dialog-message">')
.dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'center'],
width: 400,
dialogClass: 'dialog-message ui-dialog-osx',
title: "Important Message!",
autoOpen: false,
show: 'fade',
hide: 'fade',
buttons: [
{
text: "Ok",
click: function() {
$( this ).dialog( "close" );
}
}
],
});
});
<?php
?>
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
<head>
<title>Rental Application</title>
<!-- CSS Styles -->
<link rel="stylesheet" type="text/css" href="css/html5reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" media="all">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" media="all">
<link rel="stylesheet" type="text/css" href="css/drwebguy.css" media="all" />
</head>
<body>
<div id="home" class="container-fluid main_content">
<div class="row">
<div class="col-md-4"><a id="btnMyDialog" class="btn btn-primary" role="button">myDialog</a></div>
<div class="col-md-4">
<p>This is just some text...</p>
</div>
<div class="col-md-4"></div>
</div><!-- row -->
</div><!-- class="container-fluid" -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.mask.min.js"></script>
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/js.cookie.js"></script>
<script type="text/javascript" src="js/dialog.js"></script>
<!--<script type="text/javascript" src="js/drwebguy.js">--></script>
<script type="text/javascript">
$(function() {
$('#btnMyDialog').on('click', function(){
var theTitle = "CUSTOM TITLE GOES HERE!";
var msg = 'Your message goes here...';
$myDialog.dialog("option", "title", theTitle);
$myDialog.html(msg + '</div>');
$myDialog.dialog('open');
});
});
</script>
</body>
</html>
And, obviously, if I put that var function at the bottom of my file instead of including an external js file it works fine...but, also obviously, that defeats the purpose of oop :/
use all script like this :
(function($) {
$(document).ready(function(){
// .. script what you want
});
})(jQuery);
Test.js:
$(document).ready(function() {
$.post('MYLogic.php', null, function(response) {
});
});
Can any one tell me which jQuery or version of JQuery should I include on my JSP page to call PHP class using $.post
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<link type="text/css" href="css/common.css" rel="stylesheet" />
<link type="text/css" href="css/screen.css" rel="stylesheet" />
<link type="text/css" href="css/menu.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="scripts/test.js"></script>
<title>Mobilezone Afghanistan</title>
</head>
Try this
Remove null
$(document).ready(function() {
$.post('MYLogic.php', function(response) {
});
});
I am very inexperienced with PHP and I've having trouble calling a mootools function.
Here's my code:
echo '<script language="JavaScript">';
echo "Sexy.error('Test!');";
echo '</script>';
When viewing source code looks like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Bath Solutions</title>
<link xmlns="" href="html_includes/css/main.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<link xmlns="" href="html_includes/mootools/Autocompleter.css?version=10.03.05" rel="stylesheet" type="text/css" media="screen" />
<link xmlns="" href="html_includes/css/print.css?version=10.03.05" rel="stylesheet" type="text/css" media="print" /><link xmlns="" href="html_includes/css/schedule.css?version=10.03.05" rel="stylesheet" type="text/css" media="all" />
<script language="javascript" type="text/javascript" src="html_includes/mootools.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/main.js.php?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/datepicker.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Observer.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.js?version=10.03.05"></script>
<script language="javascript" type="text/javascript" src="html_includes/mootools/Autocompleter.Request.js?version=10.03.05"></script>
<script type="text/javascript" src="html_includes/mootools/sexyalert/sexyalertbox.v1.2.moo.js?version=10.03.05"></script>
<link rel="stylesheet" type="text/css" media="all" href="html_includes/mootools/sexyalert/sexyalertbox.css?version=10.03.05"/>
<script type="text/javascript" src="html_includes/fckeditor/fckeditor.js?version=10.03.05"></script>
</head>
<body>
<script language="JavaScript">Sexy.error('Test!');</script>
...
When I try it with a simple alert('test') it works just fine.. I'm confused?!?
UPDATE: I tried a calling the Sexy.error() onClick in an anchor tag and it works fine:
click to test
wrap the call into a domready
<script type="text/javascript">
window.addEvent("domready", function() {
Sexy.error('test');
});
</script>
if the class depends on any part of the dom, like <div id='sexy'></div> being 'there', it won't work as is--at the time of running of the script block, the target div won't be available for DOM manipulations yet.
You haven't specified your version of mootools, but according to this there is not error method. Try changing your code to:
echo '<script language="JavaScript">';
echo "Sexy.alert('Test!');";
echo '</script>';
instead.
and remember to add this to your html too:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.1/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="sexyalertbox.v1.2.moo.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="sexyalertbox.css"/>
You have to learn how to use FireBug - will help you greatly in such cases.