Can't execute javascript inside ajax loaded div - javascript

I'm using ajax to load some content inside a div, and this includes the jQueryVericalTabs plugin. However the styles won't work an I just see the unformatted text.
With FF's web developer tool I see that the rendered source is not linking to the styles on my CSS file despite being correctly called on the index page. I tried writing the CSS directly on index.php, on the content file, putting it inside the body tags, with and without the javascript (per plugin's demo), and also the suggestion on this post but none worked, don't know what else to try. Here's what my header looks like:
<link rel="stylesheet" href="css/jquery-jvert-tabs-1.1.4.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-jvert-tabs-1.1.4.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$("#accordion").accordion({
active: false,
autoHeight: false,
collapsible: true
});
});
$("#vtabs5").jVertTabs({
equalHeights: true
});
// add click events for open tab buttons
$("input[id^=openTab]").each(function(index){
$(this).click(function(){
openTab("#vtabs6",index);
return false;
});
});
function openTab(tabId,index){
$(tabId).jVertTabs('selected',index);
}
});
I tried a different plugin, verticalTabs, and the tab-titles show with the correct formatting, but no tab-content is displayed. I'd still prefer to use the first plugin though, the HTML is a lot cleaner.
I appreciate any input.

Its just a suggestion, i have never tried it, but according to the jquery documentations, you can achieve and handle ajax loaded contents using .live() event. Check the documentation here. Hope it helps and if you get an answer, please post it back

Thanks for your reply. I solved it with the suggestion from this post, in case someone finds it useful :)

Related

jQuery UI dialog not appearing Squarespace adblock detect

I have created an AdBlock detector, and my jQuery dialog does not seem to be working. Note: the "adblock" variable is already referenced. Also, I am using Squarespace, which is why I had to add the code to the body.
if(adblock) {
$("body").html('<div id="alert-dialog" title="Turn off AdBlock"> Please turn your AdBlocker off. It hurts our business. To turn off AdBlock, just disable it on this page. Thank you.<br><br><br> Sincerely, The <i>Wildwood Howl</i></div>'+$("body").html());
$(function() {
$( "#alert-dialog" ).dialog();
});
}
Here is the error:
TypeError: $("#alert-dialog").dialog is not a function
AKA the dialog function is undefined. I don't know why. Here are my added links and scripts.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
Click here to see my page. Also, there are supposed to be background images, but they are not showing up.
I can provide a jsfiddle for this. Thanks. Help is appreciated.
The problem is probably because you're adding jQuery twice.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
---------------^ remove this
jQuery UI extends the $ created by jquery-1.10.2, but then you add jquery-latest.min.js which probably overwrites the $ created earlier which has the jQuery UI functions.
also make sure you're code runs after these two scripts are evaluated and DOM is ready

jQuery(...).iris is not a function

I am trying to implement color picker provided here http://automattic.github.io/Iris/
Here is my libraries that i am including.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
and this is how i am implementing this code
$(document).ready(function() {
jQuery('#color-picker').iris();
});
this is how i have my input field
<input type="text" id='color-picker' value="#bada55" />
but i don't why i get this error
TypeError: jQuery(...).iris is not a function
jQuery('#color-picker').iris();
Seem like the path to your iris script is wrong which caused the browser cannot load the file. So you can check again to see if the path js/iris.min.js is correct.
You can check to see whether your file is loaded or not by going to network tab of either Firebug or Chrome developer tools. If it cannot load the URL which you've provided than you'll receive a 404 error not found in this tab.
Or you can also try to replace:
<script src="js/iris.min.js"></script>
with direct link from Github:
<script src="https://github.com/Automattic/Iris/blob/master/dist/iris.min.js"></script>
The last note is that you just need to include jQuery once, you can choose either version 1.10.2 or 1.8.3 which you know that version will compatible with your jQuery code.
I think this should be something wrong with the iris script here, try to use this version directly from their home page:
<script src="http://automattic.github.io/Iris/javascripts/iris.min.js"></script>
Fiddle Demo
Is your code placed in a way that would let it run before jQuery, jQueryUI and Iris is loaded? Make sure you place your own script file after the rest.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
<script>
$(document).ready(function() {
jQuery('#color-picker').iris();
});
</script>
You need to have link to jQuery and jQuery UI instead of adding jQuery twice.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/iris.min.js"></script>
Then call iris on page load and it will work. Here is a link to working fiddle http://jsfiddle.net/WLru3/
PS: I have directly copy pasted code of iris in js code block, please use library link in your code instead.
Remove a line that includes jQuery 1.8.3 library
Make sure the path to iris.min.js is correct

