I want to include a function inside an HTML that is showed as an echo in a php file, how can I achieve that? Thanks in advance.
Function: self::showMap($item);
The echo:
<?php
echo "<html lang='en'>
<head>
<meta charset='utf-8' />
<title>jQuery UI Tabs - Default functionality</title>
<link rel='stylesheet' href='http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' />
<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<link rel='stylesheet' href=''/resources/demos/style.css' />
<script>
$(function() {
$( '#tabs' ).tabs();
});
</script>
</head>
<body>
<div id='tabs'>
<ul>
<li><a href='#tabs-1'>Tab 1</a></li>
<li><a href='#tabs-2'>Tab 2</a></li>
<li><a href='#tabs-3'>Tab 3</a></li>
</ul>
<div id='tabs-1'>
<p>FUNCTION GOES HERE</p>
</div>
<div id='tabs-2'>
<p>tab two content.</p>
</div>
<div id='tabs-3'>
<p>tab three content.</p>
</div>
</div>
</body>
</html>";
?>
$function = self::showMap($item);
"Html $function Html......";
if you are using double codes in HTML, no need to concatenate, it'll appear as value.
Related
Basically, I have a header.php file located inside my INC folder.
header.php
<!DOCTYPE html>
<html lang="EN">
<head>
<title> <?php echo $pageTitle; ?> </title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Boostrap's CDN-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<!--Custom CSS Styling-->
<link rel="stylesheet" href="CSS/custom.css" type="text/css" />
</head>
<body onload="Slider();">
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.php"> Vomica </a>
</div>
<ul class="nav navbar-nav">
<li class="<?php if($section == "home") {echo "active";} ?>"> Home </li>
<li class="<?php if($section == "buy") {echo "active";} ?>"> Buy </li>
<li class="<?php if($section == "sell") {echo "active";} ?>"> Sell </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="<?php if($section == "register") {echo "active";} ?>"> Register </li>
<li class="<?php if($section == "login") {echo "active";} ?>"> Login </li>
<li> Logout </li>
</ul>
</div>
</nav>
As you can see I have a body for my header file meaning I can't call body inside another file. So, I want a function inside JQuery as soon as the body loads in.
How would I come about solving this?
I realize that I could just put this in the header but, it's extremely inefficient to call that function to every single page that doesn't need it.
you can use jquery to load specific page
$( "#Body" ).load( "ajax/slider.html", function() {
alert( "Load was performed." );
});
where Body is id of body tag and slider is page that we want to load on body
Slider may come only into the home page, not in the other pages. So you no need to call the Slider(); function into the body tag.
Use this code after <nav> tag or where would you like to add slider
<?php if($pageTitle=="home") { ?> //$pageTitle is some identifier to is this home page ;
<script type="text/javascript">
jQuery(document).ready(function($){
Slider();
});
</script>
<?php } ?>
You can use this way. It may help you.
I have a problem with tab navigation. I am not able to display the second and third tab.
Here's the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I noticed the error is with the ?php include('xxx.php')?>. How can i fix this problem?
Thanks.
Hello to put some php code in tab panel you must insert it between Iframe
like :
<iframesrc="xxx.php"></iframe>
Ive just corrected your code, jQuery has to be loaded BEFORE bootstrap!
Greetings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Dynamic Tabs</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTab a").click(function(e){
e.preventDefault();
$(this).tab('show');
});
});
</script>
</head>
<body>
<div class="bs-example">
<ul class="nav nav-tabs" id="myTab">
<li class="active">Add Employee</li>
<li>Employee List</li>
<li>Employee Schedule</li>
</ul>
<div class="tab-content">
<div id="add" class="tab-pane active">
<?php include('addempform.php');?>
</div>
<div id="sch" class="tab-pane">
<?php include('addschform.php');?>
</div>
<div id="list" class="tab-pane">
<?php include('emplist.php');?>
</div>
</div>
</div>
</body>
</html>
I'am new to foundation framework and i trying to integrate foundation with CodeIgniter. Everything working but menu portion is not working. it seems the style is not effecting the menu. its been 2-3 days i'am working on this, please help me to solve this.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="<?php echo base_url().'public/lib/found/'; ? >
css/foundation.css" />
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
modernizr.js"> </script>
<style>
.columns
{
border:1px solid red;
}
</style>
</head>
<body>
<div class="row">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon">Menu</li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right">
<li class="active">Right Button Active</li>
<li class="has-dropdown">
Right Button Dropdown
<ul class="dropdown">
<li>First link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left">
<li>Left Nav Button</li>
</ul>
</section>
</nav>
</div>
<div class="row">
<div class="large-4 columns"><br/><br/></div>
<div class="large-8 columns"><br/><br/></div>
</div>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/vendor/
jquery.js"> </script>
<script src="<?php echo base_url().'public/lib/found/'; ?>js/
foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
I find the problem. I only added the file which i included in the html page like modernizr.js, foundation.min.js, foundation.css ..etc. But when i added entire foundation folder to my new application its works.
jquery mobile list view to load json data is not working please help me
i am created php code to ganerate json file, i am trying load that json data to my jquery mobile list view but it is not loading
crome console error is: "Uncaught ReferenceError: json is not defined "
please solve this
my jquery mobile index.html code is
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>View Source</title>
<link href="css/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery-2.0.2.min.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<link href="css/mystyles.css" rel="stylesheet" type="text/css"/>
<script src="js/myscript.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="cat">
<div data-role="header" data-position="fixed">
<h1>Categories</h1>
</div>
<div data-role="content">
<ul id="list" data-role="listview">
</ul>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#cat', function(){
var url="http://localhost:8888/coupns/index.php";
$.getJSON(url,function( data ){
//loop through deals
$.each(json.posts,function(i,dat){
$("#list").append("<li><b>ID: </b>"+dat.id+
"<b> Name: </b>"+dat.shop+
"<b> Description: </b>"+dat.dec+
"<b> Limit: </b>"+dat.cat+
"<b> Rest ID </b>"+dat.expdate+
"</li>");
});
$("#list").listview('refresh');
});
});
</script>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">Categories</a></li>
<li><a data-icon="grid" href="#bys">By Shop</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
<div data-role="page" id="bys">
<div data-role="header" data-position="fixed">
<h1>By Shop</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page Two</li>
</ul>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li><a data-icon="grid" href="#cat">Categories</a></li>
<li><a data-icon="grid" class="ui-btn-active ui-state-persist" href="#">By Shop</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
</body>
</html>
my php json encode code is
<?php
$con=mysqli_connect("localhost","root","root","coupns");
// Check connection
if (mysqli_connect_errno())
{
echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
$result = mysqli_query($con,"SELECT * FROM coupns");
$posts = array();
if(mysqli_num_rows($result)) {
while($post = mysqli_fetch_assoc($result)) {
$posts[] = array('post'=>$post);
}
}
header('Content-type: application/json');
echo json_encode(array('posts'=>$posts));
?>
my json data out put is is
{"posts":[{"post":{"id":"1","shop":"ebay.in","cat":"online shopping all ","expdate":"2013-06-30","dec":"Credit Card\t 6% Off!\tUse Coupon Code:\r\nCHDFCEBAY1"}}]}
$.each(json.posts,function(i,dat){ this should be $.each(data.posts,function(i,dat){
I'm designing this website and I need it to be .php to communicate with a database and start some countdown clocks (which aren't up yet). The page was originally .html and everything was perfect, but since I changed it to .php for some reason the footer keeps repeating itself. The code will be fine on my editor, I'll load the page, reload the file on the editor and the code somehow appears there all on its own!
Right now there is no PHP code whatsoever, I merely changed the file's extension. If you visit the same URL but the .html version, you'll see everything is fine. What could be causing this?
Thanks in advance for your help!
EDIT:
Entire HTML Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Aqua</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,900,300italic" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="css/5grid/init.js?use=mobile,desktop,1000px&mobileUI=1&mobileUI.theme=none&mobileUI.titleBarOverlaid=1&viewport_is1000px=1060"></script>
<script src="js/jquery.dropotron-1.2.js"></script>
<script src="js/init.js"></script>
<noscript>
<link rel="stylesheet" href="css/5grid/core.css" />
<link rel="stylesheet" href="css/5grid/core-desktop.css" />
<link rel="stylesheet" href="css/5grid/core-1200px.css" />
<link rel="stylesheet" href="css/5grid/core-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
</noscript>
<!--[if lte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!-- Photo gallery stuff -->
<link rel="stylesheet" href="css/slideshow/slideshow.css">
<style>
.slideshow { margin-left: 24.45%; }
</style>
<script src="js/mootools-1.3.2-core.js"></script>
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script>
<script>
window.addEvent('domready', function(){
var data = { 'pic07.jpg': {/*No captions, thumbnails or anything*/}, 'pic06.jpg': {}, 'pic10.jpg': {}, 'pic02.jpg': {}};
new Slideshow('slideshow', data, { controller: false, thumbnails: false, loader: false, height: 400, width: 600, hu: 'images/', transition: 'back:in:out'});
});
</script>
<!--End-->
</head>
<body class="homepage">
<!-- Header Wrapper -->
<div id="header-wrapper">
<div class="5grid-layout">
<div class="row">
<div class="12u">
<!-- Header -->
<section id="header">
<!-- Logo -->
<img class="logo" src="images/aqua.jpg">
<!-- Nav -->
<nav id="nav" class="mobileUI-site-nav">
<ul>
<li class="current_page_item">Home</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Banner -->
<section id="banner">
<div id="slideshow" class="slideshow"></div>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Intro -->
<section id="intro">
<div class="actions">
Get Started
Learn More
</div>
</section>
</div>
</div>
</div>
</div>
<!-- Footer Wrapper -->
<div id="footer-wrapper">
<!-- Footer -->
<section id="footer" class="5grid-layout">
<div class="row">
<div class="4u">
<section>
<header>
<h2>Links</h2>
</header>
<ul class="divided">
<li>Events/Tickets</li>
<li>Photos</li>
<li>Videos</li>
<li>Store</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</section>
</div>
<div class="4u">
<section>
<header>
<h2>Connect with us</h2>
</header>
<ul class="social">
<li class="facebook">Facebook</li>
<li class="twitter">Twitter</li>
</ul>
<ul class="contact">
<li>
<h3>Address</h3>
<p>
Aqua, LLC<br />
39 Old Ridgebury Road<br />
Danbury, CT 06810
</p>
</li>
<li>
<h3>Phone</h3>
<p>(800) 000-0000</p>
</li>
</ul>
</section>
</div>
</div>
<div class="row">
<div class="12u">
<!-- Copyright -->
<div id="copyright">
<ul class="links">
<li>© Aqua, LLC</li>
<li>Images: Dreametry Doodle + Iconify.it</li>
<li>Design: HTML5 Up! + Daytaro</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
It's repeated really awkwardly after that. It might the FTP server, I use Koding (don't ask) for this and it's connected to my server via FTP. I tried using FileZilla too (didn't delete files before re-uploading) but that didn't do anything.
Make sure you delete the file before uploading it. Some FTP clients will write over with some extra code...