Resolved [HELP]NicEdit Problem

KazeFlame · 02-26-2013, 10:32 AM

I have tried NicEdit and it is awesome. Users can easily customize HTML documents.
http://nicedit.com/
But I have a problem on using it.

I made an Account Settings application on my website that lets the users edit their profile information, avatar, title, profile introduction, etc using HTML, PHP, CSS and jQuery.

The first version of the application uses only textarea to edit the introduction, and it works fine.

Then I found out the NicEdit. I have created a version two of the application and now it uses NicEdit instead of normal textarea, but when I tried the application it has an error. The introduction is not updating when I used NicEdit.

I double check the PHP code that updates the database but it has no error. I think the error is in the javascript that I made.

Here is the PHP Code:

PHP Code:


			
<?php

//LET THE PARTY BEGIN

include 'connect.php';

include 'core.php';

include 'session.php';



//FOR NAVIGATION

navDestination("2");

?>

<!-- The OtakuPage version 2.0 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>The OtakuPage - Account Settings</title>

<link href="<?php echo homepage();?>images/favicon.png" rel="shortcut icon"/>

<style type="text/css">

@import '<?php echo homepage();?>css/sky-blue.css';

</style>

<script type="text/javascript" src="<?php echo homepage();?>js/time.js"></script>

<script type="text/javascript" src="<?php echo homepage();?>js/jquery-1.5.2.min.js"></script>

<script type="text/javascript" src="<?php echo homepage();?>js/update-profile.js"></script>

<script type="text/javascript" src="<?php echo homepage();?>lib/NicEdit/nicEdit.js"></script>

<script type="text/javascript">

function toggleIntro(){

intro = new nicEditor({fullPanel : true}).panelInstance('intro',{hasPanel : true});

}

bkLib.onDomLoaded(function() { toggleIntro(); });

</script>

</head>

<body>

<div id="site-wrapper">

<div id="wrapper">

<!-- HEADER START -->

<div id="header">

<?php inc('header'); ?>

</div>

<!-- HEADER END -->

<div id="con-wrapper">

<!-- CONTENTS START -->

<div id="contents">

<script type="text/javascript">

function toggleSlides(){

    $('.toggler').click(function(e){

        var id=$(this).attr('id');

        var widgetId=id.substring(id.indexOf('-')+1,id.length);

        $('#'+widgetId).slideToggle();

        $(this).toggleClass('sliderExpanded');

    });

};

$(function(){

    toggleSlides();

});

</script>

<form id="update-profile" action="<?php echo homepage();?>doUpdateAccount.php" method="post">

<div class="message"></div>

<p class="toggler" id="toggler-slideOne">Basic Information <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideOne">

<div id="cp-container">

<p>Real Name:</p>

<input type="text" id="real_name" value="<?php u($userprofile['real_name']); ?>" maxlength="64"/>

<p>Location:</p>

<input type="text" id="location" value="<?php u($userprofile['location']); ?>" maxlength="64"/>

<p>Birthday:</p>

<select id="bday_month">

<option value="01"<?php selected_bday_month("01"); ?>>January</option><option value="02"<?php selected_bday_month("02"); ?>>February</option><option value="03"<?php selected_bday_month("03"); ?>>March</option><option value="04"<?php selected_bday_month("04"); ?>>April</option><option value="05"<?php selected_bday_month("05"); ?>>May</option><option value="06"<?php selected_bday_month("06"); ?>>June</option><option value="07"<?php selected_bday_month("07"); ?>>July</option><option value="08"<?php selected_bday_month("08"); ?>>August</option><option value="09"<?php selected_bday_month("09"); ?>>September</option><option value="10"<?php selected_bday_month("10"); ?>>October</option><option value="11"<?php selected_bday_month("11"); ?>>November</option><option value="12"<?php selected_bday_month("12"); ?>>December</option>

</select>

<select id="bday_day">

<?php

for($day = 1; $day <= 31; $day++){

    echo '<option value="'.$day.'"'; echo selected_bday_day($day).'>'.$day.'</option>';

}

