I had a problem running the script from the requested AJAX request.
AJAX works fine and loads messages, but stops the ".jobs-button" from being able to run the desired script. Oddly enough, if I set this to another element outside of AJAX called the request block, then the script works fine.
Any ideas why the ".jobs-button" doesn't work in the "hide / show" script?
Here, a demonstration of my explanation is not clear: http://pixeldesigns.uk/ardour/jobs
This first script is a simple "show / hide":
jQuery(".jobs-button").toggle(function () {
jQuery(".jobs-main").slideDown(500);
jQuery(".jobs-head")
.delay(500)
.queue(function () {
jQuery(this).removeClass("jobs-closed");
jQuery(this).addClass("jobs-open");
jQuery(this).dequeue();
});
jQuery(".fa-chevron-down")
.delay(500)
.queue(function () {
jQuery(this).removeClass("rotate");
jQuery(this).addClass("rotated");
jQuery(this).dequeue();
});
jQuery(".jobs-intro, .jobs-desc, .jobs-qual, .jobs-bul").delay(500).animate({
'opacity': 1
}, 500);
}, function () {
jQuery(".jobs-main").delay(500).slideUp(500);
jQuery(".jobs-head")
.delay(1000)
.queue(function () {
jQuery(this).addClass("jobs-closed");
jQuery(this).removeClass("jobs-open");
jQuery(this).dequeue();
});
jQuery(".fa-chevron-down")
.delay(1000)
.queue(function () {
jQuery(this).removeClass("rotated");
jQuery(this).addClass("rotate");
jQuery(this).dequeue();
});
jQuery(".jobs-intro, .jobs-desc, .jobs-qual, .jobs-bul").animate({
'opacity': 0
}, 500);
});
The second runs AJAX to invoke the script when the page loads and presses the button on the button that launches the request and displays the correct messages:
jQuery(window).load(function () {
jQuery('#load').show();
jQuery.ajax({
url: "<?php echo get_stylesheet_directory_uri(); ?>/ajax/sales.php",
type: "get",
success: function (e) {
document.getElementById("tab-1").innerHTML = e;
jQuery('#load').hide();
},
error: function (e, t) {
e.status > 0 && (document.getElementById("tab-1").innerHTML = "Error: " + t);
}
})
});
jQuery("#tb-1").click(function () {
jQuery('#load').show();
jQuery.ajax({
url: "<?php echo get_stylesheet_directory_uri(); ?>/ajax/sales.php",
type: "get",
success: function (e) {
document.getElementById("tab-1").innerHTML = e;
jQuery('#load').hide();
},
error: function (e, t) {
e.status > 0 && (document.getElementById("tab-1").innerHTML = "Error: " + t);
}
})
});