JavaScript not gathering post information in added .php file - javascript

I'm working on my first page for my exam and i must use the undersceleton theme.
I have created a custom .php file but the code won't work, the javascript doesn't seem to pick up the post information from WP. If i use the same code on the index.php it works just fine.
According to what information i managed to gather i must call in the added .php for the header and footer, which i did and it still doesn't work. The header with the nav bar and footer are loading perfectly but the posts won't.
I also tried to copy the content from the page.php or content.php nothing seems to work.
Any ideas?
<!DOCTYPE html>
<?php /* Template Name: ekszerek */ ?>
<?php get_header(); ?>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link href="https://fonts.googleapis.com/css?family=Domine:400,700|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<div class"container">
<div class="row">
<div class="col-sm-4 col-md-4 grid_ss">
<?php /* Variable for row creation */
$startRow = true;
$postCounter = 0; ?>
<?php /* Loop start*/ if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php if ($startRow) {
echo '<!-- START OF INTERNAL ROW --><div class="row">';
$startRow = false; } ?>
<?php $postCounter += 1; ?>
<div class="col-sm-4">
<div class="paper">
<div class="poster" >
<?php if ( has_post_thumbnail() ) : ?>
<a class="img_thumb" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
<?php the_post_thumbnail( 380, 288 ); ?>
</a>
<?php endif; ?>
</div>
<div class="posted_on">
<?php underskeleton_posted_on(); ?>
</div>
<h1 class="paper_h1">
<?php if ( is_single() ) { the_title( '<h1 class="entry-title">', '</h1>' );
} else {
the_title( '<h2 class="entry-title">', '</h2>' );
} if ( 'post' === get_post_type() ) : ?>
<?php endif; ?>
</h1>
<hr/> <!-- Text separator -->
<div class="paper_p">
<?php echo get_excerpt(); ?>
</div>
<a class="btn" href=(<?php the_permalink(); ?>)>Megnyit</a>
<div class="space"></div>
<h2 class="paper_h2">
<!-- .entry-meta -->
</h2>
</div>
</div>
<?php /* Check if counter hits 3, if yes start new row */
if ( 3 === $postCounter ) {
echo '</div><!-- end of row -->';
$startRow = true;
$postCounter = 0; } ?>
<?php /* End of the loop */ endwhile; ?>
<?php /* If you are returning an odd number of posts (i.e., anything other than a multiple of 3), we will need to close the row div.*/
if ($postCounter !== 0 ) { echo '</div><!-- end of row -->'; } ?>
<?php else: ?>
<div class="page-header"><h1>Uh Oh!</h1></div>
<p>Sorry, for some reason the contents of this page isn't displaying.</p>
<?php endif; ?>
</div>
</div>
<?php
get_footer();

Related

How can I set PHP cookie with JavaScript in CodeIgniter

I want to set a PHP cookie through a button click event of JavaScript how can I achieve this. Is there any big minds can help me.
<script>
function openC(){
<?php setcookie('z', 'on', time() + (86000), "/" ); ?>
oopen();
}
</script>
<div class="row">
<div class="col-12 p-rel">
<button type="button" onclick="openC()" id="opner" class="btn hide btn-dark "><i
class="fa fa-bars"></i></button>
</div>
</div>
above is my code if I try to echo my cookie in another page like my header page I get nothing
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Favicon-->
<link rel="icon" href="<?= base_url() ?>assets/new_assets/images/favicon.png" type="image/gif" sizes="16x16">
<link href="<?= base_url() ?>assets/new_assets/css/style.css" rel="stylesheet" type="text/css"/>
<!--Site Title-->
<title><?php echo!empty($title) ? $title : ""; ?></title>
<p> <?php echo $_COOKIE["z"]; ?></p>
</head>
<script type="text/javascript">
var url = "<?php echo base_url(); ?>";
</script>

Error: summernote is not a function when using local files