?>

</select>

<select id="bday_year">

<?php

for($year = 1913; $year <= 2010; $year++){

    echo '<option value="'.$year.'"'; echo selected_bday_year($year).'>'.$year.'</option>';

}

?>

</select>

<p>Gender:</p>

<select id="gender">

<option value="Male"<?php selected_gender("Male"); ?>>Male</option>

<option value="Female"<?php selected_gender("Female"); ?>>Female</option>

</select>

<p>Relationship Status:</p>

<select id="status">

<option value="Single"<?php selected_status("Single"); ?>>Single</option><option value="In a relationship"<?php selected_status("In a relationship"); ?>>In a relationship</option><option value="Married"<?php selected_status("Married"); ?>>Married</option><option value="Divorced"<?php selected_status("Divorced"); ?>>Divorced</option><option value="Its complicated"<?php selected_status("Its Complicated"); ?>>Its complicated</option>

</select>

</div>

</div>

<p class="toggler" id="toggler-slideTwo">Contact Information <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideTwo">

<div id="cp-container">

<p>E-mail:</p>

<input type="text" id="e_mail" value="<?php u($userprofile['e_mail']); ?>" maxlength="64"/>

<p>Yahoo:</p>

<input type="text" id="yahoo" value="<?php u($userprofile['yahoo']); ?>" maxlength="64"/>

<p>MSN:</p>

<input type="text" id="msn" value="<?php u($userprofile['msn']); ?>" maxlength="64"/>

<p>Skype:</p>

<input type="text" id="skype" value="<?php u($userprofile['skype']); ?>" maxlength="64"/>

<p>Mobile Number:</p>

<input type="text" id="mobile" value="<?php u($userprofile['mobile']); ?>" maxlength="64"/>

<p>Website:</p>

<input type="text" id="website" value="<?php u($userprofile['website']); ?>" maxlength="64"/>

</div>

</div>

<p class="toggler" id="toggler-slideThree">Introduction <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideThree">

<div id="cp-container">

<textarea id="intro" style="width: 100%; height: 400px;">

</textarea>

</div>

</div>

<p class="toggler" id="toggler-slideFour">Avatar <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideFour">

<div id="cp-container">

<p>>.<</p>

</div>

</div>

<p class="toggler" id="toggler-slideFive">Title <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideFive">

<div id="cp-container">

<p>:D</p>

</div>

</div>

<p class="toggler" id="toggler-slideSix">Forum Signature <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span></p>

<div class="slider" id="slideSix">

<div id="cp-container">

<p>^.^</p>

</div>

</div>

<input type="hidden" id="change" value="info"/>

<input type="submit" id="update" value="Save"/><div class="loading"><img src="<?php echo homepage();?>images/ajax-loader.gif" alt="Loading..."/></div>

</form>

</div>

<!-- CONTENTS END -->

<!-- SIDEBAR START -->

<?php inc('sidebar'); ?>

<!-- SIDEBAR END -->

</div>

<!-- FOOTER START -->

<?php inc('footer'); ?>

<!-- FOOTER END -->

</div>

</div>

</body>

</html>

Here is the JS Code:

Code:

// JavaScript Document

