We Keep Coding

$ is not defined on my javascript with multiple function and ajax inside each function

Im am using Microsoft Edge in the scenario.
I as able to successfully do a single function with a ajax syntax with this code:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
However when I insert addition functions with their on ajax inside the function I am receiving $ is not defined error function monitorOccupy() as shown below:
<script>
document.getElementById("inputEventID").onchange = function () { myFunction() };
monitorOccupy();
monitorAvail();
function monitorOccupy() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#oSlots').html(response);
},
complete: function() {
setTimeout(monitorOccupy,1000);
}
});
}
function monitorAvail() {
}
function myFunction() {
$.ajax({
type: 'post',
url: 'webFetchMax.php',
data: {
eventID: form.eventID.value
},
success: function (response) {
$('#divSlots').html(response);
}
});
}
</script>
I have no idea my is this error is showing up on my console.

Call these functions as below
$(document).ready(function(){
monitorOccupy();
MonitorAvail();
});

Before posting this question the only jQuery file in my html file was jquery.min.js
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
After inserting another jquery.min.js file my problem is solved. This is what it looks now:
<script scr="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

unable to create dynamic events in fullcalendar

i have a situation in which i m trying to create events dynamically using the plugin fullcalendar im trying to create events with the help of the ajax call and the data retrieved is in the form of json
when i m trying to create events only event at index 0 is getting created rest of events are not created
the javascript code is as follows
function showData()
{
var ids = showValidData();
if (ids.length != 0)
{
$.ajax({
url: $("#base-url").val() ,
type: 'POST',
data: {'ids': ids},
dataType: 'json',
success: function (response)
{
var data = response.data;
var myevents = [];
if (response.success)
{
$(data).each(function (index, value) {
myevents.push({
title: value.layoutName,
start: value.startDate,
end: value.endDate
});
});
console.log(myevents);
$(".fc-event-container").click();
$('#calendar-example-1').fullCalendar({
events: myevents,});
return;
}
}
});
}
}

Set events when initializing FullCalendar - define the url of the script that returns a json of events from your database (https://fullcalendar.io/docs/event_data/events_function/). If you want to dynamically refresh the calendar , you can add a setInterval ontop:
$(document).ready(function(){
setInterval(function(){$('#calendar').fullCalendar('refetchEvents')}, 30000);
$("#calendar").fullCalendar({
...
events: {
url: 'script.php',
type: 'POST',
data: {
data1: x,
data2: y
},
success : function(response){
// do something
},
}
});
});

Open Javascript Id on a new window

Am trying to open an id on a new window, this is my code:
<script type="text/javascript">
$(document).ready(function () {
$('.myButton').click(function () {
$.ajax({
type: "GET",
url: $(this).parent().data("url"),
data: { callNumber: $(this).parent().data("callno") },
success: function (data) {
$("#CallDetail").html(data);
},
});
});
});
</script>
When i click .myButton class it opens the id:
<div id="CallDetail"></div>
thats located on the home page.
What i need is to open on a new window, i have tried doing this via the link :
<div data-callno='#parts.Call_Num' data-url="#Url.Action("GetCallInfo", "CallHandling" , new {target = "_blank"})">
<div class="myButton toolbarIcon">
<div class="toolbarIconText">View</div>
</div>
But no luck, at the moment it just opens in the same page i am doing this, the problem is am getting data called in the JavaScript so its trickier then i imagined. any ideas?

You can use jQuery's .find to search the returned HTML for a selector:
$(document).ready(function () {
$('.myButton').click(function () {
$.ajax({
type: "GET",
url: $(this).parent().data("url"),
data: { callNumber: $(this).parent().data("callno") },
success: function (data) {
$(data).find('#CallDetail');
},
});
});
});

Issues with jquery html()

Having some issues properly getting the manipulated data from an element.
Everywhere on the internet doesn't seem to cover such a simple question with a simple answer. Please help.
I have manipulated an element with a returning ajax request:
$("#last_comment_added").html("1457856458")
now my function on the page:
jQuery(document).ready(function($) {
var post_slug = $("#post_slug").html();
var last_comment_added = $("#last_comment_added").text();
if (post_slug && last_comment_added) {
setInterval(function() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": last_comment_added
},
cache: false,
success: function(html) {
eval(html)
}
});
}, 10000);
}
});
I get the old data from the element, not the new ajax "1457856458" data.
Please help.

If I understand your problem right it's just that you create this variable called last_comment_added and expect it to be continually updated, you set it once to be the text of the last_comment_added, it's never updated in your interval function. Here's a change that should make it work better for you.
jQuery(document).ready(function($) {
var post_slug = $("#post_slug").html();
if (post_slug && last_comment_added) {
setInterval(function() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": $("#last_comment_added").text()
},
cache: false,
success: function(html) {
eval(html)
}
});
}, 10000);
}
});

Don't use eval.
Try
$(document).ready(function() {
var post_slug = $("#post_slug").html();
var last_comment_added = $("#last_comment_added").html();
if (post_slug && last_comment_added) {
setInterval(_update, 10000);
}
});
function _update() {
$.ajax({
type: "POST",
url: "ajax_comments.php",
data: {
"task": "updates",
"post_slug": post_slug,
"last_comment_added": last_comment_added
},
cache: false,
success: function(data) {
$("#last_comment_added").html(data)
}
});
}
and you return from PHP only NEW data. (something like: echo '1457856458';)

how to call a function after appending it in jquery

i am appending a div using ajax and alnog with that div a function (it's a time ago function) the function needs to be called as soon as the div is appended I've tried all possible solutions but none works
my function (located in processor.php page)
<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
}
})
})
})
</script>
the function
<script>
function ago()
{
//codeblock
}
</script>
my question:how do i call the function ago as soon as the ajax was success is appended.ive tried window.onLoad etc...

<script>
$(document).ready(function () {
$('.post_the_stat').click(function(event) {event.preventDefault();
$.ajax({
type: "POST",
url: "addition_life_text.php",
data: 'final_text='+ fin_text +'&priv='+ priv + '&post_time='+post_time ,
success: function(data) {
$(".main_container").prepend(data);
ago();
}
})
})
})
</script>
Please try above. Hopefully this will work

Try this
success: function(data) {
$(".main_container").prepend(data).go();
}
})