How to call function inside ajaxComplete from document ready in jquery? - javascript

I want to execute function inside .ajaxComplete() from document ready.
$(function() {
$(document).on('click', '.woof_radio_label', function(e) {
if($(this).siblings('.woof_radio_term').is(':checked')) {
$('.page-secondary-content').removeClass('open');
$('.page-primary-content').removeClass('close');
$(this).siblings('.woof_radio_term_reset').click();
refineUrl();
} else {
$('.page-primary-content').addClass('close');
$('.page-secondary-content, .bottom-content').addClass('open');
}
});
});
$(document).ajaxComplete(function() {
function refineUrl() {
console.log('it works');
}
});
I am prompted with an error below:
Uncaught ReferenceError: refineUrl is not defined
at HTMLLabelElement. (scripts-custom.js?ver=4.9.7:15)
at HTMLDocument.dispatch (jquery.js?ver=1.12.4:3)
at HTMLDocument.r.handle (jquery.js?ver=1.12.4:3)
When I click the class woof_radio_label it will trigger an ajax event(Product Filter), I want to call a function on ajaxComplete().
Do you know how to do this?

You should declare function refineUrl() globally and then it can be called from anywhere. From ajaxComplete and from document.ready as well.
Like:
$(function () {
$(document).on('click', '.woof_radio_label', function (e) {
if ($(this).siblings('.woof_radio_term').is(':checked')) {
$('.page-secondary-content').removeClass('open');
$('.page-primary-content').removeClass('close');
$(this).siblings('.woof_radio_term_reset').click();
refineUrl();
} else {
$('.page-primary-content').addClass('close');
$('.page-secondary-content, .bottom-content').addClass('open');
}
});
});
$(document).ajaxComplete(function () {
//DO another stuff
});
function refineUrl() {
console.log('it works');
}

Declare your refineUrl() at the top of your script to prevent from such type of errors like,
function refineUrl() {
console.log('it works');
}
$(function(){
.....
});
$(document).ajaxComplete(function() {
refineUrl();
});

Related

Javascript jQuery Error Overload Ajax Request?

I have two buttons. One Button refreshes the table (html table) with a ajax php request. And there is another button to refresh it every 10 seconds. If I try to access the document it throw a lot of errors that I don't know about how to solve the problem.
My Javascript Code is here:
<script>
$(document).ready(function(){
$("#reloadLoginActivities").click(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(setInterval(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
},10000);
}));
});
</script>
I get a lot of errors in : https://prnt.sc/pp33s1
My jQuery File is here: https://www.prodigy-official.de/resources/js/jquery-3.3.1.min.js
I think that your formation is not correct.
$(document).ready(function(){
$("#reloadLoginActivities").click(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(setInterval(function(){
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
});
}, 10000));
});
$(document).ready(function () {
$("#reloadLoginActivities").click(function () {
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities"
});
});
$("#liveUpdateLoginActivities").click(liveActivityHandler);
function liveActivityHandler () {
$("#liveUpdateLoginActivities").text("Stop Live Update");
setInterval(function () {
$("#loginActivities").load("https://www.prodigy-official.de/resources/php/website_utilities.php", {
function: "loadTenLatestLoginActivities2"
});
}, 10000);
}
});

(document).ready is a global scope?

Guys i have this function inside my script.js:
$(document).ready(function() {
function alert() {
alert('AAAAAAAA');
}
});
And i am trying to call here in my index.html:
$('.something').on('click', function() {
e.preventDefault();
alert();
});
But is showing my this error - alert is not defined.
But when i take off the document ready in the external script, the click handler will work. Why is that?
The document ready is creating a separate scope?
Using $(document).ready() creates a new function scope (note the function() after the .ready), so when you call
$(document).ready(function() {
function alert() {
alert('AAAAAAAA');
}
});
alert is only defined within the document.ready block. There are two ways to solve this issue:
Define the function outside of the document.ready block:
function customAlert() {
alert('AAAAAAAA');
}
Attach the function to the window object:
$(document).ready(function() {
window.customAlert = function() {
alert('AAAAAAAA');
};
});
Include the click event into the document.ready
Check it here http://jsfiddle.net/fbrcm45q/1/
$(document).ready(function() {
function showAlert() {
alert('AAAAAAAA');
}
$('.something').on('click', function(e) {
e.preventDefault();
showAlert();
});
});
First of all e.preventDefault is a function so you have to add braces at the end:
e.preventDefault()
Second alert is a function in javascrpt, so you need to rename your function to something else, for example:
$(document).ready(function() {
function special_alert() {
alert('AAAAAAAA');
}
});
and:
$('.something').on('click', function() {
e.preventDefault();
special_alert();
});

