On rare occasions a jQueryUI accordion object is undefined - javascript

Once in a while our website generates an internal error message about an object being undefined. We are using JQueryUI. Here is an example: "TypeError: X.accordion is not a function". The line of code triggering the error is in a minified version of jquery. The non-minified code looks as follows:
var $help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
We have not been able to reproduce the error, but our production system generates the error several times a week.
You can see the function without having to log in to our website using the following instructions:
https://www.rephunter.net/manufacturers-sales-reps-find
Navigate down to the search box
Click on the spyglass.
On the results page, there is an accordion near the top, left of the page, which shows up briefly, but can be re-opened by clicking on "Show Help for The Page".

Put the script tag at the bottom of your page or in a $(document).ready() :
var $help = null;
$(document).ready(function(){
$help = $('#help,#help2');
$help.accordion(
{
autoHeight: false,
navigation: true,
header: '.helpItem',
icons: false,
heightStyle: "content"
});
});

Related

Dialog method supported in one page but not in another

I have 2 .NET web pages that have the same popup box in both pages The JavaScript is exactly the same in both pages, I copied the code from the page that works to the other page and it doesn't work. the one that doesn't work gives me the error message:
Scripts/jquery-3.3.1.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'dialog'.
I have tried putting the code at the end of the page, no difference. Best I can tell jquery is being load into the page in the header when I check the page with the IE developer. Hope someone can point me in the right direction.
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link href ="~/Styles/Default.css" rel="stylesheet" />
<script src="../Scripts/jquery-3.3.1.js"></script>
<script src="../Scripts/jquery-ui-1.12.1.js"></script>
<script>
$(document).ready(function() {
$("#dd2875").dialog({
buttons: {
"Cancel": function() {
$("#dd2875").dialog('close');
}
},
dialogClass: 'myTitleClass',
draggable: false,
width: 800,
height: 400,
hide: 2000,
show: 'slidedown',
hide: 'explode',
autoOpen: false
});
$("#btnNewAccount").click(function(evt) {
evt.preventDefault();
$("#dd2875").dialog('open');
});
});
</script>
The DOM probably does not contain an element with the ID dd2875,
Verify that #dd2875 actually exists on the page at the point that you are calling dialog()
I entered the code you sent and this is what I got back in the console.
jQuery.Deferred exception: Object doesn't support property or method dialog' TypeError: Object doesn't support property or method 'dialog'
at Anonymous function (http://localhost:60086/Add_CAC_ID.aspx:14:13)
at mightThrow (http://localhost:60086/Scripts/jquery-3.3.1.js:3534:10)
at Anonymous function (http://localhost:60086/Scripts/jquery-3.3.1.js:3602:12) undefined
I figured it out, had to go back and rewrite the page one section at a time to do it. The problem was a conflict between the JavaScript and the asp validation controls. When I put the control on the page it caused the error with the dialog. I found two solutions to the conflict. I could add the first line in the page load or the second line in the JavaScript either one worked. Thanks for the help in getting me pointed in the right direction.
Unobtrusivevalidaionmode = Unobtrusivevalidaionmode .none
or
$j = $.noConflict;

How to show cfinclude template in dialog box?

I have problem with displaying my page that is included in my template. I set a div tag with an id. Inside I have my cf include that has my test.html page. That div is hidden. So after I click on the link I want to display my page in dialog box. Here is my current code:
<div><a href="javascript:void(0)" onClick="chkLink()"> Click Here</div>
<div id="bDialog" style="display:none"><cfinclude template="test.html"></div>
JavaScript code :
function chkLink() {
$("#bDialog").dialog({
autoOpen: false,
width:750,
modal:true,
cache: false,
load.('<cfinclude template="test.html">'),
buttons: {
"Ok": function () {
$(this).dialog("close");
}
}
});
}
I tried this code but that gave me an error: SyntaxError: unterminated string literal html:'<head>. I'm not sure what I'm doing wrong. If anyone can help with this problem please let me know. Thanks in advance.

How to add two buttons in ajax modelpopup in wordpress?

I have been searching myself silly for this and can't find anything to help.
I want to add 2 buttons to my nav_menu one for register and one for login.
also i want it to popup with the ajax and can't seem to find that either.
I don't want to use the pages for registration or login.
Can somebody help me on this.
Thank You
You can accomplish this in a few ways. I would suggest using jquery/javascript to bind to those menu options and use jquery dialog to view the page in a popup.
$("#dialog").dialog({
autoOpen: false,
position: 'center' ,
title: 'EDIT',
draggable: false,
width : 300,
height : 40,
resizable : false,
modal : true,
});
$("#loginOption").click( function() {
$("#dialog").load('path/to/file.html', function() {
$("#dialog").dialog("open");
});
});
jQuery Dialog Docs: https://jqueryui.com/dialog/

D3,js dialog modal not working any more

I have a google map with popup alerts which used to work but for some reason isn't now.
It is supposed to be modal and have an x to close it. It ought to expand to include all text. This worked before but not any more.
It has a close button instead of the x. The text overflows the size of the window.
I copied the code from a working map but that did not help.
Here is the code:
function prettyAlert(p_message, p_title) {
p_title = p_title || "";
$(p_message).dialog({
title: p_title,
width:400,
height:200,
resizable: true,
modal : true,
close: function(ev, ui) {
$(this).remove();
}
}).css("background", "lightgrey");
}
What could have broken this code. (It is embedded in a Drupal 7 page.)
I resolved this by completely removing the various jquery libraries I had added to the Drupal configuration and using the explicit definitions in the code. I must have introduced something that conflicted with the behaviour of alerts.

Can we hide all the data before page load using Accordion page type?

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?
http://new.cgwealth.com/staff
Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js
http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js
<script type="text/Javascript">
$(document).ready(function () {
$(".accordion").accordion({
autoHeight: false,
navigation: false,
collapsible: true,
clearStyle: true
});
});
</script>
CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css
So i want to hide all the data until my accordion functionality works.
Thanks in advance
i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named 'hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class 'hidden'.
So i use this method to fix. Maybe it is valid for you.
You have to hide the content through css, and then enable the content to be show via javascript. Here is one working copy
http://jsfiddle.net/aneeshrajvj/FcHEC/

Categories