Loading Bootstrap modal after delay not working - javascript

I'm working on a cratejoy site, and my client needs a modal to popup after a set amount of time. I added the modal and when I use this it works fine:
$('#myModal').modal('show');
But when I try to use either of these answers from this page, it get a Uncaught TypeError: $(...).modal is not a function error and the modal does not popup. You can see it not working here.

First of all you need to have link to bootstrap.js in your page and loaded after jquery.
Second you have to place the script in a script tag before the end body tag
$(document).ready(function(){
$('#myModal').modal('show');
});
In order to delay the modal you can do this:
setTimeout(function(){
$('#myModal').modal('show');
}, 5000)

You have multiple versions of jQuery being loaded
Apart from the obvious version with it's own script tag your main.js file also includes it.
Since it loads after bootstrap.js it overwrites the whole jQuery object and removes reference to bootstrap in original version. That is why you get the error shown
Choose which version of jQuery you want to use and remove the other.
Make sure boostrap.js loads after the selected choice

Related

Jquery.min.js conflict

My site has a problem when I use the following type function located in the header:
<script>
$(document).ready(function() {
$('#showVolunteer').click(function() {
$('.vol_info').slideToggle("fast");
});
});
</script>
I have to include the following line of code in order to get it to do what I want within the site:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
The above function, is used in the link "How to Volunteer..." on the main page and allows for the expanding and collapsing of data. However, when I call the jquery.min.js library as I have, it causes the featured content show to stop rotating pictures every six seconds. When I remove the line:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
the slide show refreshes normally and the "How to Volunteer..." link STOPS working. I cannot get them both working together.
I realize that wordpress includes a copy of jquery.js at the following location \wp-includes\js\jquery\jquery.js which is the non compressed version, but somehow my function above does not recognize what is in this library. It only recognizes jquery.min.js when called in the fashion above.
My question is, what do I need to do to get the expand and collapse data link working on the front page TOGETHER with the featured content rotator changing the picture every few seconds? In other words BOTH working at the same time.
Should I place all my functions (similar to the ones above) in a .js file that is already resident in wordpress?
thanks
This question has been resolved. Apparently, you're not suppose to use the $ symbol in Wordpress .js files, as it is used by other libraries and causes confusion within calls to jQuery. Instead, you have to use "jQuery" in place of the "$" symbol. Once this was done, everything worked as it should.
jQuery() NOT $() for Wordpress.

JQuery remove link target attribute code not working

We have a WP site that uses a 3D Cart Plugin - when you click on "Add to Cart" it opens a new window. This is because *'target='_NEW''* is built into the plugin link code. See the following page and click on any Product Description or Add to Cart button.
http://tipsybir.nextmp.net/freestyle-hummingbird-feeders-375ml/
To override this, I use this code:
<script type="text/javascript">
jQuery(document).ready(function() {
$("a[target='_new']").removeAttr("target");
});
</script>
which I got from a previous question here. We have another WP site using the same plugin, and the above code works perfect, but it is not working on this site. It is the same exact code, placed in the header, but a new window is still opened.
Can anyone help on this? We do not want a new window to open.
You are probably not using jQuery noConflict, so use jQuery instead of $
jQuery(document).ready(function() {
jQuery("a[target='_new']").removeAttr("target");
});
It was indeed that I did not have the JQuery Library loaded.

unable to get .datepicker() function to initiate on dynamically loaded page

