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

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.

Related

How can I add jQuery (SharePoint 2010)?

I have a HTML page that I need to be linked to within our organization's SharePoint 2010 portal. I have all needed files (CSS, images, jquery) stored in the same document library. The CSS seems to be working fine but I'm having trouble getting the jQuery to work. Any suggestions or thoughts on what could be the issue here? Thank you.
**Update: The HTML page consists of one image (image map) that I have sectioned into 100 or so clickable areas. When clicked, a jQuery plugin activates and (SHOULD) display a tooltip directly to the right of the clickable area. My issue is that the tooltip is being displayed to the right of the WHOLE image instead. So I think I was wrong in my initial question about the jQuery not working. The tooltip plugin indeed activates, it is just appearing outside the image instead of on top of the image where it should be. This works properly in a local environment but once the files are uploaded to the SharePoint server this behavior happens. Is there some internal JS/CSS files within SharePoint that I can/need to override? Thanks for helping!
Need some more details, is jQuery not loading at all? Or just errors calling jQuery functions? I'm guessing you're getting errors calling jQuery functions. You'll want to use jQuery.noConflict(); to prevent conflicts with SharePoint javascript functions. The $ symbol that jQuery uses by default is also used by SharePoint. So you call jQuery.noConflict(); at the top of your javascript, and then you just swap using the $ for calling jQuery functions to just writing jQuery. So $(document).ready becomes jQuery(document).ready. $.ajax becomes jQuery.ajax, and so on.
jQuery.noConflict Details

Loading Bootstrap modal after delay not working

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

Loading the page dynamically using jquery load

I am loading the five php page using jquery load method when clicking the tab dynamically. But some of the jquery functions(datepicker) are working only when the page is getting loaded(ie globel refresh). If i go to another tab and return back means which is not working.
Actually i have added the datepicker control in some of my php pages. The datepicker works only when the page is loaded initially. After that it doesnt work nor throw an issue. I thought the $('selector').load() is the cause for this issue.
Can anyone help.
Try to initialise the datepicker in the callback function:
$( "selector" ).load( "yourpage.html", function() {
//init datepicker
});
I'm just taking a shot in the dark here as you've not given us much code to work with.
Add a callback to your load function to reinitialize the datepicker.
$('selector').load('yoururl', function()
{
$('.datepicker').datepicker();
});
If that doesn't work, please add some code to your question.
Yes that is because maybe you are not initializing it again. Every time you use (.load) you have to re-initialize the datepicker library.
Hope that works for you.

Object [object Object] has no method - jQuery error

I am trying to get flexslider up and running but I am getting the following error.
Uncaught TypeError: Object [object Object] has no method 'flexslider' maximizesocialmedia.wordpresslochness.com/:234
It looks like the most common problem with that error is jQuery is loaded twice. I have been looking and can't find where it would be loaded twice on my site. When I view the source I can't find it loaded twice and I am not seeing anything in the chrome web inspector. Could there be a different reason as to why it's not working? Here is the site
If I need to update this post with any code please let me know.
You're not loading the flexslider plugin in your page, try adding it in a script tag, after jQuery.
It's probably named jquery.flexslider.min.js.
that console error could mean that the jquery/js for the flexslider haven't loaded so the flexslider give an error that the flexslider object for the settings is not defined as an object
i guess...
Seems like the jQuery flexslider is not loaded. I just looked at your site and I couldn't find the javascript file related to flexslider.
Include the flexslider javascript in you page and it should work.
I also noticed that the site used slidesjs

jQuery UI Not being loaded properly? Dialog method not found

I'm having an issue with my jQuery UI dialog on this page (and this page only):
http://www.satelliteinternet.com/
I'm not sure what the issue is as it's working on all the other pages on the site. The error I'm getting is the $("#DealerSearch") object has no dialog method. Very odd indeed.
Has anyone else experienced this issue?
They only difference i see here is that jquery is loaded twice on your homepage and once on the other pages. Try removing the one loaded from google
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Categories

Resources