$(document).ready(function(){
$("#update").click(function(){
$('.loading').css('display','inline');
var action = $("#update-profile").attr('action');
var form_data = {
real_name: $("#real_name").val(),
location: $("#location").val(),
bday_month: $("#bday_month").val(),
bday_day: $("#bday_day").val(),
bday_year: $("#bday_year").val(),
gender: $("#gender").val(),
status: $("#status").val(),
e_mail: $("#e_mail").val(),
yahoo: $("#yahoo").val(),
msn: $("#msn").val(),
skype: $("#skype").val(),
mobile: $("#mobile").val(),
website: $("#website").val(),
intro: $("#intro").val(),
change: $("#change").val()
};	
$.ajax({
type: "POST",
url: action,
data: form_data,
success: function(response)
{
if(response == "success"){
$('.message').css('display','block');
$('.loading').css('display','none');
$('.message').css('background-color','#DFFFDF');
$('.message').css('border','1px solid #00A600');
$(".message").html("Account Settings Updated.");
}
else if(response == "error1"){
$('.message').css('display','block');
$('.loading').css('display','none');
$('.message').css('background-color','#FFEBE8');
$('.message').css('border','1px solid #DD3C10');
$(".message").html("Real Name is required. Please try again.");
}
else if(response == "error2"){
$('.message').css('display','block');
$('.loading').css('display','none');
$('.message').css('background-color','#FFEBE8');
$('.message').css('border','1px solid #DD3C10');
$(".message").html("Location is required. Please try again.");
}
}
});	
return false;
});
});

Please help me and thank you in advance. :)

Fou-Lu · 02-26-2013, 02:48 PM

I don't do JS, but all I can say for sure is if you *don't* use it than you won't get anything to your PHP (and as such you cannot test it to determine if the cause is your HTML/JS or the PHP code) since you do not name your form entries. If you get *some* of it, than the issue is with your HTML/JS.
This only qualifies if you actually do not receive the data to the server end via post. If you do, than the problem is your PHP code. This is why you should write your code to not use JS and verify it as operational before you add the JS. As it is now, there's no great way to determine the cause. You can start in PHP world by adding a print_r($_POST); to the processing page. If it shows an offset for the 'intro', the problem is your PHP code. If it shows no offset for 'intro', than the problem is your HTML and JS code.

In either case this is not a Java problem. Since it cannot be tested stand alone in PHP, I'm moving this to the javascript forum. If it turns out a PHP issue, it can be moved back.

KazeFlame · 02-28-2013, 06:21 AM

I have tried to remove the JS and use only PHP and it works. NicEdit is working fine, I really think that the problem is on my JavaScript.

KazeFlame · 02-28-2013, 07:06 AM

After 1 hour of debugging, I found out that the JS Code should be this:

Code:

// JavaScript Document

$(document).ready(function(){
	$("#update-profile").submit(function(){
		$('.loading').css('display','inline');
		var action = $("#update-profile").attr('action');
		var nicE = new nicEditors.findEditor('intro');
		var intro = nicE.getContent();
		var form_data = {
			real_name: $("#real_name").val(),
			location: $("#location").val(),
			bday_month: $("#bday_month").val(),
			bday_day: $("#bday_day").val(),
			bday_year: $("#bday_year").val(),
			gender: $("#gender").val(),
			status: $("#status").val(),
			e_mail: $("#e_mail").val(),
			yahoo: $("#yahoo").val(),
			msn: $("#msn").val(),
			skype: $("#skype").val(),
			mobile: $("#mobile").val(),
			website: $("#website").val(),
			intro: intro,
			change: $("#change").val()
		};	
		$.ajax({
			type: "POST",
			url: action,
			data: form_data,
			success: function(response)
		{
		if(response == "success"){
			$('.message').css('display','block');
			$('.loading').css('display','none');
			$('.message').css('background-color','#DFFFDF');
			$('.message').css('border','1px solid #00A600');
			$(".message").html("Account Settings Updated.");
		}
		else if(response == "error1"){
			$('.message').css('display','block');
			$('.loading').css('display','none');
			$('.message').css('background-color','#FFEBE8');
			$('.message').css('border','1px solid #DD3C10');
			$(".message").html("Real Name is required. Please try again.");
		}
		else if(response == "error2"){
			$('.message').css('display','block');
			$('.loading').css('display','none');
			$('.message').css('background-color','#FFEBE8');
			$('.message').css('border','1px solid #DD3C10');
			$(".message").html("Location is required. Please try again.");
	}
}
});	
return false;
});
});

I Add to the code:
var nicE = new nicEditors.findEditor('intro');
var intro = nicE.getContent();

And I replace:
intro: $("#intro").val(),
Into:
intro: intro,