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.
Related
I have designed a page using bootstrap 4. But it is not appearing according to my design. Below the code of CSS and JS files that I used. Also shared the excepted appearance and wrong appearance.
<!-- Link CSS // -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<!-- Link JS -->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>-->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.21.0/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<!--<script src="../js/jquery-3.3.1.js"></script>-->
<script src="../js/bootstrap-datetimepicker.js"></script>
<!--<script src="../js/bootstrap-multiselect.js"></script>-->
<script src="../js/bootstrap.js"></script>
<script src="../js/bootstrap-select.js"></script>
<script src="../js/ajax.js"></script>
<!-- multiselect based on dropbox -->
<script src="https://www.gstatic.com/charts/loader.js"></script>
<!-- Graph Chart -->
<script src="https://www.jqueryscript.net/demo/Creating-A-Live-Editable-Table-with-jQuery-Tabledit/jquery.tabledit.js"></script>
Below the excepted Appearance
enter image description here
the Wrong appearance
enter image description here
Probably it's because the order of the CSS elements.
The latest you reference on the HTML document is the one who has more priority.
Try to first load the bootstrap base CSS and then the others:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="../css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.css">
<link href="../css/bootstrap-select.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="../css/bootstrap-multiselect.css"/>
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 am new in jtable, I am retrieving "name","sex" field from mysql database. How to display records using jquery jtable. Please be specific.
<?php
<link href="jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css" />
<link href="jtable.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jquery.jtable.js" type="text/javascript"></script>
$sql="select name,sex from user";
$result=mysqli_query($db,$sql);
?>
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 getting an error ReferenceError: jQuery is not defined in jquery-ui-1.8.17. I tried to change code to jquery-ui-1.8.16 but that is also not working.
My template view is as follows:
<head>
<LINK REL="SHORTCUT ICON" HREF="<?php echo base_url('theme'); ?>/images/icon.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php echo $title;?></title>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('theme/css');?>/style.css" />
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery.js"></script>
</head>
can any one help me ??
you need to include jQuery base library first, and then you can include custom.
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
May be this link http://forum.jquery.com/topic/and-jquery-not-defined-problems
can help you out. maintaining the order can resolve your problem.
Change the order of your include scripts:
<script type="text/javascript" src="<?php echo base_url('theme/js');?>/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>theme/js/jquery-ui-1.8.17.custom.min.js"></script>
include jQuery before adding jQuery-ui