JavaScript How to pass data from ajax(firebase data) to HTML - php

HTML
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h3 class="page-header"><?=$title?></h3>
</div>
<!-- /.col-lg-12 -->
<p>
<ol id="valueList">
aa
</ol>
</p>
</div>
</div>
This is my AJAX code this code doesn't show any error only the problem is doesn't show in the HTML
firebase.initializeApp(config);
database = firebase.database();
var refDeleafing = database.ref('Deleafing');
refDeleafing.on('value', gotDataDeleafing, errData);
function gotDataDeleafing(data) {
var blocks = data.val();
var keys = Object.keys(blocks);
console.log(keys);
for(var i = 0; i < keys.length; i++) {
var k = keys[i];
var deleafingBlock = blocks[k].deleafingBlock;
var li = document.createElement('deleafingBlock');
$(li).parent("valueList");
}
if i will use the li.parent("valueList"); it show an error parent is not a function. is there anyway how to work it?

Related

Insert ajax response inside html create via innerHtml

I should insert the answer to an ajax post response inside a div created using the javascript document.createElement ('div') function;
the code i am trying is the following:
i try to load variable idx in p with id=idx_h
but don't work.
Thank you for help me.
success: function(data) {
var objJSON = JSON.parse(data);
var idx=objJSON.idx;
const div = document.createElement('div');
div.className = 'row';
div.innerHTML = `
<div class="container-fluid " id="border<?php echo($_COOKIE['idx']);?>">
<div class="row ">
<div class="col">
<div class="input-group mt-1" >
<span class="input-group-text text-large ">R</span>
<div contenteditable="true"
class="input-group-text text-large "
data-old_value="<?php echo $d['rep_sessione'] ;?>"
onInput="saveInlineEdit(this,'rep_sessione','${<p id="idx_h"></p> }' )"
<!--this-->
onClick="highlightEdit(this);">
<?php echo $d['rep_sessione']; ?>
</div>
</div>`;
document.getElementById('link<?php echo $d->id;?>').append(div);
document.getElementById("idx_h").innerHTML =idx ;
}

How to fix code PHP DOM HTML Parse - Loop

I started to play building a PHP HTML Parser,
and I have some trouble:
The HTML code is as follows:
<div class="list">
<div class="b">
<div class="c">
<a href="http://link.com">
<div class="d">Category</div>
<div class="e">
<img src="https://link.com/img.png">
</div>
<h1>TITLE</h1>
<div class="f">paragraph 1</div>
<div class="g">paragraph 2</div>
<div class="h">
<div class="i">
<div class="j">Quot</div>
</div>
</div>
</a>
</div>
</div>
<div class="b">
<div class="c">
<a href="http://link2.com">
<div class="d">Category2</div>
<div class="e">
<img src="https://link2.com/img.png">
</div>
<h1>TITLE 2</h1>
<div class="f">paragraph 12</div>
<div class="g">paragraph 22</div>
<div class="h">
<div class="i">
<div class="j">Quot 2</div>
</div>
</div>
</a>
</div>
</div>
My PHP Code:
$classname = "list";
$xPath = new DomXPath($dom);
$find = $xPath->query("//*
[contains(#class, '$classname')]");
$get = $find->item(0);
$link = $get->getElementsByTagName('a');
$data = array();
foreach ($link as $val)
{ $data[] = array(
'link' => $link->item($no)
->getAttribute('href'),
);
$no++;
}
I want the results like this:
-http://link.com
-category
-http://link.com/img.png
-paragraph 1
-paragraph 2
-quot
-http://link2.com
-category2
-http://link2.com/img.png
-paragraph 12
-paragraph 22
-quot2
Here is how you could do it using jQuery and Mustache js a templating tool.
https://jsfiddle.net/mcroteau/zyouxfq4/
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript" src="Mustache.js"></script>
<script type="text/javascript">
var row = `
<div class="content-row">
<div class="link">
{{link}}
</div>
<h1>{{category}}</h1>
<img src="{{image}}" style="border:solid 1px #ddd; height:20px; width:20px;"/><br/>
<p>{{paragraphOne}}</p>
<p>{{paragraphTwo}}</p>
<p>{{quote}}</p>
</div>
<hr/>`;
$(document).ready(function(){
var $mainContentDiv = $(".list")
var $mainList = $(".b");
$mainList.each(function(){
var data = {}
var content = $(this).find(".c")
var $content = $(content)
var link = getLink($content)
var category = getCategory($content)
var image = getImage($content)
var paragraphOne = getParagraph($content, 'f')
var paragraphTwo = getParagraph($content, 'g')
var quote = getQuote($content)
data["link"] = link
data["category"] = category
data["image"] = image
data["paragraphOne"] = paragraphOne
data["paragraphTwo"] = paragraphTwo
data["quote"] = quote
var html = Mustache.to_html(row, data);
$('#links-container').append(html);
})
function getQuote($content){
return $content.find(".j").html()
}
function getParagraph($content, className){
return $content.find("." + className).html()
}
function getImage($content){
return $content.find("e").find("img").attr("src")
}
function getCategory($content){
var category = $content.find(".d")
return $(category).html()
}
function getLink($content){
return $content.find("a").attr("href")
}
$mainContentDiv.remove()
})
</script>
Is this something like you wanted to achieve?

I am appending data into div using jquery call , it is appending data but in row vice and i want to append side by side

It is my ajax call that is returning me the data.
By using ajax call I'm fetching data and appending it but by append it add a new row where as I want to append that data side by side.
$.get(base_url+'/get_membership_plan',function(data)
{
var units_range = 0; var i=1;
var membershipLength = data.length ;
var plan_type='halfyearly'; var discount_factor=0; var months = 1;
$.each(data,function(index,subcatObj)
{
$('#plans').append('
<div class="item">
<div class="item-container">
<h2>1st Year <br> Discount <br> 10%</h2>
<div class="units-price">
<span class="t-units">1-30 UNITs</span>
<span class="t-price">$30.00</span>
</div>
<div class="net-price"><span class="net-price-e">Net Price</span>
<span class="red-price">$27.00</span>
</div>
</div>
<div class="select-btn">Select Plan
</div>
</div>
');
});
});
I need to reinitialize my carousel when I am updating my div section by this way
$('#plans').trigger('add.owl.carousel', ['<div>....']).trigger('refresh.owl.carousel');

How to index number of specific DIV simple html dom

how would i get index number of div class="age" using simple html dom?
<div class="main">
<div id="names">
<div class="name">...</div>
<div class="subject">...</div>
<div class="class">...</div>
<div class="age">...</div>
</div>
</div>
var parent = document.getElementById('names');
var c = parent.children;
for (var i=0; i< c.length; i++)
if (c[i].classList.contains('age'))
console.log('Found at index '+ i);
<div class="main">
<div id="names">
<div class="name">...</div>
<div class="subject">...</div>
<div class="class">...</div>
<div class="age">...</div>
</div>
</div>
if you want the index of div class="age" in the div class="name" then this should work fine.
console.log($(".age").index());
$('#names div').index($('#names > .age'))
This will get the index of the div class="age" starting from 0
With simple-html-dom you need to jump through some hoops:
$el = $html->find('.age', 0);
$i = 0; // start at 0
while($el = $el->previousSibling()) $i++;
echo $i; // 3

Undefined constant php error message in laravel

I am new in MVC framework. I created an application in Laravel Framework & it was working fine. Now after some modification when I want to view the index page the following error is shown to me-
Message:
Use of undefined constant php - assumed 'php'
Location:
C:\wamp\www\alpha.team.com\laravel\view.php(354) : eval()'d code on
line 32
Here is my view code of index.blade.php
#layout('/layouts/layout')
<link href='http://fonts.googleapis.com/css?family=Neucha' rel='stylesheet' type='text/css'>
<div id="top">
#section('navigation')
<!-- <li class="active"><i class="icon-user"></i> My Profile</li> -->
<li><i class="icon-book"></i> Dashboard</li>
#parent
#endsection
</div>
#section('content')
<!-- For showing error message if any error occours-->
<?php if(Session::get('error')): ?>
<div class="alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong> <?php echo Session::get('error'); ?>
</div>
<?php endif; ?>
<!-- For showing success message.-->
<?php if(Session::get('success')): ?>
<div class="alert alert-success">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Well done!</strong> <?php echo Session::get('success'); ?>
</div>
<?php endif; ?>
<div class="field-section">
<div class="hero-unit">
<!-- <a id="logo" href="#"><img alt="TechIndyeah" src="/uploads/logo.png" style="vertical-align: top;"></a> -->
<h1 style="display:inline;">Team TechIndyeah</h1>
<ul class="teams" style="text-align:center;">
#foreach($departments as $dept)
<?php// print_r($dept); ?>
<li>
<?php echo $dept->name; ?>
</li>
#endforeach
</ul>
</div>
</div> <!-- field-section div ends here-->
<!-- <div class="container"> -->
<div class="wrapper">
<div class="hero-unit" id="bg-pattern">
<h1 class="home-tag"> Tech-ing India<span><p>The team of enthusiastic tech fanatics</p></span></h1>
<p class="home-ptag">We are a team of enthusiastic tech fanatics and yes we are Apple fanboys too. We have sailed out together on a small boat and we do live in what Seth Godin says, “Small is the next big”. We love technology and we love you. Our team is free, creative and always brimming with ideas.</p>
<div class="row" style="background:none;">
<div class="span8">
<h1 class="home-tag" >About Us</h1>
<p class="home-ptag">TechIndyeah has a team which is highly process oriented and has a sharp client-centric approach. Our mission is to help you to build your footprints in business. We are a team inspired by a vision and driven by technology. We are driven by an offbeat approach when it comes to client servicing and support. We have been serving our clients for a long time and have won accolades galore. We are a team and we believe in making our time resourceful so that our clients get the most out of us. We are a band of developers, designers and marketers who can take your business online and also combat the stiff competition from similar players in your domain. </p>
</div>
<div class="span3">
<object type="image/svg+xml" data="/img/logo.svg">
<img alt="TechIndyeah" src="/img/logo.png" style="vertical-align:top;">
</object>
</div>
</div>
<div class="row">
<div class="span4">
<!-- <a id="logo" href="#"><img alt="TechIndyeah" src="/uploads/logo.png"></a> -->
</div>
<!-- <div class="span6" id="caption">
<h3>Here We Are</h3>
</div> -->
</div>
<div class="row">
<?php $something = $errors->all();
if(!empty($something)): ?>
<div class = "alert alert-error">
<button type="button" class="close" data-dismiss="alert">×</button>
#foreach ($errors->all('<p>:message</p>') as $input_error)
{{ $input_error }}
#endforeach
</div>
<?php endif; ?>
</div>
<!-- For showing all employee name in the front page.. Showcasing them..-->
<div id="hero-unit">
<script type="text/javascript">
//The departments are randomly comming in the page when it is first loaded..
(function($) {
// Get the list items and hide them
var items = $(".teams > li").css({opacity:0});
// Shuffle them
shuffle(items);
// Start the fade-in queue
nextItemFade(items);
// Animation callback to start next fade-in
function nextItemFade(items) {
// Fade in the first element in the collection
items.eq(0).animate({opacity:1}, 400, function() {
// Recurse, but without the first element
nextItemFade(items.slice(1));
});
}
// Shuffles an array
// Based on http://jsfromhell.com/array/shuffle
function shuffle(a) {
var j, // Random position
x, // Last item
i = a.length; // Iterator
// Loop through the array
while(i) {
// Select a random position
j = (Math.random() * i) | 0;
// Get the last item in the array
x = a[--i];
// Swap the last item with the item at the selected position
a[i] = a[j];
a[j] = x;
}
return a;
}
/* Minified version
function shuffle(a) {
for(var j, x, i = a.length; i; j = (Math.random() * i) | 0, x = a[--i], a[i] = a[j], a[j] = x);
return a;
} */
})(jQuery);
$(".nav1 li").each(
function(intIndex) {
var l = Math.floor(Math.random() * $(".nav1").width());
var t = Math.floor(Math.random() * $(".nav1").height());
$(this).css("left", l);
$(this).css("top", t);
$(this).on(
"click",
function() {
alert("l=" + l + " t=" + t);
}
);
}
);
$(".nav1 li").each(
function(intIndex) {
var l = Math.floor(Math.random() * 940);
var t = Math.floor(Math.random() * 500);
$(this).css("left", l);
$(this).css("top", t);
$(this).on(
"click",
function() {
alert("l=" + l + " t=" + t);
}
);
}
);
</script>
<style type="text/css">
.nav1
{
position:relative;
}
.nav1 li
{
padding: 10px;
position:absolute;
}
</style>
</div> <!-- #hero-unit ends here-->
<!-- </div> mucarousel div ends here -->
<div class="member-list">
<!-- <object type="image/svg+xml" data="/img/vector-tree2.svg"> -->
<!-- <img alt="TechIndyeah" src="/img/vector-tree2.png" style="vertical-align:top;"> -->
<!-- </object> -->
#foreach($departments as $dept)
<div id="<?php echo implode('_',explode(' ',$dept->name));?>" class="demo">
<ul class="member">
<?php $users = User::where('department_id','=',$dept->id)->get();
// $users = User::where('department_code','=',$dept->code)->get();
?>
#foreach($users as $user)
<li class="new-element" style="display:inline-block;" rel="tooltip" data-placement="right" data-original-title="<?php echo $user->first_name." ".$user->last_name;?>">
<a href="/home/view/<?php echo $user->username;?>" rel="tooltip" data-placement="right" href="#" data-original-title="<?php echo $user->first_name." ".$user->last_name."</br> ".$user->designation;?>">
<img class="hover-img" src="http://graph.facebook.com/<?php echo $user->facebook_id;?>/picture?type=large">
</a>
</li>
#endforeach
</ul>
Back To Top
</div>
#endforeach
<script type="text/javascript">
$(window).scroll(function(){
if ($(this).scrollTop() > 50) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
</script>
<script type="text/javascript">
//all links which start with a # will have an animated scroll to the target.
$('a[href^="#"]').on('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
// console.log($target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top - 10
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$('.new-element').children('a').tooltip();
</script>
</div>
<h1 style="text-align:center;font-family: 'Lato light', sans-serif;text-shadow: 2px 1px #848686;">TechIndyeah Software Pvt. Ltd.</h1>
</div>
</div>
#endsection
</div>
I cannot understand. Please help.
I'm not familiar with Laravel, but it seems that an eval() in a file named view.php is rendering a template. So my guess is that someplace in your template (whatever template is being rendered) you have php where you really mean 'php'.
For example:
echo $data[php]; //you have this
echo $data['php']; //but it should be this
//or
if(php == $var){} //you have this
if('php' == $var){} //but it should be this
Can you share some of the code that is in your view.php file?
You're doing something wrong on line 32 of that file, so it would be very helpful if we can see what the code actually is :)

Categories