how to call a function after appending it in jquery - javascript

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();
}
})

Related

How to show/hide div using ajax?

At the moment I can click on button to get data and show div with comment replies, something like on Youtube, but I want to make it disappear by clicking again. Is this possible this way?
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('id');
$.ajax({
url: $(this).attr("data-href"),
type: 'get',
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}
})
});
});
I tried to add display: none and then change it to block, or setting value='show/hide' and then use toggle('show') but it doesn't work. Thanks for any help in advance.
$(document).ready(function () {
$(".showReplies").click(function () {
let id = $(this).attr('data-id');
$(`#${id} .replies`).html("Loading..");
setTimeout(() => {
$.ajax({
url: `https://jsonplaceholder.typicode.com/todos/${id}`,
type: 'get',
success: function (data) {
$(`#${id} .replies`).text(JSON.stringify(data));
}
})
}, 1000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1">
<div class="replies"></div>
<button class="showReplies" data-id="1">Load Replies</button>
</div>
<div id="2">
<div class="replies"></div>
<button class="showReplies" data-id="2">Load Replies</button>
</div>
Here is a example, but your code looks wrong. it does not make sense to me.
beforeSend: function(data) {
$("#hideID").hide();
},
success: function (data) {
console.log(data);
console.log(id)
$(`#${id}.replies`).html(data);
}

$ 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>

MVC Javascript table reload issue

I have a table that is being populated dynamically, and a reload script that refreshes it ever 60 seconds.
<script type="text/javascript" language="javascript">
window.setInterval(function () {
$('#divGrid').load('Home/Index #divGrid>table');
}, 60000);
</script>
I also have a Javascript that calls a partial view on table row click:
<script type="text/javascript" language="javascript">
function showOpenTrData() {
$('#OpenTickets tbody tr').click(function () {
$.ajax({
url: 'Home/TicketDetails/' + this.cells.ticketID.innerText,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
});
}
function showClosedTrData() {
$('#ClosedTickets tbody tr').click(function () {
$.ajax({
url: 'Home/TicketDetailsClosed/' + this.cells.ticketID.innerText,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
});
}
</script>
I had it at first without an onclick function but then upon reload it would stop working so I changed it to onclick function, however first time after reload I have to double click the row and after that for the period of 60 seconds till next reload its all fine, after it reloads I have to double click the first time again. Its driving me up the wall.
Please help!
HTML
<table class="table" id="OpenTickets" style="overflow-y:scroll;width:70%;float:left; margin-top:-25px; display:block;">
<tbody>
#foreach (var item in Model.ticketModel.OrderByDescending(x => x.ticket.ID).Where(x => x.ticket.StatusID == 1))
{
<tr onclick="showOpenTrData()">
<td class="columnID" id="ticketID">
#Html.DisplayFor(modelItem => item.ticket.ID)
</td>
<td class="columnSummary">
#Html.DisplayFor(modelItem => item.ticket.Summary)
</td>
<td class="columnAssignee" id="ajaxTest">
#if (item.ticket.Assigned_to_UserID == null || item.ticket.Assigned_to_UserID == 0)
{
#Html.Label("Unasigned")
}
else
{
#Html.DisplayFor(modelItem => item.assignedUser.First_name)
<text> </text>
#Html.DisplayFor(modelItem => item.assignedUser.Last_name)
}
</td>
<td style="font-size:11px; width:10%" class="columnUpdated">
#if ((item.ticket.updated_at == null))
{
#Html.DisplayFor(modelItem => item.ticket.Created_at)
}
else
{
#Html.DisplayFor(modelItem => item.ticket.updated_at)
}
</td>
</tr>
}
</tbody>
</table>
i got it - if anyone else struggles here is the breakdown.
.load method renders any javascript useless as its not part of the same instance any more, hovever on click is a solution but how do you get the object reference?
you pass this in the on click function.
onclick="showTableData(this)"
then you can use the passed event to acquire data from it
cheers
The basic problem here is that you are mixing onclick=... with jQuery bindings .click(...). It is possible to use both on the same page but it becomes confusing and is harder to maintain: Pick one.
The easiest thing (based on your current code) is to kill the jQuery bindings. Try this:
<script type="text/javascript" language="javascript">
function showOpenTrData(ptr) {
$.ajax({
url: 'Home/TicketDetails/' + ptr.cells.ticketID.innerText,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
}
function showClosedTrData(ptr) {
$.ajax({
url: 'Home/TicketDetailsClosed/' + ptr.cells.ticketID.innerText,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
}
</script>
Each time the showOpenTrData or showClosedTrData was running, it was adding another jquery bind. If you open your console and check the networks tab you'll see that the ajax functions are then being run multiple times with one click (after the second click).
If you want to just use jQuery, then use this:
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#OpenTickets tbody tr').click(function () {
var ticketId = $(this).find('td').text();
$.ajax({
url: 'Home/TicketDetails/' + ticketId,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
});
$('#ClosedTickets tbody tr').click(function () {
var ticketId = $(this).find('td').text();
$.ajax({
url: 'Home/TicketDetailsClosed/' + ticketId,
data: {},
type: 'GET',
datatype: 'json',
success: function (response) {
$("#TicketDetails").html(response)
},
error: {}
});
});
}
</script>
Also, delete the onclick=... section in the html or you'll get javascript errors because it is looking for a function that doesn't exist.
EDIT:
I added in the ticketId you needed.

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');
},
});
});
});

My draggable function has broken

I had a draggable function and it was working nicely. But when I add NO-2 function, my draggabe function and my close button(button which included the div) broke down. Need help.
NO-1: Draggable function:
$(function () {
$('#draggable').draggable({
containment: 'window'
});
$('#draggable').draggable({
handle: '.yeniyorum_baslik'
});
});
NO-2: This function for post data without refresh the available page.
function kayitol() {
$('.yeniyorum_div, .arka_fon').hide() $('#urunsayfaid').removeClass('noscroll');
$('.yorum_basarili').fadeIn() $('.yorum_basarili').fadeOut(4000) var veriler = $('.yorumform').serialize();
$.ajax({
type: "POST",
url: "yorum_ekle.php",
data: veriler,
})
};
try
function kayitol() {
$('.yeniyorum_div, .arka_fon').hide() $('#urunsayfaid').removeClass('noscroll');
$('.yorum_basarili').fadeIn();
$('.yorum_basarili').fadeOut(4000);
var veriler = $('.yorumform').serialize();
$.ajax({
type: "POST",
url: "yorum_ekle.php",
data: veriler,
})
};

Categories