I am having a really odd problem. When I used my local summernote files to load the text editor, ".summernote is not a function" happened. However, if I used the cdn files to load the editor, everything went fine. Here is my HTML header code:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8"/>
<title><?php echo $title; ?></title>
<base href="<?php echo $base; ?>"/>
<?php if ($description) { ?>
<meta name="description" content="<?php echo $description; ?>"/>
<?php } ?>
<?php if ($keywords) { ?>
<meta name="keywords" content="<?php echo $keywords; ?>"/>
<?php } ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
<link href="favicon.ico" rel="icon">
<!-- include jquery -->
<script type="text/javascript" src="javascript/jquery/jquery-2.1.1.min.js"></script>
<!-- include libraries BS3 -->
<script type="text/javascript" src="javascript/bootstrap/js/bootstrap.min.js"></script>
<link href="stylesheet/bootstrap.css" type="text/css" rel="stylesheet"/>
<!-- include font-awesome-->
<link href="javascript/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet"/>
<!-- include datetimepicker-->
<script src="javascript/jquery/datetimepicker/moment.js" type="text/javascript"></script>
<script src="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.js" type="text/javascript"></script>
<link href="javascript/jquery/datetimepicker/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" media="screen"/>
<!-- include customer stylesheet-->
<link type="text/css" href="stylesheet/stylesheet.css" rel="stylesheet" media="screen"/>
<!--include customer js-->
<script src="javascript/common.js" type="text/javascript"></script>
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script href="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<!-- <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">-->
<!-- <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>-->
I tried to load the local files directly instead of echo them by PHP, but the problem is still there.
I checked every href, there is no dead link.
Then I created a pure HTML called test.html file underneath the javascript folder, and the text editor loaded fine by using local files.
By the way the framework I'm using is CI, and the file structure is:
root
├──javascript
├──bootstrap
├──jquery
├──summernote
├──font-awesome
├──test.html
I don't think you're including your scripts in the right order.
When you loaded from the CDN, your order looked something like this:
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<script src="javascript/common.js" type="text/javascript"></script>
. . . which is logical, because you want to be sure that summernote is loaded by the time your main JS code executes.
However, your PHP dependency management code was injecting the tags linking to local files after that same script. Basically, dump all of that logic before your customer's script too:
<?php if ($styles) { ;?>
<?php foreach ($styles as $style) { ;?>
<link href="<?php echo $style;?>" rel="stylesheet"></link>
<?php } ;?>
<?php } ;?>
<?php if ($scripts) { ;?>
<?php foreach ($scripts as $script) { ;?>
<script src="<?php echo $script;?>" type="text/javascript"></script>
<?php } ;?>
<?php } ;?>
<script src="javascript/common.js" type="text/javascript"></script>
(Also note that in your PHP you wrote href instead of src for your script tag generation.)
For me, I wanted to use summer note with bootstrap4, I copied the below code from the official documentation but it didn't work, I realized afterwards that I was embedding a newer bootstrap version at the beginning of my page (I was reaching out to some bootstrap files located at the assets), I removed that line and everything went just fine:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote#0.8.18/dist/summernote-bs4.min.js"></script>

On button click the button do different task(HTML)

Now in my page i setup a dynamic grid boxes are there and in each boxes a button is there.. my motive is onclick o the button every button perform a different task but in my code every button perform the similar task.
and the second thing is that how can i generate the dynamic id of buttons
now here my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Digital Menu</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css">
<title>Page Title</title>
</head>
<body>
<div class="banner">
<div class="header">
<div class="header-inner container clear">
<a class="logo" href="#"><span class="sr">Lambda Logo</span></a>
<div class="navigation">
<ul class="navigation-menu">
<li class="navigation-item">New Orders
</li>
<li class="navigation-item">Open Orders
</li>
<li class="navigation-item"><a href="#complete_orders">Complete
Orders</a></li>
</ul>
</div>
<ul>
<h1>open orders</h1>
</ul>
</div>
</div>
<?php
include("connect.php");
$query="SELECT * FROM `orders`";
$filter_Result=mysqli_query($con,$query);
while($row = mysqli_fetch_array($filter_Result)){
echo "<div class='block'>";
echo "<div class='boxed'>";
echo "<div id='container'>";
echo "<td>" . $row['id'] . "</td>" ."<br>";
echo "<td>" . $row['status'] . "</td>"."<br>";
echo "<td>" . $row['created_date'] . "</td>"."<br>";
echo "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
echo "<button class='button' style='vertical-align:middle' id='demo'
onclick='myFunction()'><span>click Me</span>";
echo "</button>";
echo "</div>";
echo "</div>";
echo "</div>";
}
?>
<script type="text/javascript">
function myFunction() {
document.getElementById('demo').innerHTML = 'Hello World';
}
</script>
</div>
</body>
</html>
You should pass unique value with your ID and function parameter. Refer this code. This will set unique ID for each button and carries that unique id as parameter in the function. So the function will display the message 'Hello World' with the ID.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Digital Menu</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style1.css">
<title>Page Title</title>
</head>
<body>
<div class="banner">
<div class="header">
<div class="header-inner container clear">
<a class="logo" href="#"><span class="sr">Lambda Logo</span></a>
<div class="navigation">
<ul class="navigation-menu">
<li class="navigation-item">New Orders</li>
<li class="navigation-item">Open Orders</li>
<li class="navigation-item">Complete Orders</li>
</ul>
</div>
<ul><h1>open orders</h1></ul>
</div>
</div>
<?php
include("connect.php");
$query="SELECT * FROM `orders`";
$filter_Result=mysqli_query($con,$query);
$div = '';
while($row = mysqli_fetch_array($filter_Result)){
$div .= "<div class='block'><div class='boxed'><div id='container'>";
$div .= "<td>" . $row['id'] . "</td>" ."<br>";
$div .= "<td>" . $row['status'] . "</td>"."<br>";
$div .= "<td>" . $row['created_date'] . "</td>"."<br>";
$div .= "<td>" . $row['uid'] . "</td>"."<br>"."<br>"."<br>"."<br>";
$div .= "<button class='button' style='vertical-align:middle' id='demo" . $row['id'] . "' onclick='myFunction(\"" . $row['id'] . "\")'><span>click Me</span>";
$div .= "</button></div></div></div>";
}
echo $div;
?>
<script type="text/javascript">
function myFunction(id) {
document.getElementById('demo').innerHTML = 'Hello World' + id;
}
</script>
</div>
</body>
</html>
Now, if you want to perform different action for each button, then you can write the corresponding action using if or switch condition in the function.
For eg :
function myFunction(id) {
if( id == 1 ) {
document.getElementById('demo').innerHTML = 'First Button clicked';
} else if( id == 1 ) {
document.getElementById('demo').innerHTML = 'Second Button clicked';
}
}

