Switching between window.ready and window.ajaxComplete if data-attribute exist - javascript

If HTML has:
data-load-file
or
data-load-content
then use:
document.ajaxComplete
else
document.ready
At the moment I'm using two separate files to achieve this
$( document ).ready(function() {
//Small bit of code that loads files in
//5 lines of codes
});
//if data-load-file or data-load-content exist
//use $( document ).ajaxComplete(function() {
//else use $( document ).ready(function() {
$( document ).ajaxComplete(function() {
// or
$( document ).ready(function() {
//Lots and Lots of code that can be executed
//Lots and Lots of code that can be executed
//Lots and Lots of code that can be executed
//1000s of lines of code
});
<div data-load-file="menu-footers.html"></div>

You need both if script is in head and a simple if() to determine if such element exists..
function lotsOfCode(){
//Lots and Lots of code that can be executed
}
function smallBitOfCode(){
//Small bit of code that loads files in
}
// on page load determine which to execute
$(function(){// same as `$( document ).ready`
if ($('[data-load-file]').length || $('[data-load-content]').length){
$( document).ajaxComplete(lotsOfCode);
} else {
smallBitofCode();
}
});
Make sure any ajax is also inside $(function(){ }) and is called after the above code.

You can use $.holdReady() to prevent .ready() handler from being called, .is() to check is an element exists in document
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$.holdReady(true);
onload = function() {
if ($("[data-load-file],[data-load-content]").is("*")) {
$.holdReady(false);
} else {
// will be called
$(document).ajaxComplete(function() {
// do stuff
alert("ajax complete")
})
$.ajax()
}
// will not be called
$(document).ready(function() {
// do stuff
alert("ready")
})
}
</script>
<body data-do-not-load-file="" data-do-not-load-content="">do not load file
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script>
$.holdReady(true);
onload = function() {
if ($("[data-load-file],[data-load-content]").is("*")) {
$.holdReady(false);
} else {
// will not be called
$(document).ajaxComplete(function() {
// do stuff
alert("ajax complete")
})
$.ajax()
}
// will be called
$(document).ready(function() {
// do stuff
alert("ready")
})
}
</script>
<body data-do-not-load-file="" data-load-content="">load file
</body>

Related

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

External javascript doesnt work when called using jquery's getScript()

I'm loading a page using jQuery's .load() function. The page I'm loading links to an external javascript file. So i try to execute that by calling getScript().
This is the code for loading the page:
<script>
$j(document).ready(function() {
$j( "#scriptin" ).load("home.html");
$j("#index").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load("home.html");
});
$j("#artists").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "artists.html" );
$.getScript("pix.js");
});
$j("#concert").click(function(e) {
e.preventDefault(); // if desired...
$j( "#scriptin" ).load( "storminateacup.html" );
$.getScript("stormload.js");
});
});
Now when the concert link is clicked, as you can see in the code I load storminateacup.html and after that i call the external script stormload.js
This is stormload.js
$( "#scriptintwo" ).load( "latest.html" );
});
$("#artists").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "artists.html" );
});
$("#latest").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "latest.html" );
});
$("#videos").click(function(e) {
e.preventDefault(); // if desired...
$( "#scriptintwo" ).load( "videos.html" );
This script doesn't seem to run. When i wrap it around a $document.ready() and open the link directly (i.e without using.load()) it works perfectly. But when i load it without document.ready nothing happens and when i load it with document.ready() only one of the clicks work.

Only run a function if on X page

I have this JS set up but the tabs are only on one page. So I'd like to only run the function on that page to prevent any undefined is not a function console errors. How can I include a conditional if statement to this?
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
});
So, something like:
if is X page {
$(function() {
$( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
});
}
If that page has a specific class assigned to it, or an element that only applies to that page, you can do it. It would look something like this:
$(function() {
if ($('body').hasClass('className')) {
$('#tabs').tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
}
});

$.get within a .click function

Not really sure where I'm going wrong with this one. I have a button element that when clicked, I want the following script below to be triggered. No issues seemingly in Chrome when I click the button but the file isn't fetched.
Am I missing something silly in my .click?
<script>
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
</script>
Your code seems right. You need to make sure 2 things:
testimg.php (with m) file exists in the same directory.
The <button> is in the DOM when the script runs. I recommend using $(document).ready() event:
<script>
$(document).ready(function(){
$( "button" ).click(function() {
$.get("testimg.php", function() {
alert("Success!");
});
});
});
</script>
Working jsFiddle
Worth making it a jQuery.ajax call so you can trace errors.
$(function () {
$("button").click(function(e) {
e.preventDefault();
$.ajax({
url: "testimg.php",
success: function () {
alert("Success!");
},
error: function(x,y,z) {
alert(z);
}
});
});
});

how do I include a jQuery script into an include.js file?

lease forgive me if this is simple-minded a question.
I have a jQuery script shown below embedded in my app:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
</script>
My boss just told me to put this jQuery in include.js file.
I included the file as shown below
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
but now it isn't working anymore.
It is supposed to show and hide certain icons.
What am I doing wrong?
A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).
Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.
new include.js :
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
$(document).ready(function() {
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv').slideUp();
});
});
});
Also verify that you have something like this in your HTML file:
<script type="text/javascript" src="path/to/include.js"></script>
You want to include your Javascript in a file right ?
Assuming jQuery has been included before :
Html
<script type="text/javascript" src="path/to/include.js"></script>
include.js
jQuery(function($){
$('#div1').on('click', function () { //missing '
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2').on('click', function () { //missing ' here
$('#secDiv').slideUp(); //missing ' here too
});
});
//Edit omitted this part
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
}

Categories

Resources