I wrote a code using jQuery plugin fullcalendar, and everything worked just fine, until I send an $.ajax request in the eventClick.
I tried to alert something in the eventClick and it worked, but the ajax request just doesn't work.
js code:
!function($)
{
$(document).ready(function() {
$("#eventDialog").dialog({
autoOpen : false,
modal : true
});
var date = new Date();
var d = date.getDay();
var m = date.getMonth();
var y = date.getFullYear();
$("#calendar").fullCalendar({
theme : true,
header : {
left : 'next,prev today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
editable : false,
events : [
<?php
while ($event = mysql_fetch_array($selectevents))
{
$startd = explode(".", $event['start']);
$endd = explode(".", $event['end']);
$starth = explode(":", $event['starth']);
$endh = explode(":", $event['endh']);
?>
{
id : <?php echo $event['id']; ?>,
title : '<?php echo stripslashes($event['title']); ?>',
<?php
if ($event['allday'] == 1)
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>)
<?php
}
else
{
?>
start : new Date(<?php echo $startd[2]; ?>,<?php echo $startd[1]-1; ?>,<?php echo $startd[0]; ?>,<?php echo $starth[0]; ?>,<?php echo $starth[1]; ?>),
end : new Date(<?php echo $endd[2]; ?>,<?php echo $endd[1]-1; ?>,<?php echo $endd[0]; ?>,<?php echo $endh[0]; ?>,<?php echo $endh[1]; ?>),
allDay : false
<?php
}
?>
}
<?php
$evNum--;
if ($evNum > 0)
echo ",";
}
?>
],
eventClick : function(event) {
var eid = event.id;
$.ajax({
type : "GET",
url : "getEvent.php",
data : "id=" + eid,
succuss : function(msg) {
var title = $("event title", msg).text();
var description = $("event description", msg).text();
var start = $("event start", msg).text();
var end = $("event end", msg).text();
var starth = $("event starth", msg).text();
var endh = $("event endh", msg).text();
$("#eventDialog").attr("title", title);
$("#eventDialog #edDescription").html(title);
eventDialog.dialog("open");
}
});
}
});
});
}(jQuery);
getEvent.php
$id = htmlspecialchars(mysql_real_escape_string($_GET['id']));
$selectevent = mysql_query("SELECT * FROM `calendar` WHERE `id`='$id'") or die(mysql_error());
$event = mysql_fetch_array($selectevent);
header("Content-Type: text/xml; charset=utf-8");
echo '<?xml version="1.0" encoding="utf-8" ?>';
echo "<event>";
echo "<id>".$event['id']."</id>";
echo "<title>".stripslashes($event['title'])."</title>";
echo "<description>".$event['description']."</description>";
echo "<start>".$event['start']."</start>";
echo "<end>".$event['end']."</end>";
echo "<starth>".$event['starth']."</starth>";
echo "<endh>".$event['endh']."</endh>";
echo "</event>";
Can anybody point out the problem?
Thank's!
succuss??, i guess is this your problem , it should be "success"
Change succuss to success in your code it must be a typo.
Since jQuery $.ajax did not find the success handler in its settings it didn't do anything.
Related
I'm new here and I need help with a PHP code.
I want to transform a radio button into a checkbox, make it calculate the fee depending on how much checkboxes are checked, and to transmit the checked values to the predefined database.
My code only takes the one predefined value for fee an doesn't actually adds them up when I click on the other checkbox. I tried everything but with no success. Here is the original unchanged code:
<script src="<?php echo URL_FRONT_JS;?>jquery.js"></script>
<script>
function get_tutor_course_details()
{
course_slug = $('#course_slug option:selected').val();
selected_date = $('#start_date').val();
if(!course_slug || !selected_date) {
$('#fee').text('');
$('#duration').text('');
$('#days_off').text('');
$('#content_li').remove();
$('#time_slot_div').text('<?php echo get_languageword("please_select_course_and_date_first"); ?>');
return;
}
$.ajax({
type: "POST",
url: "<?php echo URL_HOME_AJAX_GET_TUTOR_COURSE_DETAILS; ?>",
data: { "course_slug" : course_slug, "tutor_id" : <?php echo $row->id; ?>, "selected_date" : selected_date },
cache: false,
beforeSend: function() {
$('#time_slot_div').html('<font color="#5bc0de" size="6"> Loading...</font>');
},
success: function(response) {
if(response == "") {
$('#fee').text('');
$('#duration').text('');
$('#days_off').text('');
$('#content_li').remove();
$('#time_slot_div').html('<?php echo get_languageword("no_slots_available."); ?> <?php echo get_languageword("click_here_to_send_me_your_message"); ?>');
$('#request_tutor_btn').slideUp();
} else {
var fee_duration = response.split('~');
var fee = fee_duration[0];
var duration = fee_duration[1];
var content = fee_duration[2];
var time_slots = fee_duration[3];
var days_off = fee_duration[4];
$('#fee').text(fee +'€');
$('#duration').text('EUR');
if(content) {
$('#content_li').remove();
$('#course_li').after('<li id="content_li"><?php echo get_languageword("course_content"); ?><p>'+content+'</p></li>');
}
time_slot_html = "";
if(time_slots != "")
time_slots = time_slots.split(',');
total_available_timeslots = time_slots.length;
if(total_available_timeslots > 0) {
for(i=0;i<total_available_timeslots;i++) {
check_radio = "";
if(i == 0)
check_radio = 'checked = "checked"';
time_slot_html += '<li><div><input id="radio1'+i+'" type="radio" name="time_slot" value="'+time_slots[i]+'" '+check_radio+' ><label for="radio1'+i+'"><span><span></span></span>'+time_slots[i]+'</label></div></li>';
}
$('#time_slot_div').html(time_slot_html);
$('#request_tutor_btn').slideDown();
} else {
$('#time_slot_div').html('<?php echo get_languageword("no_slots_available."); ?> <?php echo get_languageword("click_here_to_send_me_your_message"); ?>');
$('#request_tutor_btn').slideUp();
}
}
}
});
}
My problem is about events for calendar, precisely speaking i dont know how to dynamically add data for events here is my code in view file
<div>
<?php $message = Message::model()->findAll(); ?>
<?php foreach($message as $messag): ?>
<?php $names[] = $messag['contacts']; ?>
<?php $date[] = $messag['send_datetime']; ?>
<?php endforeach; ?>
</div>
<script>
$(document).ready(function() {
// page is now ready, initialize the calendar...
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: [
{
title: '<?php echo $names[0]; ?>',
start: '<?php echo $date[0]; ?>',
url: 'view/1'
},
{
title: '<?php echo $names[1]; ?>',
start: '<?php echo $date[1]; ?>',
url: 'view/2'
},
{
title: '<?php echo $names[2]; ?>',
start: '<?php echo $date[2]; ?>',
url: 'view/3'
},
{
title: '<?php echo $names[3]; ?>',
start: '<?php echo $date[3]; ?>',
url: 'view/4'
},
]
})
$('#calendar').fullCalendar('changeView', 'agendaWeek');
});
</script>
<div id='calendar'>
</div>
i dont know how to code it in such a way that it will add as many events as i have data in database. i would be very grateful if someone could help
I would load the events by ajax. You basically have two parts. The one file with datatable/javascript and the other file is the data source. It is a php file that gets all the data from database and outputs the events in json format.
to get the events from a the file use fullCalendar like this (simplified version):
$('#calendar').fullCalendar({
events: {url: 'myevents.php'}});
and in your myevents.php you make the usual database requests and out put your data like this:
<?php
//Do the Database stuff here...
//Here is a sample data for two events:
$events = array();
$agenda['allDay'] = true;
$agenda['start'] = '2014-08-25 12:00:00';
$agenda['end'] = '2014-08-30 12:00:00';
$agenda['title'] = "Hello World";
$agenda['id']= "1";
$events[] = $agenda;
$agenda['allDay'] = false;
$agenda['start'] = '2014-08-27 12:00:00';
$agenda['end'] = '2014-08-27 16:30:00';
$agenda['title'] = "Blah";
$agenda['id']= "2";
$events[] = $agenda;
echo json_encode($events);
exit();
I have a form that using ajax to post the comment to video_comment.php then show up the comment live on video page.
This is my jquery code:
$("input[id*='post_video_playallcomment_']").livequery('click', function(event) {
event.preventDefault();
var video_msg = $("#post_message");
var input_id = $(this).attr('id');
var id_split = input_id.split('_');
var video_id = id_split[3];
var comment = $("textarea[id='video_comment']").val();
var response_messages = '#video_response';
if ( comment == '' ) {
video_msg.fadeIn();
return false;
}
video_msg.hide();
user_posting(response_messages, '<?php echo $lang['600']; ?>', 1);
reset_chars_counter();
$.post(base_url + '/video_comment.php', { video_id: video_id, comment: comment },
function(response) {
if ( response.msg != '' ) {
$(response_messages).hide();
user_posting(response_messages, response.msg);
$("textarea[id='video_comment']").val('');
} else {
$(response_messages).hide();
user_response(response_messages, '<?php echo $lang['587']; ?>');
$(".no_comments").hide();
$("textarea[id='video_comment']").val('');
var bDIV = $("#comments_delimiter");
var cDIV = document.createElement("div");
$(cDIV).html(response.code);
$(bDIV).after(cDIV);
}
}, "json");
});
On video_comment.php, this is the response.code to show up the comment live on video page.
echo 'text...
echo '<div id="commentplayer"></div>';
echo '<script type="text/javascript">';
echo 'jwplayer("commentplayer").setup({';
echo 'file: "...url",';
echo 'width: "300",';
echo 'height: "225",';
echo 'provider: "http",';
echo 'startparam: "start",';
echo 'wmode: "transparent",';
echo 'controls: "true",';
echo 'stretching: "uniform",';
echo 'primary: "flash",';
echo 'autostart: "false",';
echo 'ga: {}';
echo '});';
echo '</script>';
echo 'text...
I have no problem to get 'text...', but i can't get '<script type="text/javascript">function...</script>' to show up live on video page.
Help please...
instead of placing javascript code in the php return, why dont you place it in the .post response?
$("input[id*='post_video_comment']").click(function() {
$.post('video_comment.php', function(response) {
$('#comment').html(response.code);
//place javascript code here
}, "json");
});
or placing a onload before your js code
$str = '<div id="commentplayer"></div>
<script type="text/javascript">
window.onload=(function() {
jwplayer("commentplayer").setup({
file: "...url",
width: "300",
height: "225",
provider: "http",
startparam: "start",
wmode: "transparent",
controls: "true",
stretching: "uniform",
primary: "flash",
autostart: "false",
ga: {}
});
});
</script>';
echo $str;
I want to check a php variable in javascript and create an Array accordingly.
I tried this, but it's not working:
<script language="Javascript" type="text/javascript">
var phpvar1_large = <?php echo $var1_large ?>;
var phpvar2_large = <?php echo $var2_large ?>;
var phpvar3_large = <?php echo $var3_large ?>;
var phpvar4_large = <?php echo $var4_large ?>;
if(!phpvar1_large){
var imgArray = new Array(
'<?=$main_img; ?>'
);
}else if(!phpvar2_large){
var imgArray = new Array(
'<?=$main_img; ?>',
'<?=$var1_large; ?>'
);
}else if(!phpvar3_large){
var imgArray = new Array(
'<?=$main_img; ?>',
'<?=$var1_large; ?>',
'<?=$var2_large; ?>',
'<?=$var3_large; ?>'
);
}else if(!phpvar4_large){
var imgArray = new Array(
'<?=$main_img; ?>',
'<?=$var1_large; ?>',
'<?=$var2_large; ?>',
'<?=$var3_large; ?>'
);
}else if(phpvar4_large){
var imgArray = new Array(
'<?=$main_img; ?>',
'<?=$var1_large; ?>',
'<?=$var2_large; ?>',
'<?=$var3_large; ?>',
'<?=$var4_large; ?>'
);
}
</script>
However, if I don't use an if-statement, the array is created correctly:
<script language="Javascript" type="text/javascript">
var imgArray = new Array(
'<?=$main_img; ?>',
'<?=$var1_large; ?>',
'<?=$var2_large; ?>',
'<?=$var3_large; ?>',
'<?=$var4_large; ?>'
);
</script>
I appreciate your help very much!
I strongly recommend simply JSON-encoding your array.
$imgArray = array('img1.jpg', 'img2.jpg', etc);
echo 'var imgArray = ' . json_encode($imgArray);
I'm pretty sure your problem is that the boolean values you are writing via php are not being interpreted as boolean but strings, that is why it is always evalued as false.
you should write var phpvar1_large = <?php echo json_encode($var1_large); ?>;
You are welcome!
I am trying to append new comment to the old comment box .
Here is my code , Dont know why its not working
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$(".bsubmit").click(function () {
var id = $(this).parent().parent().attr("id");
var comm = document.getElementById(id).getElementsByClassName("commentadd")[0].value;
$.ajax({
type: "POST",
url: "comment.php",
data: {
id: id,
comm: comm
},
cache: false,
success: function () {
$('.addcomment').slideUp('slow', function () {
// POSTED IN DATABASE SUCCESS NOW APPEND The comment with other COMMENTS
document.getElementById(id).getElementsByClassName(".itemcomment").append('<div class="comm">
<a href="profile.php?id=<?php echo $_SESSION['
fbid ']; ?> class="comm_img"><img src=" <?php echo $_SESSION['
smallest ']; ?> width="50" height="50" /></a>
<p width="50"><strong>
</strong></p>
</div>');
});
$('#load').fadeOut();
}
});
return false;
});
});
});
</script>
I think the error is in the code inside the "slideUp" callback, so I think the correct way to do it is:
Using regular JavaScript:
$('.addcomment').slideUp('slow', function () {
var elem = getElementById(id).getElementsByClassName(".itemcomment")[0],
div = document.createElement("div"),
a = document.createElement("a"),
p = document.createElement("p"),
img = document.createElement("img"),
strong = document.createElement("strong");
div.className = "comm";
a.className = "comm_img";
a.href = "profile.php?id=<?php echo $_SESSION['fbid ']; ?>";
img.src = "<?php echo $_SESSION['smallest ']; ?>";
img.width = "50";
img.height = "50";
p.width = "50";
p.appendChild(strong);
a.appendChild(img);
div.appendChild(a);
div.appendChild(p);
elem.appendChild(div);
});
Using JQuery:
$('.addcomment').slideUp('slow', function () {
var html = '<div class=comm>';
html += '<a href="profile.php?id=' + "<?php echo $_SESSION['fbid'];?>" + 'class=comm_img>';
html += '<img src="' + "<?php echo $_SESSION['smallest']; ?>" + 'width="50" height="50" /></a>';
html += '<p width="50"><strong></strong></p></div>';
$(".itemcomment", "#"+id).append(html);
});
Hope it helps!