I am following this site to create autocomplete textbox but the dropdown is not appearing below the texbox instead apearing on top-left of the browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui/jquery-ui.min.css">
<script src="jquery-ui/jquery-ui.min.js"></script>
<script>
$(function() {
$("#skill_input").autocomplete({
source: "search.php",
});
});
</script>
</head>
<body>
<label>Your skills:</label>
<input type="text" id="skill_input" placeholder="Start Typin"/><br>
</body>
</html>
I think you need to add like the example with these scripts and css.
Looks like you are using different.
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery UI library -->
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
Related
I want to make a button that gives a reminder (message) when pressed, but the button did not work.
the button's code is in the master page
(i wrote the remaining two pages in the comments because when I wrote in the post it gave an error)
here is my master.blade.php;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Comm Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
</body>
<script>
$(document).ready(function())
{
$("button").click(function())
{
alert("button works correctly")
}
}
</script>
</html>
Add the following in your master.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>E-Comm Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
#yield('content')
</body>
<script>
$(document).ready(function(){
$(document).on('click', 'button', function(event){
alert("button works correctly");
});
});
</script>
</html>
And the following in your login.blade.php
#extends('master')
#section('content')
<h1>Hello,world</h1>
<button class="btn btn-primary">Click</button>
#endsection
I think you need to add a reference to your content section in the master.blade.php. Something like below!
<body>
#yield('content')
</body>
And login.blade.php would be as below.
#section('content') <h1>Hello,world</h1> <button class="btn btn-primary">Click</button> #endsection
PS:https://laravel.com/docs/5.0/templates
Where is your #yeild() method on the main page. As the above comment mentioned.
We need more information about the issue.
I don't see any button element in the shared snippet.
having a few issues at the moment regarding updating the content of a div using ajax and php. I am trying to echo the price in the php script into to the div and it is not happening....maybe I'm missing something. This is a modified and simplified example of my problem.
HTML CODE:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval('autoRefresh_div()', 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
PHP CODE:
<?php
echo "2.22";
?>
Put the function in without the ', or change it to:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function autoRefresh_div(){
$("#tester").load("getPriceTest.php");
}
setInterval(function(){
autoRefresh_div()
}, 1000);
</script>
<body>
<div id="tester">3.33</div>
</body>
</html>
When I use pgp require it moves the head content on the included file into the body tags, I've explored questions somewhat related to my problem but none have solved my problem.
index.php:
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<?php
require '/home/sethfreeman/public_html/subdomains/gwd/navigation/header/header.html';
?>
Included File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
</head>
<body>
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
Chrome Output:
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/css/header.css" type="text/css">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap.css" media="screen">
<link rel="stylesheet" href="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/css/bootstrap-responsive.css" media="screen">
<div class="container"></div>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/js/jquery-3.1.1.js"></script>
<script src="http://sethjfreeman.com/subdomains/gwd/assets/libs/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
"Require isn't smart. It's simply going to dump the contents of the required file where it's invoked. If you want some code in the head portion, put that in a separate file and require it in the correct place." - Major Productions LLC
To close this question.
I am using PHP (DOMDocument and DOMXPath classes to be more precise) to modify the content of an HTML file (for the moment I just change the title in the head tag and the first element of the body which is an h1).
The functionality is there meaning that I am able to modify what I desire into the document but the output is not keeping the indentation of the original file.
What solutions I found online are referring to XML, having to no effect when it comes to HTML.
My question is how can I keep my original indentation after using DOMXPath? It is even possible using this alone or I should consider some 3rd party library?
My PHP code snippet:
<?php
$dom = new DOMDocument;
$dom->loadHTMLFile($dst . '/index.html');
$xpath = new DOMXPath($dom);
$title_tag = $xpath->query('/html/head/title')->item(0);
$title_tag->nodeValue = $_POST['website-title'];
$body_tag = $xpath->query('/html/body/h1')->item(0);
$body_tag->nodeValue = $_POST['website-title'];
$dom->saveHTMLFile($dst . '/index.html');
?>
Original HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello world!</h1>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
Output HTML :
<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Test Website</title><link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css"><link rel="icon" type="image/x-icon" href="favicon.ico"><!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]--></head><body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script></body></html>
EDIT: After using $dom->formatOutput = true; (thank you PeeHaa for this) before saving the HTML file, the output is the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test Website</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.min.js"></script>
<script type="text/javascript" src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Test Website</h1>
<script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
I have an array I want to select and display data from it depending to criteria in the sidebar.
I would like the show this data in a section in the body, and a change will be made only for this section when I select a criteria on the sidebar.
For the moment my solution is to create a page for each criteria and connect it with link to the criteria in the sidebar.
Normally there is a solution to show it dynamically
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
</head>
<body>
<?php
require_once ".\Classes\PHPExcel\IOFactory.php";
$objPHPExcel = PHPExcel_IOFactory::load("zfg01_CAT.xlsx");
$sheet = $objPHPExcel->getSheet(0);
include 'fonctionsUtiles.php';
afficherLesArticlesParGendre($sheet, "GARCON");
?>
</body>
</html>