TypeError: $("").html("This dialog will show every time!").dialog is not a function
This is the error I'm getting. The page is loaded using load() in a div on the index page. I've included the necessary jquery stuff on the index page (which I'd prefer to keep that way), the loaded page, and both, and it still does this. I'm not sure exactly what's up. I know it's more difficult working with a load() page instead of just the page itself, but even going to the page home.php, it still says it. Below is a link to the load page, if you want to see the index just take out home.php in the address.
The page that is being loaded
This is the function I'm using:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript">
function readMore(id,title,cat,desc,post,auth) {
//alert(id +","+ title +","+ cat +","+ desc +","+ post +","+ auth);
var $dialog = $('<div></div>').html('This dialog will show every time!').dialog({autoOpen: false,title: 'Basic Dialog'});
$dialog.dialog('open');
$dialog.title = title;
$dialog.html(desc);
}
</script>
As it is right now, all the includes for dialog are on the load page, and not the index page, but like I said, I've tried one or the other or both, to no avail. Also alert works fine and is passing everything correctly and is getting called when I want it to. All the paths to the jquery includes are correct.
And if it helps narrow it down for some reason, I'm getting theres errors on page load too:
TypeError: $.widget is not a function
[Break On This Error]
_uiHash: function(event) {
jquery...able.js (line 504)
TypeError: $.widget is not a function
[Break On This Error]
_mouseCapture: function(event) { return true; }
jquery...ouse.js (line 162)
TypeError: $.widget is not a function
[Break On This Error]
ui: function() {
You also need:
jquery.ui.button.js
jquery.ui.dialog.js
Also put mouse before draggable, as commented above by Musa, it's important.
summary:
jquery.ui.core.js
jquery.ui.widget.js
jquery.ui.mouse.js
jquery.ui.position.js
jquery.ui.draggable.js
jquery.ui.resizable.js
jquery.ui.button.js
jquery.ui.dialog.js
But instead of loading all the single files I would suggest to load the complete UI from a CDN.
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
jquery.ui.mouse, jquery.ui.draggable and jquery.ui.resizable needs to come after jquery.ui.widget because they call .widget(), also widget uses position so put it bfore like.
<script type="text/javascript" src="js/jquery.ui.position.js"></script>
<script type="text/javascript" src="js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jquery.ui.mouse.js"></script>
<script type="text/javascript" src="js/jquery.ui.draggable.js"></script>
<script type="text/javascript" src="js/jquery.ui.resizable.js"></script>
Related
I have the following links declared inside the head tag:
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="javascript/scripts.js"></script>
And the following code inside the scripts file:
$("#person").hover(function() {
// trigger the mouseover event
$("#person-text span").addClass("important-info");
}, function() {
// trigger the mouseout event
$("#person-text span").removeClass("important-info");
});
$(document).ready(function(){
console.log( "ready!" );
});
I have also tried adding the jQuery library through Google and Microsoft CDNs, but it didn't work as well.
Here is a screenshot from the console errors:
I had a similar problem few days back. I moved the custom script tag at the end of the HTML page and the code worked. It generally happens for the $(document).ready() function.
<script type="text/javascript" src="javascript/scripts.js"></script>
Move the above line to the end of your Html page and that should work.
try using $(document).ready(function(){/*your code*/}) and try to change if your browser console showing 404 error for jQuery file
<script type="text/javascript" src="javascript/jquery-3.1.0.min.js"></script>
to
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js
"></script>
When I visit the page via mobile device (phone) it shows the menu to choose from instead I want the page to load the index right away.
(If you will check it via phone you will get what I mean)
Link: www.eufrazia.sk/sitex/
I would like the page to be loaded here "www.eufrazia.sk/sitex/home" when visited via phone
I'm not sure if below code may help to understand, but I think this code has something to do with it.
(function($){
window.FJSCore =
{
local:location.protocol == "file:",
basepath:location.pathname.slice(0, location.pathname.lastIndexOf('/') + 1),
defState:'',
defStateMobileText:'Úvod',
emptyNavigationText:'-- Sekcie --',
ajaxFolder:"/ajax/",
indexFile:'index.html',
modules:{},
mobileFolowLinks:false,
}
It doesn't look like media queries because the menu only appears when navigating with a Phone's user-agent and not when changing the browser window size.
I suggest trying to remove the device.js file from your <head> element in the index file and then see whether any errors are thrown. This should resolve the issue.
<script type="text/javascript" src="js/jquery.js"></script>
<!-- REMOVE THIS -->
<script type="text/javascript" src="js/device.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/core.js"></script><script src="js/history.js?redirect=true&basepath=/sitex/" type="text/javascript"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/jquery.easing.js"></script><script type="text/javascript" src="js/TMForm.js"></script><script type="text/javascript" src="js/randomLettersGenerator.js"></script><script type="text/javascript" src="js/spin.min.js"></script><style type="text/css"></style><script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script><script type="text/javascript" src="js/tmMultimediaGallery.js"></script>
Hope this helps
When I run my code in console it works fine, but when I load the page it gives me an error - TypeError: undefined is not an object (evaluating 'rowInfo.textContent')
I have two webpages one that is the parent and the other that is the child. They are both on the same local server using the same protocol and port. I have a third file that holds the javascript. Here is the relevant code:
Parent Page
<html>
<head>
<title>Broker's Lead List</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="https://c1eru548.caspio.com/scripts/embed.js"></script>
</head>
<body>
<div id="callback"></div>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
autoRefresh_div();
window.frames['DueDateCounter'].addEventListener("load", alert("loaded"));
popUpWindow();
</body>
</html>
Javascript code
function autoRefresh_div() {
$("#callback").empty()
.html('<iframe name="DueDateCounter" title="DueDateCounter" ' +
'style="width: 1px; height: 1px" ' +
'src="https://192.168.0.50/CRM/CalanderCountDown.html">Sorry, but// your browser does not support frames.//</iframe>');
}
var f, doc, rowInfo, minutesUntilCallBack, calenderItem, calenderItemId;
function popUpWindow() {
f = $('iframe')[0];
doc = f.contentDocument? f.contentDocument: f.contentWindow.document;
rowInfo = doc.getElementsByTagName('td')[0];
minutesUntilCallBack = rowInfo.textContent;
calendarItem = f.contentDocument.getElementsByTagName('td')[1];
calendarItemId = calendarItem.textContent;
alert(minutesUntilCallBack);
alert(calendarItemId);
}
After the page has loaded and I go to the console, I can see that the variable f is defined, but nothing else is defined. Now if I use the console and put the code in everything works fine. The minutesUntilCallBack alerts and so does the correct calendarItemId.
I thought it might have been a problem with the iframe not being loaded properly, so I put a listening event in, that I have to OK before I run the function popUpWindow() that looks into the iframe.
I've read lots of posts about similar issues across many sites, but can't seem to get to the correct answer.
Any help much appreciated.
You need to put the popUpWindow() function inside of the onload event listener for the iframe. It is currently running before the iframe has loaded. addEventListener is asynchronous.
window.frames['DueDateCounter'].addEventListener("load", function() { popUpWindow(); });
I'm getting this error:
Uncaught TypeError: Object [object Object] has no method 'dialog'
This is my relevant HTML
<!DOCTYPE html>
<html lang="en">
<head>
<script src="/Scripts/modernizr-2.0.6-development-only.js"></script>
</head>
<body>
<div id="deleteConfirmationDialog" title="Confirm Withdrawl">
Are you sure?
</div>
<div class="appl-appliedfor">
<a class="deleteLink" href="/Applicant/WithdrawApplication/2">
<img class="appl-withdrawApplication"
src="/Content/Images/Delete.png" alt="Withdraw Application" />
</a>
</div>
<script src="/Scripts/Prime/jquery-1.8.2.min.js"></script>
<script src="/Scripts/Jqueryui/jquery-ui-1.9.2.custom.min.js"></script>
<script src="/Scripts/OnBoard/jquery-form-min.js"></script>
<script src="/Scripts/Prime/bootstrap.min.js"></script>
<script src="/Scripts/Prime/json2.js"></script>
<script src="/Scripts/Prime/selectivizr-min.js"></script>
<script src="/Scripts/Prime/jquery.cookie.js"></script>
<script src="/Scripts/Prime/jquery.maskedinput-1.3.min.js"></script>
<script src="/Scripts/OnBoard/OnBoardAll.js"></script>
<script src="/Scripts/OnBoard/ApplicantAll.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
<script src="/Scripts/MvcFoolproofJQueryValidation.min.js"></script>
<script src="/Scripts/mvcfoolproof.unobtrusive.min.js"></script>
<script src="/Scripts/jqueryui/jquery.ui.dialog.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
autoOpen: false,
modal: true
});
});
$('.deleteLink').click(function(e) {
$('#deleteConfirmationDialog').dialog({
buttons: {
"Yes - Withdraw Application": function() {
$(this).dialog("close");
},
"No - Do Nothing": function() {
e.preventDefault();
$(this).dialog("close");
}
}
});
$('#deleteConfirmationDialog').dialog("open");
});
</script>
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"28b6a62eb1fb42829a3191b7c3e270d4"}
</script>
<script type="text/javascript"
src="http://localhost:61108/d90608e9d0044daf98eb343c1b3769d7/browserLink"
async="async"></script>
</body>
</html>
Everywhere I've searched the error is because you have to include jquery and jquery UI.
I've tried including JQuery UI with and without jquery.ui.dialog. No Luck.
What am I missing? Thanks for reading.
Edit
The error points to the this line:
$(document).ready(function() {
$('#deleteConfirmationDialog').dialog({
if I type $.dialog in the console I get undefined
If I reference jquery.ui.dialog.js there is the following error:
Uncaught TypeError: Object function (a, b) { return new p.fn.init(a, b, c) } has no method 'widget'
otherwise there is no other error.
I get 200 OK's for everything.
I've removed the displayed javascript code in to its own file and referenced it last. I have also moved the function that was outside the document.ready event function to inside this function, still getting the same error.
I can see jquery-ui and jquery in the Sources tab.
I don't understand why I can see jqueryui in the sources tab but typing $.dialog in the console results in undefined
Only code that doesn't use external libraries and code that doesn't use the DOM may be executed directly in a <script> tag.
If you search for DOM Elements directly in a <script> tag without waiting for the Document / DOM to be ready, the elements that you are searching for may not exist yet (in the DOM) or they may be incomplete.
Also using JavaScript methods directly in a <script> tag without waiting for the Document / DOM to be ready, the external files might have not been downloaded yet which means the methods from those external files might not exist yet.
In order to be sure that nothing like that occurs you need to put the code inside an event handler -- this ensures the code will be executed only after the event is triggered. The necessary event is $(document).ready(event_handler_function) also shorthanded as $(event_handler_function)..
I am currently working my way through David Sulc's excellent "Backbone.Marionette.js: A Gentle Introduction" and have come unstuck at modules. With the app as it currently stands I am trying to access an API in a module called 'contacts.js' from the index.html script but I get the following error when I try to run the app:
"Handler not found for 'contact: entities' "
I am able to hit the API directly from the console in Chrome and manually get the 'contact' information so I was thinking this was a loading sequence problem where the API might not be available by the time app.js loads, however the loading sequence is as follows:
<script type="text/javascript" src="assets/js/vendor/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="assets/js/vendor/json2.js"></script>
<script type="text/javascript" src="assets/js/vendor/underscore-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone-min.js"></script>
<script type="text/javascript" src="assets/js/vendor/backbone.marionette.min.js"></script>
then the local scripts as follows:
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/entities/contact.js"></script>
and a script tag below the last two script tags directly runs the following code:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
var contacts = ContactManager.request("contact: entities");
... some more code
</script>
the line beginning var contacts = ..... is the one giving me the error. Any help appreciated
I am as certain as I can be that I have scripted this exactly as per the book.
You have a space in your event name:
<script type="text/javascript">
... some view code
ContactManager.on("initialize:after", function(){
// Remove the space in contact: entities -->
var contacts = ContactManager.request("contact: entities");
... some more code
</script>