We Keep Coding

formDiv.dialog is not a function [duplicate]

I am having an issue getting a dialog to work as basic functionality. Here is my jQuery source imports:
<script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
<script type="text/javascript" src="scripts/jquery-ui-1.11.1.js"></script>
<script type="text/javascript" src="scripts/json.debug.js"></script>
Html:
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>
<script type="text/javascript">
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
</script>
From the posts around seems like as a library import issue. I downloaded the JQuery UI Core, Widget, Mouse and Position dependencies.
Any Ideas?

Be sure to insert full version of jQuery UI. Also you should init the dialog first:
$(function () {
$( "#dialog1" ).dialog({
autoOpen: false
});
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<button id="opener">open the dialog</button>
<div id="dialog1" title="Dialog Title" hidden="hidden">I'm a dialog</div>

if some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict(true) from the second version will return the globally scoped jQuery variables to those of the first version.
Some times it could be issue with older version (or not stable version) of JQuery files
Solution use $.noConflict();
<script src="other_lib.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {
$("#opener").click(function() {
$("#dialog1").dialog('open');
});
});
// Code that uses other library's $ can follow here.
</script>

If you comment out the following code from the _Layout.cshtml page, the modal popup will start working:
</footer>
#*#Scripts.Render("~/bundles/jquery")*#
#RenderSection("scripts", required: false)
</body>
</html>

Change jQueryUI to version 1.11.4 and make sure jQuery is not added twice.