I'm still quite new to JS and am having some issues with getting JS to run on a dynamically loaded page.
After loading the "Apply Online" page dynamically through the .load method I am unable to then get a jquery date picker to attach to the "appDataOfBirth" input field. After reading through a couple similar posts I've tried things such as .live however even though this works for say an alert, it won't initialize the date picker.
I've been playing around with something link below, where "applyOnlineBtn" is the carasel link to open up the application section displaying the form - however this does not seem to work.
$('#applyOnlineBtn').live("click", function(){
alert('test message');
$("#appDateOfBirth").datepicker();
});
If any one could help me to get this working it would be greatly appreciated.
Resources:
Website URL: http://www.kingsroad.net.au/qutproject/index.php
the JS that loads the content into the mid div is located at kingsroad.net.au/qutproject/js/general.js (this is where I've attempted to use my code to activate the date picker).
the online application content is located at kingsroad.net.au/qutproject/content/applyOnline.php
You May use
$('your_element').load(URL_TO_LOAD,function(){
$("#appDateOfBirth").datepicker();
});
this will apply datepicker to the new loaded content.
Did you check javascript error console?:
Uncaught TypeError: Object [object Object] has no method 'datepicker
So, check your datepicker library, maybe you've not include datepicker library in your page.

$(select).selectmenu('open') doesn't work if page is loaded using ajax

I have a button that shows a dropdown menu when clicked. This code works on pages that are loaded with data-ajax="false":
$('#btnMainMenu').live('click', function() {
$('#dpMainMenu').selectmenu('open');
});
But there are some anchors on the website where data-ajax="true", so whenever the users load those pages - the codes above doesn't seem to work.
Pages that are loaded with data-ajax="true" only load a specific part of the pages (which is the default behaviour for jQuery Mobile). Namely everything between <div data-role="page">...</div>. Does your code work even though pages are loaded this way?
References: Linking Pages
I just had the same problem and my solution was to include the code bellow in the body of the page that is being loaded via Ajax (I put it just bellow the form).
<script>
$('document').read(function () {
$("#form-id").trigger("refresh", true);
});
</script>
With this, when the page is ready Jquery recreates the form where the selectmenu is and so all behaviours are back again.

Javascript Function Not Defined On Click Event, But Works on Page Load?

I have a Wordpress site set up on my local machine where I'm building a custom theme. In an 'enqueue-assets.php' file, I am using wp_enqueue_script to load a main bundle javascript file. In that bundle are additional imports of other .js files. In one of the imported .js files is the following function:
function svgPageJump(target){
alert(target);
}
I also tried assigning the function to variable, just to make sure I got the same results explained below:
let svgPageJump = function(target){
alert(target);
};
and
var svgPageJump = function(target){
alert(target);
};
When I call this function in the same .js file with .ready():
$(document).ready(function(){
svgPageJump('section-plan');
});
I get the alert when the page loads, as expected. I also get the alert by just calling it after the function declaration (also as expected.)
Unfortunately this isn't working on click events elsewhere on the page. Ultimately I'm trying to get these events to fire when clicking elements in a SVG, to create page jumps. On the clickable elements I'm using:
onclick="top.svgPageJump('section-plan');"
Clicking on the element gives me this error:
Uncaught TypeError: top.svgPageJump is not a function
at SVGGElement.onclick
At first I thought it was a targeting issue from the SVG, but I did another test on a bit of text elsewhere on the page. In a Gutenburg Heading Block in a Wordpress Page, I placed the following markup using the HTML editor for the block:
<h2 id="section-plan" onclick="svgPageJump('section-plan');">PLAN</h2>
I also did this in a Custom HTML Block, but either way when I click the h2 on the actual page I get this error:
Uncaught ReferenceError: svgPageJump is not defined
at HTMLHeadingElement.onclick
I'm obviously missing something (probably something simple) but not sure how to track the problem down between the theme's files (which are all working correctly otherwise) or the event being defined in the page via the Wordpress admin, or...?
Another note on this... I originally used the simpler approach to making these page jumps using anchor tags and associated ids. This worked fine but I have a sticky header on the page so when the page scrolls, the element with the id scrolls under the header so I am attempting to use JavaScript/jQuery to account for the header height.
Thanks!
As per this question (which I'd close as a duplicate of it if has an upvoted answer):
var in the top level of a non-module script will create a property on the window object. So will using a function declaration. You can access this from a frame via top.
let does not create a property on the window object, so you can't access it that way if you use let.

Categories

Resources