CKEDITOR inline editor not passing editor value - php

I have 3 web pages with the same code within a website. I am having success with 2 of my 3 pages. The ckeditor instances update as expected.
I have finally figured out "what the issue is", BUT still don't know how to fix it. It seems that if I type only one line of code and click out of the div (ie. blur event happens) it saves as is expected. If I hit a hard return and type other text the blur event won't save ANYTHING after the hard return. Seems to be a bug in this version of CKEDITOR. As I mentioned, I have 2 other pages with exactly the same code and everything works just fine.
<?php
session_start();
$thisPage = "services";
require('functions.php');
include('header.htm');
?>
<title>Services | Dr. Your Name</title>
<style type="text/javascript">
#cke_body {margin-left:120px;margin-top:30px;width:520px;background-color:gray;}
</style>
<script type="text/javascript">
CKEDITOR.config.filebrowserBrowseUrl= 'browser/browseAdminUploads.php';
CKEDITOR.config.extraPlugins = 'justify';
</script>
</head>
<body>
<div id="header" class="clear">
<div id="headerContent">
<?php include ("bannerIcons.php"); ?>
<div id="logo">
<img src="images/logo.png" title="home" alt=""/>
</div> <!--end logo-->
<?php include('mainMenu.php');?>
</div>
</div> <!--end header-->
<div id="container">
<div id="content" class="shadow"><div class="content">
<div id="colLt"><div class="content">
<?php
connect();
$sql = mysql_query("SELECT services FROM contentAreas") or die("nothing found");
$row = mysql_fetch_assoc($sql);
if ($_SESSION['username']=='admin'){
echo "<div id='services' contenteditable='true' onblur='saveServices()'>";
} else {
echo "<div id='services'>";
}
echo $row['services'];
echo "</div>";?>
<script type="text/javascript">
function saveServices() {
var data = CKEDITOR.instances.services.getData();
$.post('saveServices.php', {services:data})
}
</script>
</div></div>
<?php include('saveServices.php');?>
<div id="colRt"><div class="content">
<div id="serviceBox" class="shadow"><div class="content">
<p class="big italTxt">one or more testimonials could go here. Lorem ipsum dolor sit amet, mel cu atqui perfecto, nec te vero fugit denique, an vel mundi tritani concludaturque.<br><br>Laoreet erroribus eos no. Eu nec maluisset repudiandae. Possit lucilius constituam his cu, quas liber sea an, eum purto errem audire eu. In viris assentior vis, pri iudico dolorem electram ne, ea ius scripta virtute.</p>
</div></div>
</div></div><!--end colRt-->
</div></div><!--end content-->
<div id="footer">
<?php include("footer.htm") ?>
</div><!--end footer-->
<div class="clear"></div>
</div><!--end container-->
<div class="clear"></div>
</body>
</html>
My file saveServices.php is as follows:
<?php
$services=$_POST['services'];
echo "hello<br>";
echo "services: ".$services;
include('functions.php');
connect();
$sql1 = mysql_query("UPDATE contentAreas SET services = '$services'") or die ("Your information has not been posted");
?>
Thanks again for your help!

I can't believe this nor do I understand it, but when I changed my div name from "services" to "offers", it worked. Is services a reserve word? Could my function name saveServices() be too long? I would love to hear a concrete explanation about why this has happened.

Also, I upgraded from 4.0.2 standard to 4.2.2 standard.

Related

PHP data echo not layouting properly