I just experienced this with the line:
$('<div id="editor" />').dialogelfinder({
I got the error "dialogelfinder is not a function" because another component was inserting a call to load an older version of JQuery (1.7.2) after the newer version was loaded.
As soon as I commented out the second load, the error went away.

Here are the complete list of scripts required to get rid of this problem.
(Make sure the file exists at the given file path)
<script src="#Url.Content("~/Scripts/jquery-1.8.2.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.24.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript">
</script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript">
</script>
and also include the below css link in _Layout.cshtml for a stylish popup.
<link rel="stylesheet" type="text/css" href="../../Content/themes/base/jquery-ui.css" />

I had a similar problem and in my case, the issue was different (I am using Django templates).
The order of JS was incorrect (I know that's the first thing you check but I was almost sure that that was not the case, but it was). The js calling the dialog was called before jqueryUI library was called.
I am using Django, so was inheriting a template and using {{super.block}} to inherit code from the block as well to the template. I had to move {{super.block}} at the end of the block which solved the issue. The js calling the dialog was declared in the Media class in Django's admin.py. I spent more than an hour to figure it out. Hope this helps someone.

javascript tab function not working

I am trying to make wall script like google+ but i have one problem. Users can share pictures and videos I've created a base. However, the tab does not work currently. Reason ... <script type="text/javascript"> </ script> I think it is relevant. .... tags into the tags I add the script call. But by far misunderstood. but I could not. I'm giving you my code below.
Head
<head>
<!-- <script type="text/javascript" src="js/jquery.min.js"></script> -->
<script type="text/javascript" src="js/jquery.min2.js"></script>
<script src="jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
</head>
Call javascript function This function for post cancel or submit
<script type="text/javascript">
$(function(){
$(".content").focus(function(){
$(this).animate({"height": "55px",}, "fast" );
$("#button_hide").slideDown("fast");
return false;
});
$("#cancel").click(function(){
$(".content").animate({"height": "30px",}, "fast" );
$("#button_hide").slideUp("fast");
return false;
});
});
</script>
and this javascript function is for Photo and video click open box also this function is not working now.
<script type="text/javascript">
$(document).ready(function(){
$(".oculto").hide();
$(".MO").click(function(){
var nodo = $(this).attr("href");
if ($(nodo).is(":visible")){
$(nodo).hide();
return false;
}else{
$(".oculto").hide();
$(nodo).fadeToggle( "slow" );
return false;
}
});
});
</script>
This link is my tutotiral link. If you check this page you can understand me. If you click photo photo share panel will not open also video share panel not working.
http://goo.gl/i98FNX

What is there in this file js/jquery.min2.js? If it is the jquery library, please remove it because you have a google cdn code in the same file. In addition, you are using a old version of jquery. Since 1.4 many things have changed in jQuery so, please use the latest version of jquery http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>

I think that leads up the tab portions. Just like facebook. I understand that you have used bubble box. If you want three different areas. For example: status, video, link to share, create the base area. This will provide you more convenience.
You can write your php code easier.
Because sharing is currently part of three different courses you want to use a single form. But you can spend more time for it. However, creating three forms that will be easier if you make sharing.
Share your theme really nice congratulations. However troubling.

I've studied your own scripts. Bonding between the lines of the script too much. This is not true. Create a new js file and then type into the function you are using. Gators later use the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.oembed.js"></script>
<script type="text/javascript" src="js/yourscript.js"></script>
<script type="text/javascript" src="js/wall.js"></script>
In this way, your problems will disappear.

Rainbow Jquery Plugin does not work

I am trying to implement the rainbow jquery plugin on my blog: https://levalencia-public.sharepoint.com/blog
Rainbow plugin here:
http://craig.is/making/rainbows
I have included the following on the head
<link rel="stylesheet" href="css/rainbow/kimbie-dark.css" />
I have included the following before the body end tag
<!-- you can create a custom build with specific languages this should go before the closing </body> -->
<script src="js/rainbow.min.js"></script>
<script src="js/languages/generic.js"></script>
<script src="js/languages/csharp.js"></script>
<script src="js/languages/css.js"></script>
<script src="js/languages/html.js"></script>
<script src="js/languages/javascript.js"></script>
<script src="js/languages/shell.js"></script>
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
Then I included one post to test it with the code:
<pre><code data-language="javascript">var testing = true;</code></pre>
When I check the source code of my blog, it looks like the html is being changed, because I see this:
If I debug the rainbow.color is being hit.
So I am clueless

First of all, Rainbow initializes itself so you should be able to remove this without any problem:
<script> //<![CDATA[
$(document).ready(function() {
Rainbow.color();
});
//]]>
</script>
The main issue you are seeing is that your theme file is not being included correctly. If you look at the theme you are including it is not a valid css file. It is returning some sort of html.
See
https://levalencia-public.sharepoint.com/_catalogs/masterpage/css/rainbow/kimbie-dark.css

Why Doesn't My Foundation Tooltip Work?

I want to use a Foundation tooltip:
http://foundation.zurb.com/docs/components/tooltips.html
According to the instructions: I put this code in body :
<script>
document.write('<script src=/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
and use:
<script src="/js/foundation.min.js"></script>
and:
<script>
$(function(){
$(document).foundation();
})
</script>
and I use this code in body
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
But it does not work:
Now what do I do to have tooltip like this?

I didn't use:
<script src="/js/custom.modernizr.js"></script>
and didn't download CSS: http://foundation.zurb.com/download.php
I use them and tooltip work now:

<!doctype html>
<head>
<link rel="stylesheet" href="css/foundation.css" />
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.tooltip.js"></script>
<script src="js/modernizr.min.js"></script>
</head>
<body>
<script src="/js/foundation.min.js"></script>
<script>
$(function(){
$(document).foundation();
})
</script>
<span data-tooltip class="has-tip" title="Tooltips are awesome, you should totally use them!">extended information</span>
</body>
</html>

I was having the same problem as #naser and here is how I fixed my problem:
My first issue was that I did not have modernizr running on my site. In the <head> section of your page add Modernizr:
<script src="/js/vendor/modernizr.js"></script>
This should work if your Foundation files are installed correctly, but for some reason mine were not. So I used the files from CDNJS to install modernizr:
<script src="//cdnjs.cloudflare.com/ajax/libs/foundation/5.0.2/js/modernizr.js"></script>
If you don't want to use files from CDNJS then you should navigate to your Foundation/js folder and see if the files(modernizr.js, foundation.js, etc...) are in there. If they are not try checking the bower_components folder and then copy them over to the Foundation/js folder. If you can't find them anywhere try reinstalling Foundation.
And that worked great for me. Hope this helps.

I solved it by putting modernizr.js in the foundation scripts folder and by calling the modernizr.js in the head section of the page.
<script src="~/Scripts/foundation/modernizr.js"></script>
All working charm!!

Getting two jquery scripts to work together like they're supposed to

For the love of God I need help! I'm trying to get Caroufredsel and fancybox to work together like they do here:
http://caroufredsel.frebsite.nl/examples/carousel-lightbox-tooltip.php
...bu I can only get them working independently. I don't really know javascript so I'm failing hard :(
Here is where I've tried implementing it:
http://www.meanbeangames.com/
Only Caroufredsel is working at this point. Fancybox works if I remove all Caroufredsel code.

You are referencing jQuery library twice at line 15 and 189 (view source), this caused all reference to fancybox plugin added earlier to be lost (as jQuery variable is re-defined the second time you include jQuery). Remove the
<script type="text/javascript" src="js/jquery.js"></script>
at line 189 and you should be set.

First of all:
You are loading jQuery (the Javascript library) twice. Once in your <head> section (<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>) and once in before your closing </body> tag (<script type="text/javascript" src="js/jquery.js"></script>). Remove the last and update the first one to the most recent version of jQuery, like so:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
Second:
It might be better to give better structure to your script: or you load all of them in your head, or all of them before the closing </body> tag. This way, you won't look over scripts that are somewhere you wouldn't expect them to be. Best practice is often said to include all scripts before the closing </body> tag. Don't forget to load jQuery before all the rest of your scripts! In your case it would look like this:
<footer>...</footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.carouFredSel.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#foo2").carouFredSel({
circular: true,
infinite: false,
auto: false,
prev: {
button: "#foo2_prev",
key: "left"
},
next: {
button: "#foo2_next",
key: "right"
},
pagination: "#foo2_pag"
});
$('.fancybox').fancybox();
});
</script>