Develop Reference

Run a URL without leaving the page using AJAX / Laravel Project

I currently use the following code so when the user clicks the play button in the picture below, it runs the route that processes that lines function.
$(function () {
$('#g{{$job->id}}').on('click', function () {
var Status = $(this).val();
$.ajax({
url: '{{ url('/jobs/run', $job->calltoken) }}'
});
});
});
I loop through all the rows in the table and create this line of code for each one at the bottom of my view.
My problem now is that I have a user that has over 1000 rows and its hit and miss if it works and the page is slow and over 30k line of html.
Is there a simpler way I can do it where it only requires one function for all rather than a function for each?
If anyone can point me in the right direction that would be awesome..

Dropdown jQuery box to close after clicking outside

I'm looking to get that a dropdown box closes after clicking outside of it with jquery. I've tried the below code already but seems something is not working correctly, so when I remove the part from "body: not(ul.nav li.dropdown)", the script executes well but it doesn't close outside obviously, and when I insert the close part, the script doesn't execute properly. What can be wrong in this syntax or in code that is avoiding both closing and execution to work correctly together?
$(document).ready(function(){
jQuery('ul.nav li.dropdown').click(function() {
jQuery(this).find('.dropdown-menu').fadeIn();
$("#actionStatus").html("");
});
$("body:not(ul.nav li.dropdown)").hover(function(){
$("ul.nav li.dropdown").find('.dropdown-menu').fadeOut();
});
$("#btnSendOption").click(function(){
var data = $("#frmUserOption").serialize();
$.ajax({
url: "/users.php",
data: data,
success: function( data ) {
$("#actionStatus").html("");
$("input[type='radio']").attr('checked', false);
$('.dropdown-menu').delay(1000).fadeOut();
},
error: function(data) {
$("#actionStatus").html("<div class='alertMsg alertMsg-danger'>Error, try again later</div>");
}
});
});
});
Thank you in advance

jQuery click event interrupts setInterval

I'm creating script where I use AJAX from jQuery. I've got a problem, as on my website I've got hidden object. Moreover I use setInterval to frequently refresh a piece of my script. Everything works well, but until I click on link to set this hidden object to be visible. When I click on link and make object visible, setInterval stops refreshing page. This is my code to AJAX:
$(document).ready(setInterval(function() {
$.ajax({
type: "POST",
url: "score.php",
success: function(html){
$("#loadplace").hide().show().html(html);
}
});
return false;}, 60000));
and this is code for link:
$('div#bar a#squad1').click(function(e) {
e.preventDefault();
$('div#s1 table.events1').hide();
$('div#s1 table.index_players1').fadeIn();
});
$('div#bar a#events1').click(function(e) {
e.preventDefault();
$('div#s1 table.index_players1').hide();
$('div#s1 table.events1').fadeIn();
});
is there any solution in jQuery for my problem ?
P.S. I hope you understand what I wrote, I know that my English is not so good as I wish it to be.

How to reload/rfresh a div on page load?

I have a div block i want it to be automatically referrshed once or twice during when page is loading .
How can refresh/reload the div once or twice using jquery or javascript?

Where is it gonna reload from, what does the block look like ?
I would use jQuery ajax and reload content into the the div
but thats a much as I can say without having any idea about what the content is to look like , what the current content looks like or what you would receive back from an ajax call
hth

I don't know exactly what you mean but try to look this example
$(function () {
setInterval(function () {
$.ajax({
type: "POST",
cache: false,
url: "Ajax/funk.cshtml",
dataType: "text",
success: function (data) {
$('#divId').text(data);
alert('Load completed.');
}
});
}, 2000);
});
here:
setInterval performs the action every 2000 milliseconds;
jax/funk.cshtml - the file which will give you some text as a result(it may contain only #DateTime.Now for example in asp.net and will return time)
if you want renew the div only once you may use the same function for $(#somedive).onload();
or something like that.
Hope it will help!

jQuery ajaxStart, ajaxStop Awkward Behavior

I've made this to illustrate my issue:
http://jsfiddle.net/michaelhart/mUMHZ/
(Only tested in Chrome.)
In summary: I don't want the ajax activity indicator to go crazy when users tab away and come back.
I've tried
$("#notification").clearQueue();
$("#notification").hide();
$("#notification").clearQueue();
$("#notification").show();
before
$('#notification').fadeOut();
but that just makes the indicator stop functioning completely after a tab out.
I'm not sure if this is a bug in the way Google Chrome handles inactive tabs or in the way jQuery works when Chrome puts it to "sleep."
Any ideas?

The bug is noted in the jQuery bug tracker. The suggested fix is to, instead of using setInterval blindly, use the callback function of the animation to trigger restart with a setTimeout.
E.g.
$(document).ready(function() {
fetchAjax();
});
function fetchAjax() {
var randomnumber=Math.floor(Math.random()*10001);
$('#number').html(randomnumber);
$.ajax({
type: 'POST',
url: '/echo/html/',
data: {
'html': randomnumber
},
dataType: 'text/html'
});
}
$(document).ajaxStart(function(){
$('#notification').fadeIn();
}).ajaxStop(function(){
$('#notification').fadeOut(function(){
setTimeout(function(){ fetchAjax(); }, 5*1000);
});
});