I'm trying to create a PHP page that displays 6 data from a table at a time however there is a problem with the layout of how these data are displayed, I believe this problem comes from the styling
The layout is supposed to look something like this:
Screen shot 01
Screen shot 02
I have tried playing around with every single div element on the code below, however, I am unable to find the right width that the data is displayed like the image, right now I'm not sure anymore where the problem with the layout comes from.
This is how it looks like:
Screen shot
PHP:
<div id="greenLine"></div>
<div id="content">
<div class="container">
<form action="search_product.php" method="post"> <!--Action: Sent to "search_product.php" Method: The data will be displayed by "post"-->
<label>Search Product:<br></label>
<input type="text" name="search" placeholder="Enter Product Name"> <!--The name of the numbers inputted are "nilai"-->
<input type="submit" id="submit" name="submit" value="Submit">
</form>
<?php
$koneksi = new mysqli ("localhost","REDACTED","REDACTED","cm0491_progress_business_db_2");
$sql = "SELECT * FROM `product_tbl` LIMIT 6";
$querynews = $koneksi->query($sql);
$rownews = $querynews->fetch_assoc();
// var_dump($rownews); exit;
do {
?>
<div class="product_item">
<div class="number_icon"><?php echo $rownews['id_product']; ?></div>
<h2 class="product_title"><?php echo $rownews['name_product']; ?></h2>
<img src="images/<?php echo $rownews['gambar_product']; ?>"width="200"><br>
<p class="product_desc"><?php echo $rownews['description_product']; ?>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
Read More<br><br><br>
</div>
<?php }while($rownews = $querynews->fetch_assoc()); ?>
</div>
<!--- END CONTENT WRAPPER -->
</div>
CSS:
#greenLine { background:url(../images/bg_top_img.jpg) center no-repeat #305D00; height:20px;}
#content { background:#fff; min-height:500px; margin-left:0%;}
.container {width:1200px; height:100%;margin:auto; overflow:auto; overflow-y:hidden; overflow-x:hidden; margin-left:20%;}
.product_item { min-height:280px; width:270px; margin:20px; float:left;}
.number_icon { height:56px; width:56px; background:url(../images/dropcap1.gif); text-align:center; font-size:43px; float:left; margin-bottom:10px; color:#FFF; }
.product_desc { line-height:20px; min-height:60px; color:#696969; margin-top:10px; font-size:14px; font-style:italic; auto;}
I'm genuinely confused with what's happening to the layout and would greatly appreciate anyone willing to help, thank you.
P.S Avoid posting database variables or passwords
Use flex to achieve consistent results, I have your removed php codes for simplicity, just echo where necessary
.product_item{
display:flex;
flex-direction:column;
}
.product_item .title_area{
display:flex;
flex:1;
align-items: center;
}
.product_item .number_icon{
background:green;
width:20px;
height:20px;
border-radius:50%;
color:white;
text-align:center;
line-height:20px;
margin-right:5px;
}
.product_item img{
width:100%;
max-height:200px;
object-fit:cover;
}
<div class="container">
<div class="product_item">
<div class="title_area">
<div class="number_icon">1</div>
<h2 class="product_title">Furniture</h2>
</div>
<img src="http://placehold.it/200x150">
<p class="product_desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
Read More<br><br><br>
</div>
</div>
<!--- END CONTENT WRAPPER -->
</div>

I can't insert data in my database. Where I'm going wrong?

Here is my CODE. I'm using php 5.4 and the PDO connection!
I included my database connection and some other files i need. And now I have a registration form wich i add some values from filling them. The ridirection is made and not a problem is shown. But when I check the DB is not added. Where I'm going wrong?
Code
<?php
include'db.php';
include'header.php';
require 'vendndodhje.php';
$VendndodhjeInput = new Vendndodhje();
if ( !empty($_POST)) {
// keep track validation errors
$emerError = null;
$mbiemerlError = null;
$dtlError = null;
$telError = null;
$emailError = null;
$vendndodhjeError=null;
// keep track post values
$emer = $_POST['emer'];
$mbiemer = $_POST['mbiemer'];
$datelindje = $_POST['datelindje'];
$tel = $_POST['tel'];
$email = $_POST['email'];
$Vendndodhje=$_POST['Vendndodhje'];
//insert values
if ($valid) {
$pdo = Database::connect();
$sql = "INSERT INTO klienti(emer,mbiemer,datelindje,tel,email,Vendndodhje,date_aplikimi) VALUES(?, ?, ?, ?, ?, ?, NOW())";
$q = $pdo->prepare($sql);
$q->execute(array($emer, $mbiemer, $datelindje, $tel,$email, $Vendndodhje));
}
header("Location: form'.php");
}
?>
You can try something like this:
$(document).ready(function($) {
$('#accordion').find('.accordion-toggle').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle(500);
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp(1000);
$(".active").removeClass("active");
$("#accordion")
.find(".glyphicon")
.removeClass("glyphicon-remove-circle")
.addClass("glyphicon-plus-sign")
$(this)
.addClass("active")
.find('.glyphicon')
.removeClass("glyphicon-plus-sign")
.addClass("glyphicon-remove-circle")
});
});
.active > .glyphicon{
color:orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<div id="accordion">
<h4 class="accordion-toggle active">
<span class="glyphicon glyphicon-remove-circle"></span>
Wise busy ast both park when an ye no Nay likely her</h4>
<div class="accordion-content default">
<p>
Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-toggle">
<span class="glyphicon glyphicon-plus-sign"> </span>
Written enquire painful ye to offuces forming it</h4>
<div class="accordion-content">
<p>
Lorem ipsum dolor sit amet mauris eu turpis.</p>
</div>
<h4 class="accordion-toggle">
<span class="glyphicon glyphicon-plus-sign"> </span>
In finished on he speaking suitable advanced if happines</h4>
<div class="accordion-content">
<p>
Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
<h4 class="accordion-toggle">
<span class="glyphicon glyphicon-plus-sign"> </span>
People as period twenty my extent as Set was better</h4>
<div class="accordion-content">
<p>
Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
add class to your <span class="glyphicon glyphicon-plus-sign MyIcon"> then add css MyIcon:active{background:orange;}

HTML5 div wrap clone

How can i clone the below HTML5 wrap. The code contains also some php serialized that must be in order , example Article one has <?php echo $price[n];?> where n must be a number from 0-15.
<!-- ARTICLE START -->
<div class="col-sm-6 col-md-4">
<article class="box has-discount">
<figure>
<a class="hover-effect popup-gallery" href=
"ajax/slideshow-popup.html"><img alt="" height="161" src=
"<php echo $img[0];?>" width="270"></a> <span class=
"discount"><span class="discount-text">VIP
DISCOUNT</span></span>
</figure>
<div class="details">
<span class="price"><small>avg/night</small> $<php echo $price[0];?></span>
<h4 class="box-title"><php echo $name[0];?>small><php echo $city[0];?></small></h4>
<div class="feedback">
<div class="five-stars-container" data-original-title=
"4 stars" data-placement="bottom" data-toggle="tooltip"
title="">
<span class="five-stars" style="width: 80%;"></span>
</div><span class="review">270 reviews</span>
</div>
<p class="description">Nunc cursus libero purus ac congue arcu
cursus ut sed vitae pulvinar massa idporta nequetiam.</p>
<div class="action">
<a class="button btn-small" href=
"hotel-detailed.html">SELECT</a> <a class=
"button btn-small yellow popup-map" data-box=
"48.856614, 2.352222" href="#">VIEW ON MAP</a>
</div>
</div>
</article>
</div>
<!-- ARTICLE END -->
I have a code that generates arround 20-30 hotels,
Each hotel has his own article and his own variable as $price[], $name[], etc were the [n] value in a number in ascending order starting from 0.
How can i generate the above div x how many hotels availeble and to insert the variable value automatic ?.
something like this? http://jsfiddle.net/swm53ran/173/
i simplified the code a bit and did everything in jquery, but i put notes on how to do it with php (i dont have readily available access to php editor) but the concept is the same.
<div class="hotel" id="template" style="display:none;">
<div class="name"></div>
<div class="price"></div>
</div>
$(document).ready(function() {
var hotels = [
{'name': 'hotel1', 'price':'$200'},
{'name': 'hotel2', 'price':'$300'},
{'name': 'hotel3', 'price':'$700'},
{'name': 'hotel4', 'price':'$100'}
];
for(var i = 0; i < hotels.length; i++) {
var clone = $('#template').clone(true).attr('id', '');
clone.css('display', '');
clone.find('.name').html('Name: ' + hotels[i]['name'] + '. With php should be something like < ? php echo $name[i]; ? >');
clone.find('.price').html('Price: ' + hotels[i]['price'] + '. With php should be something like < ? php echo $price[i]; ? >');
clone.appendTo('body');
}
});
you'd get the hotels array from php (im assuming) and then you can put php right into the html of the clone if you take out the spaces, then use i as the incrementor from the for loop. hope this helps

How to get a embeded code for video

I am using embedly, it is working properly but the problem is for some video it gives error- not a valid key.I know we have to register on their site and pay some money for key but, I dont want to do that.Is there any other solution to get embed code for a video so that I can put on my code other than embedly.If yes please help me on this or if possible please provide some example to do this .The code for a key is given below.
$pro = new Embedly_API(array(
'key' => 'xxxxxxxxxxxxxxxx', //need a pro key for this
'user_agent' => 'Mozilla/5.0 (compatible; mytestapp/1.0)'
));
Thanks in advance.
You don't need to pay any money for light usage.
You should try scrolling down on the pricing page: http://embed.ly/pricing
Then select the free option.
I have build the coding for your script for your problem.,please find the below one and make use of it as per your needs.
<!DOCTYPE>
<html>
<head>
<title>Page Title</title>
<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
/*
* Embedly JQuery v2.2.0
* ==============
* This library allows you to easily embed objects on any page.
*/
(function(a){window.embedlyURLre=/(http|https):\/\/(\w+:{0,1}\w*#)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%#!\-\/]))?/;a.embedly=a.embedly||{};if(a.embedly.version){return}a.extend({embedly:function(k,q,n){var c=[];var p="http://api.embed.ly/";var d;q=q?q:{};d=a.extend({},a.embedly.defaults,q);if(!d.urlRe){d.urlRe=window.embedlyURLre}if(typeof k==="string"){k=new Array(k)}if(typeof n!=="undefined"){d.success=n}if(d.secure){p="https://api.embed.ly/"}if(!d.success){d.success=function(i,t){var r,s=a(t.node);if(!(i)){return null}if((r=d.method)==="replace"){return s.replaceWith(i.code)}else{if(r==="after"){return s.after(i.code)}else{if(r==="afterParent"){return s.parent().after(i.code)}else{if(r==="replaceParent"){return s.parent().replaceWith(i.code)}}}}}}if(!d.error){d.error=function(i,r){}}var m=function(i){return d.urlRe.test(i)};var o=function(r){var i="urls="+r;if(d.maxWidth){i+="&maxwidth="+d.maxWidth}else{if(typeof dimensions!=="undefined"){i+="&maxwidth="+dimensions.width}}if(d.maxHeight){i+="&maxheight="+d.maxHeight}if(d.chars){i+="&chars="+d.chars}if(d.words){i+="&words="+d.words}if(d.secure){i+="&secure=true"}if(d.frame){i+="&frame=true"}i+="&wmode="+d.wmode;if(typeof d.autoplay==="string"||typeof d.autoplay==="boolean"){i+="&autoplay="+d.autoplay}if(d.width){i+="&width="+d.width}return i};var j=function(){if(typeof d.autoplay==="string"){if(d.endpoint.search(/objectify/i)>=0){return p+"2/objectify"}else{if(d.endpoint.search(/preview/i)>=0){return p+"1/preview"}}}return p+"1/oembed"};var b=function(){var i=[];if(d.addImageStyles){if(d.maxWidth){units=isNaN(parseInt(d.maxWidth,10))?"":"px";i.push("max-width: "+(d.maxWidth)+units)}if(d.maxHeight){units=isNaN(parseInt(d.maxHeight,10))?"":"px";i.push("max-height: "+(d.maxHeight)+units)}}return i.join(";")};var g=function(v,t){if(d.endpoint!=="oembed"){return d.success(v,t)}var w,s,r,y,u,i,x,z;if((w=v.type)==="photo"){y=v.title||"";s="'+v.description+"</div>":"";x=v.provider_name?"<a href='"+v.provider_url+"' class='provider'>"+v.provider_name+"":"";s=i+"<a href='"+t.url+"'>"+y+"</a>";s+=x;s+=z}}}if(d.wrapElement&&d.wrapElement==="div"&&a.browser.msie&&a.browser.version<9){d.wrapElement="span"}if(d.wrapElement){s="<"+d.wrapElement+' class="'+d.className+'">'+s+"</"+d.wrapElement+">"}v.code=s;if(typeof t.node!=="undefined"){a(t.node).data("oembed",v).trigger("embedly-oembed",[v])}return d.success(v,t)};var e=function(i){var t,v,u,s,r;u=a.map(i,function(x,w){if(w===0){if(x.node!==null){r=a(x.node);s={width:r.parent().width(),height:r.parent().height()}}}return encodeURIComponent(x.url)}).join(",");a.ajax({url:j(),dataType:"jsonp",data:o(u),success:function(w){return a.each(w,function(x,y){return y.type!=="error"?g(y,i[x]):d.error(i[x].node,y)})}})};a.each(k,function(s,r){var u=typeof d.elems!=="undefined"?d.elems[s]:null;if(typeof u!=="undefined"&&!m(r)){a(u).data("oembed",false)}var t={url:r,error_code:400,error_message:"HTTP 400: Bad Request",type:"error"};return(r&&m(r))?c.push({url:r,node:u}):d.error(u,t)});var l=[];var h=c.length;for(var f=0;(0<=h?f<h:f>h);f+=20){l=l.concat(e(c.slice(f,f+20)))}if(d.elems){return d.elems}else{return this}}});a.embedly.version="2.2.0";a.embedly.defaults={endpoint:"oembed",secure:false,frame:false,wmode:"opaque",method:"replace",addImageStyles:true,wrapElement:"div",className:"embed",elems:[]};a.fn.embedly=function(d,g){var e=typeof d!=="undefined"?d:{};if(typeof g!=="undefined"){d.success=g}var f=new Array();var c=new Array();this.each(function(){if(typeof a(this).attr("href")!=="undefined"){f.push(a(this).attr("href"));c.push(a(this))}else{a(this).find("a").each(function(){f.push(a(this).attr("href"));c.push(a(this))})}e.elems=c});var b=a.embedly(f,e);return this}})(jQuery);
</script>
<script type="text/javascript">
$('document').ready(function(){
$('div.content').embedly({
maxWidth: 450,
wmode: 'transparent',
method: 'after'
});
});
</script>
</head>
<body>
<div class="content">
<article>
<h2>Title</h2>
<p>Lorizzle ma nizzle dolor sit amizzle, brizzle adipiscing elit. </p>
youtube
<p>Maecenizzle owned bow wow wow. Nam eros.</p>
</article>
<article>
<h2>Title 2</h2>
<p>Lorizzle ma nizzle dolor sit amizzle, brizzle adipiscing elit. </p>
flickr
<p>Maecenizzle owned bow wow wow. Nam eros.</p>
</article>
</div>
</body>
</html>
It's working fine.,test it and use it as per your wish.

send ID to PHP script and return img src tag from DB filename

I am trying to do something easy I am sure but I have looked and tested and I am not doing something right.
I have a DB that stores the image file name, I need to get the file name based on the ID in the HTML , let me explain:
<div class="slide">
<div class="image-holder">
<img src="img/asoft_table.jpg" alt="" />
</div>
<div class="info">
<p>Morbi a tellus lorem, id scelerisque ligula. Maecenas vitae turpis et.</p>
</div>
</div>
<div class="slide">
<div class="image-holder">
<img src="img/soft_table.jpg" alt="" />
</div>
<div class="info">
<p>Sed semper, lorem ac lobortis bibendum, magna neque varius augue, vel accumsan.</p>
</div>
</div>
<div class="slide">
<div class="image-holder">
<img src="img/living_room2.jpg" alt="" />
</div>
in each instance of an img tag, I need to insert the filename from the DB. so, first image tag would be primary key 1, second primary key 2 and so forth.
Here is the PHP script I am using to retrieve the filename, which works, but I am unsure how to send the ID of the image to the script and then return it properly.
<?php
$hote = 'localhost';
$base = '*****';
$user = '*****';
$pass = '*****';
$cnx = mysql_connect ($hote, $user, $pass) or die(mysql_error ());
$ret = mysql_select_db ($base) or die (mysql_error ());
$image_id = mysql_real_escape_string($_GET['ID']);
$sql = "SELECT image FROM image_upload WHERE ID ='$image_id'";
$result = mysql_query($sql);
$image = mysql_result($result, 0);
header('Content-Type: text/html');
echo '<img src="' . $image . '"/>';
exit;
?>
any help would be appreciated, thanks a heap
From what it looks your trying too hard to separate the PHP from HTML.
// File: index.php
<?php
$hote = 'localhost';
$base = '*****';
$user = '*****';
$pass = '*****';
$cnx = mysql_connect ($hote, $user, $pass) or die(mysql_error ());
$ret = mysql_select_db ($base) or die (mysql_error ());
$image_id = mysql_real_escape_string($_GET['ID']);
$sql = "SELECT image FROM image_upload WHERE ID ='$image_id'";
$result = mysql_query($sql);
//$image = mysql_result($result, 0);
$image = array();
while ($row = mysql_fetch_assoc($result)) {
$image[] = $row["image"];
}
?>
<html>
<head>
</head>
<body>
<div class="slide">
<div class="image-holder">
<img src="<?php echo $image[0];?>" alt="" />
</div>
<div class="info">
<p>Morbi a tellus lorem, id scelerisque ligula. Maecenas vitae turpis et.</p>
</div>
</div>
<div class="slide">
<div class="image-holder">
<img src="<?php echo $image[1];?>" alt="" />
</div>
<div class="info">
<p>Sed semper, lorem ac lobortis bibendum, magna neque varius augue, vel accumsan.</p>
</div>
</div>
<div class="slide">
<div class="image-holder">
<img src="<?php echo $image[2];?>" alt="" />
</div>
</body>
</html>
// This is the magic code to get all the rows out of the database :)
// $row[ field_name ];
while ($row = mysql_fetch_assoc($result)) {
$image[] $row["image"];
}
Edit:
I'm not sure if this is what your trying to accomplish, but thought I'd share anyway.
$imageID1 = $_GET['id1'];
$imageID2 = $_GET['id2'];
$imageID3 = $_GET['id3'];
$sql = "SELECT image FROM image_upload ";
$sql = "WHERE ID = $imageID1 OR ID = $imageID2 OR ID = $imageID3";
//The rest of your code can remain the same.
Or if one id relates to 3 images.
$sql = "SELECT * FROM image_upload WHERE ID ='$image_id'";
$result = mysql_query($sql);
$image = array();
$row = mysql_fetch_assoc($result);
$image1 = $row["image1"];
$image2 = $row["image2"];
$image3 = $row["image3"];
I've you give me more info on what your trying to do, I'd be happy to give you a better example.
Make sure your HTML file is actually a php file. Put the PHP code at the top of it then put your HTML below it. You can use
<?php echo $image; ?>
to put the variable in like this:
<div class="slide">
<div class="image-holder">
<img src="<?php echo $image; ?>" alt="" />
</div>
<div class="info">
<p>Sed semper, lorem ac lobortis bibendum, magna neque varius augue, vel accumsan.</p>
</div>
</div>
It's always a good idea to use htmlentities for security (avoids javascript injection):
<img src="<?php echo htmlentities($image, ENT_QUOTES, "UTF-8"); ?>" alt="" />
Since you are using the $_GET array, you will want to send the ID through the URL, for instance:
http://www.example.com/image.php?ID=5
That is assuming you want to continue using $_GET for this script.

Categories