How to call javascript function from ScriptManager.RegisterStartupScript?

I have the following javascript code:
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
// THIS IS FOR HIDE ALL DETAILS ROW
$(".SUBDIV table tr:not(:first-child)").not("tr tr").hide();
$(".SUBDIV .btncolexp").click(function () {
$(this).closest('tr').next('tr').toggle();
//this is for change img of btncolexp button
if ($(this).attr('class').toString() == "btncolexp collapse") {
$(this).addClass('expand');
$(this).removeClass('collapse');
}
else {
$(this).removeClass('expand');
$(this).addClass('collapse');
}
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
});
</script>
I want to call expand_all function via code-behind .
I know I can use something like this, but it does not work and I don't understand used parameters:
ScriptManager.RegisterStartupScript(Me, GetType(String), "Error", "expand_all();", True)
Can you help me?
Because you have your expand_all function defined within anonymous $.ready event context. Put your code outside and it should work.
function expand_all(){
alert('test B');
}
$(document).ready(
function () {
// this won't work
function expand_all() {
alert('test A');
};
});
// will show test B
expand_all();
check this:
http://jsfiddle.net/jrrymg0g/
Your method expand_all only exists within the scope of the function inside $(document).ready(...), in order for you to call it from ScriptManager.RegisterStartupScript it needs to be at the window level, simply move that function outside the $(document).ready(...)
<script type="text/javascript" language="javascript">
$(document).ready(
function () {
....
});
function expand_all() {
$(this).closest('tr').next('tr').toggle();
};
</script>

Migrating js file from prototype to jQuery does not work

I'm migrating files from prototype to jQuery.
prototype:
function hideEditableMarkers() {
$$('.edit_marker').each(function(el) {
el.hide();
});
$$('.show_marker').each(function(el) {
el.show();
});
}
Event.observe(window, 'load', hideEditableMarkers);
jQuery:
function hideEditableMarkers() {
jQuery('.edit_marker').each(function(el){
el.hide();
});
jQuery('.show_marker').each(function(el){
el.show();
});
}
jQuery(document).ready(hideEditableMarkers());
I don't know why it does not work.
The first parameter of the each callback function is the index of the element not the reference to it
so here is the jquery code
function hideEditableMarkers() {
$('.edit_marker').each(function(idx,el){
$(el).hide(); // You may use 'this' variable in here as it points to the current element as well
});
$('.show_marker').each(function(idx,el){
$(el).show();
});
}
This:
jQuery(document).ready(hideEditableMarkers());
should be:
jQuery(document).ready(hideEditableMarkers);
You need to pass the function reference to ready so it's executed as the callback handler for the DOM ready event. What you're currently doing is executing the function immediately (when the elements don't exist), then passing the return from that function (nothing) as the callback for .ready().
use $(this) inside each so it takes the current element... what you have is index and use index as jquery selector el.hide()
try this
function hideEditableMarkers() {
jQuery('.edit_marker').each(function(el){
$(this).hide();
});
jQuery('.show_marker').each(function(el){
$(this).show();
});
}
jQuery(document).ready(function(){
hideEditableMarkers() ;
});
//or
jQuery(document).ready(hideEditableMarkers);
I believe a function should be reusable:
/*global jQuery */
function toggleMarkers (hideSelector, showSelector) {
jQuery(hideSelector).each(function () {
jQuery(this).hide();
});
jQuery(showSelector).each(function () {
jQuery(this).show();
});
}
jQuery(document).ready(function ($) {
toggleMarkers('.edit_marker', '.show_marker');
});

jQuery: Execute function on document.ready() and window.load()

I'm trying to execute a jQuery function twice. Once when the DOM is ready, and then again when the page loads. Most of the time the second call isn't necessary, but every once in a while it is. Here is my code:
$(document).ready(function() {
function someFunction() {
alert('function complete');
}
});
$(window).load(function() {
someFunction();
});​
What am I doing wrong?
you are defining someFunction in the function you pass to $(document).ready()...the scope of the function should be outside it...
try this:
function someFunction() {
alert('function complete');
}
$(document).ready(someFunction);
$(window).load(someFunction);​
Try this instead:
function someFunction() {
alert('function complete');
}
$(document).ready(function() {
someFunction();
});
$(window).load(function() {
someFunction();
});
someFunction is not accessible within the $(window).load because it's scope is limited to the document.ready. Take it out of the document.ready and put it in the global context.
function someFunction() {
alert('function complete');
}
$(document).ready(function() {
someFunction();
});
$(window).load(function() {
someFunction();
});​

Categories