jQuery Tagit! Not working

I am using the jQuery tagit! library to create a user "Skills" input form. I figured this would be an extremely quick and simple setup like most jQuery libraries, however I am having a tremendous amount of trouble with this one. I tried following the source code on the example below, but I cannot get it to work even with the direct source code.
I am using the script found here: https://github.com/aehlke/tag-it/blob/master/README.markdown
Here is the javascript that is initializing the tag-it library in the header:
$(function() {
$('#skills').tagit({
singleField: true,
});
});
And here is the <ul> element that is supposed to turn into an input field when the tag-it.js library is called:
<ul id="skills"></ul>
I am including all these files to get this to work:
<link rel="stylesheet" href="styles/tag-it.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/tag-it.js"></script>
All the files are being called correctly and I am not receiving any errors. There is NO input form where the <ul> tags are unless I create one manually
Does anyone have a clue as to why this isn't working? Do I need to manually add an input field and assign a specific ID or class to it?
EDIT: This has been solved. The code posted is all 100% correct, I had an error in the jquery selector before tag-it initialization.
This was a problem for me, my template had a script linking to a local jquery. So when i copy the jqueryui and jquery link from tagit, it overlaps. Geting rid of the local jquery did it for me.
I guess the problem is with that comma
you have put
singleField: true,
but it has to be
singleField: true
If you have two options like
tagSource: availableTags,
singleField: true
then only the first option will have the comma
the second or the last option (in case there are more than 2 options) will not have a comma

noty not working on init

Im complete noob to Javascript, but very keen to learn more.
I have a flex application, that I am messing with the HTML wrapper, to try and pop up an alert to point user to help.
I found a great jQuery plugin called noty, that emulates the header alerts that you also see in SE-sites.
<head>
<link rel="stylesheet" type="text/css" href="custom/css/jquery.noty.css"/>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>
<script type="text/javascript" src="custom/js/jquery.noty.js"></script>
<script type="text/javascript" language="JavaScript">
// basic alert
//if (!confirm("Yo.\n\nAccept?"))
// window.location.href = "custom/rejected.htm";
noty({text: 'yo!'});
</script>
</head>
Not getting any errors in firebug, but alert is not firing either.
I know its something basic, and will need some additional logic to tell it to fire at runtime, right?
What have I done wrong or what code am I missing?
Thanks
Full code here. Let me know via comments if you need more info.
I don't know Noty, but if it's a visual effect than it certainly depends on the DOM being scriptable and nodes being rendered. What's happening is that noty is firing before the DOM is scriptable.
A core concept in jQuery is using the "document ready" function. Consider it a "page is built, now I can manipulate it" function. People like to be fancy and use shortcut syntax (there are a few variations), but I prefer explicit and obvious syntax, so I use the standard:
$(document).ready(function() {
// Code here executes when DOM is scriptable
});
Just put the noty code inside there and it should work, I'm guessing:
$(document).ready(function() {
noty({text: 'yo!'});
});

I can't get the jQuery datepicker to show on my page after loading with AJAX

My main page is index.php. I'm loading a section of the page with AJAX and I would like to also load a datepicker in the same section I got all relevant JS:
<script type="text/javascript" src="javascripts/jquery/jquery.js"></script>
<script type="text/javascript" src="javascripts/datepicker/jquery.datePicker.js"></script>
<script type="text/javascript" src="javascripts/datepicker/date.js"></script>
I hope i'm not missing anything, the CSS is copied into my main css file.
and here's how the ajax looks like, at least the callback part:
xmlhttp12.onreadystatechange=function() {
if (xmlhttp12.readyState == 4) {
if(document.getElementById("corpcrm").innerHTML=raspuns[0]){
$(function()
{
$('#datepicker')
.datePicker({inline:true})
});
Now i know there aren't any problems with the the rest of the code as i've been using the very same thing for a while now, somehow I can't get the jQuery part right.
i tried adding a div directly to index.html and adding
<script type="text/javascript">
$(document).ready(function(){
$("#test").datepicker();
});
</script>
in the head. Firebug finds an error related to it that says
$('#test').datepicker() is not a function
The problem is now solved. I wasn't loading jquery-ui properly, was missing a > at the end of a script, thanks for the help guys.

Categories

Resources