ajax request not taking place when form is submitted

I'm trying to use Ajax for a form but it seems not to be working. I'm not sure if it's because the file is php but being shown as a javascript file, or something along those lines but I would like to get this fixed. Thanks in advance.
login/index.php
<!doctype html>
<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">
<title><?php echo SERVER_NAME; ?> | <?php echo $this->title ?></title>
<link rel="stylesheet" media="screen" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="<?php echo URL; ?>/public/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="<?php echo URL; ?>/public/css/css.login.php" />
<script type="text/javascript" src="<?php echo URL; ?>/public/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php echo URL; ?>/public/js/bootstrap.min.js"></script>
</head>
<body>
<div id="login" class="container">
<div class="module">
<div class="module-header">
<h4>Login</h4>
</div>
<div class="module-body module-padding">
<form class="form" method="post" action="<?php echo URL;?>/actions/login.php">
<input type="text" name="login-username" placeholder="Username">
<br />
<input type="password" name="login-password" placeholder="Password">
<br />
<input type="submit" name="submit" placeholder="Login" class="pull-right">
</form>
</div>
</div>
<div class="msg">
</div>
</div>
<script type="text/javascript" src="<?php echo URL; ?>/public/js/user-login.php"></script>
</body>
</html>
user-login.php (acts as js)
<?php
header('Content-Type: application/javascript');
require "../../Application/Configuration/config.php";
?>
$(window).load(function() {
$('.form').submit(function(event) {
var formData = {
'login-username': $('input[name=login-username]').val(),
'login-password': $('input[name=login-password]').val()
};
$.ajax({
type: "POST",
url: "<?php echo URL; ?>/actions/login.php",
data: formData,
success: function (json_data) {
var data_array = $.parseJSON(json_data);
if (data_array['error'] == false) {
$('.msg').css('display', 'block');
$('.msg').addClass('msg-success');
$('.msg p').html(data_array['text']);
$('.msg').fadeOut(4000);
var delay = 4000;
setTimeout(function() {
window.location.replace("../index.php");
}, delay);
} else {
$('.msg').css('display', 'block');
$('.msg').addClass('msg-failure');
$('.msg p').html(data_array['text']);
$('.msg').fadeOut(4000);
}
},
fail: function () {
alert("failed to send");
}
});
});
});

Custom JavaScript not working in Joomla 3 template

i have problem with including javascript in joomla 3 template code. I am trying to create slider menu with http://9bitstudios.github.io/flexisel/. Outside of joomla with only html and java code, menu works great. But when i try to implement into joomla template i cant get it working.
My template code:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/reset.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/style.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template; ?>/css/flexisel.css" type="text/css" />
<?php
JHtml::_('jquery.framework');
?>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/jquery.flexisel.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$("#flexiselDemo1").flexisel();
});
</script>
</head>
<body>
<div id="page">
<div id="head">
VOSSP
</div>
<div id="main-menu">
<jdoc:include type="modules" name="main-menu" />
</div>
<div id="footer">
</div>
</div>
</body>
</html>
I tryed using of $document->addScriptDeclaration and $document->addScript, from http://docs.joomla.org/Adding_JavaScript, but no change.
You are importing jQuery in noConflict mode, so try changing this:
$(window).load(function() {
$("#flexiselDemo1").flexisel();
});
to this:
jQuery(document).ready(function($) {
$("#flexiselDemo1").flexisel();
});
Note: go back to using JHtml::_('jquery.framework');

Categories