Using Telerik controls version 2012.1.214.340 with mvc 3. I want to open a modal window to an external page and thought it would be straight forward....but either it is not...or more likely I am not googling / reading the correct documentation.
I don't really want to load the content into a hidden div and then pop it modal later if the user chooses to do so.
I would prefer to just do it all in javascript / jquery and so my research led me to write this:
What I wrote thus far in javascript is:
var windowElement = $.telerik.window.create({
title: "Test Modal",
html: "<strong>Where am I</strong>",
contentUrl: 'http://www.google.com',
modal: true,
resizable: false,
draggable: true,
scrollable: false,
onClose: function () { }
});
cshtml razor is:
#(Html.Telerik().ScriptRegistrar()
.jQuery(false)
.jQueryValidation(false)
.DefaultGroup(grp => grp
.Add("telerik.window.min.js")
))
)
When I run the site I get this error on load of the page:
0x800a138f - JavaScript runtime error: Unable to get property 'scripts' of undefined or null reference
and the debugger is on this line in the telerik.window.min.js
b.scripts.push("telerik.window.js")
Based upon the line it broke on I went looking for telerik.window.js and didn't find it in the project...huh? The previous owner didn't include that one file?
So I went to google code and found this.
Created the file and added it as such and still I get the error...
So I think I am missing something else but not sure exactly what.
TIA
You shouldn't have to manually include a telerik JS file, they should be loaded automatically (as long as they are in a correct folder).Do you have a folder /Scripts/2012.1.214 with a lot of telerik.js file + jquery ?
Can you try again without adding that file to the DefaultGroup ?
But you'll have another problem, as I see you declare jQuery(false). Was it done on purpose ? Because if you set it to false, and don't declare another jQuery file in the DefaultGroup, nothing will work.
I had the same problem, doing this worked for me:
#(Html.Telerik().Window()
.Name("_placeholder")
.Visible(false)
)
Including somewhere on the page a static window that will never be used - telerik seems to only include scripts when an control of that type is used.
Related
I am re-writing an application called FILTERtrak and it has been going great so far. I have added a subscription model to it, enhanced it in all kinds of ways and have really started to like Ruby and Rails a LOT. It was originally written with Ruby 2.2.2 and Rails 4.2. I have upgraded it to Ruby 2.7.2 and Rails 6.1.5 (recently). Both versions of the APP I have running on Bootstrap v3.4.1 and jQuery 1.12.4
Of all of the issues I have run into and have SOLVED that are way more complicated it just seems so silly I can't seem to figure out WHY it is happening.
The old version of FILTERtrak is still up and running on Heroku. I haven't switched the APP to my new version as of yet because I am still upgrading it.
This Filter Condition Guide button when you hover over it on the old version of the APP shows the popover just fine. The VERY SAME CODE for some reason on the NEw version of this APP is popping up JUST the title but not the BODY?!? Which is really confusing to me???!?.
That tells me Rails is working, JavaScript is working, jQuery is working and bootstrap is working otherwise the popover title wouldn't come up. So why would it work for the title and NOT the Body when the code hasn't changed?!?
I have been trying everything I can think of today and searched about 1000 times. Seems silly I can't seem to resolve this small issue but I need to get this figured out as I need to use more popovers in the app in other places.
I tried writing another popover in another area of the APP and it worked fine?!? So I don't know if it is something due to the newer version of Ruby on Rails that is preventing the body part from not coming up or what it is.
I am NOT very good yet with the frontend stuff. I am just kind of starting to get used to HAML. The HAML line that deals with the toggling seems very complicated to me (starts with .btn.btn-xs). I tried using some online convertors to change that one line from HAML to HTML so I could better see what is going on but no convertor was able to successfully convert it. So out of luck that way. I re-wrote the line in HTML myself and it did the very same thing so I am not sure if it has anything to do with the HAML line that starts with .btn.btn-xs or not. Since it is still working with that haml line the way it is written I assume it isn't the issue but I have long run out of things to try.
Here is the HAML View that has the Button on it. (I am just including the relevant part of the view and other code, if anyone needs to see more to help let me know).
.text-center
.btn.btn-xs.btn-block.btn-primary{data: { popover: { content: "#condition-popover" }, placement: "top", toggle: "popover", trigger: "hover click"}, tabindex: "0" } Filter Condition Guide
#condition-popover.hidden
.popover-heading
What do the conditions mean?
.popover-content
%dl
%dt Operational
%dd
%ul
%li No soot on outlet/bypass
%li No cracks
%li Wire test passes
%dt Potentially Compromised
%dd
%ul
%li 0-20% soot on outlet/bypass
%li No cracks
%li Dents or impact damage
%dt Compromised
%dd
%ul
%li 20%+ soot on outlet/bypass
%li Any cracks observed
%li Wire test fails
Here is the JavaScript/jQuery file
(function() {
var ready;
ready = function() {
$('[data-toggle=popover]').popover({
container: 'body',
html: true,
content: function() {
var content;
content = $(this).attr('data-popover-content');
return $(content).children('.popover-content').html();
},
title: function() {
var title;
title = $(this).attr('data-popover-content');
return $(title).children('.popover-heading').html();
}
});
return $('#service_filter_condition').on('change', function() {
var selection;
selection = $(this).val();
switch (selection) {
case 'operational':
$('#customer_notified_container').fadeOut();
break;
case 'potentially_compromised':
$('#customer_notified_container').fadeIn();
break;
case 'compromised':
$('#customer_notified_container').fadeIn();
break;
default:
$('#customer_notified_container').fadeOut();
}
});
};
$(document).ready(ready);
$(document).on('turbolinks:load', ready);
}).call(this);
Here is a pic of what is currently coming up. You can see the heading and it even has it's correct styling for the title section.
Here is a picture of the very same code WORKING on the older version of the APP:
What it even more strange to me is if I inspect the html page, the data is all there! It is just not toggling the body section and I just am at a loss to understand WHY?!? I tried adding in container: 'body' in various places as I saw that can solve the body not coming up sometimes. All of the other examples I was able to find were not even similar to my own.
If anyone wants to see anything else please let me know.
I appreciate ANY input as to what could be causing this minor irritant from occurring.
It took me less time to re-write some DB queries that getting this tiny issue fixed, driving me crazy.
Thank You,
Scott
UPDATE: Here is the now working code:
JS
(function() {
var ready;
ready = function() {
$('[data-toggle=popover]').popover({
html: true,
trigger: 'hover click',
placement: 'top',
title: 'What do the conditions mean?',
content: function() {
return $('#popover-body').html();
}
});
return $('#service_filter_condition').on('change', function() {
var selection;
selection = $(this).val();
switch (selection) {
case 'operational':
$('#customer_notified_container').fadeOut();
break;
case 'potentially_compromised':
$('#customer_notified_container').fadeIn();
break;
case 'compromised':
$('#customer_notified_container').fadeIn();
break;
default:
$('#customer_notified_container').fadeOut();
}
});
};
HAML:
.btn.btn-xs.btn-block.btn-primary{"data-toggle": "popover", "tabindex": "0", "html": "true" } Filter Condition Guide
#popover-body.hidden{"data-toggle": "popover", "html": "true"}
= render 'filter_conditions_popover'
It now works properly. I ended up keeping the render line as I like having the information in a partial, much cleaner. I also kept the re-written Javascript as I think it is much simpler to read.
Ok I will have to file this one under What the Heck?!?
The issue was the popover would NOT display anything with the < dl > if HTML tag or %dl tag if HAML.
If you put the < dl > tag if HTML or the %dl if HAML the popover will IGNORE everything from that point forward. I proved this about 20 times over because I simply couldn't believe it. I can't make ANY sense of it but that it was it was. I even changed having the haml code under the #condition-popover.hidden line to use = render 'filter_condition_popover' and I tried using HTML instead of HAML thinking maybe it was some strange bug with HAML. Nope, HTML or HAML it will simply not allow the < dl > tag.
I figured this out by being frustrated. I put in To heck with you (I think I put something stronger than that actually) under the line where the body portion wasn't showing up and refreshed and to my complete surprise the line I put in under the #popover-content line showed up?!?
I then realized the code would return plain text?!? So I then tried using HTML instead of HAML and got the same results. So I started from plain text and then tried adding the tags back in and as soon as I put in the dl on HTML or HAML it stopped working. I did some Google/Bing searching and I can't find anyplace where that is a known issue. Even more bizarre as I said in my initial post the same code with the same tags are working on an older version of Ruby on Rails on the very same APP. Go figure that one out, I can't.. I don't know if it is one of the gems that has some bizarre conflict or WHAT the issue could be.
So I ended up using < h6 > in place of the < dl > and I added a bold in there as well and it looks almost identical. I also moved some of the HTML elements into the JavaScript side to simply the HAML portion. Lastly I ended up putting the pop over body data into a partial.
So if anyone runs into this I hope this information will help you. I will update my post with the new code I used. I even simplified the original JavaScript some hoping that would fix it but it didn't; that darn dl tag!
This is a screenshot of the error from Developer console in browser:
Now, I understand that the error occurs because .suggest() is not a function but it is being called in ajax.js?ver=1.6.5:1287. I don't fully understand what the errors information provided below that means. The lines i etc. Am I supposed to find the .suggest() function in jquery.js?ver=1.12.4-wp:2?
Here is the code from ajax.js:
jQuery(document).ready(function ($) {
$('#wpf_tags').suggest(
window.ajaxurl + "?action=wpforo_tag_search",
{ multiple:true,
multipleSep: ",",
resultsClass: 'wpf_ac_results',
selectClass: 'wpf_ac_over',
matchClass: 'wpf_ac_match',
onSelect: function() {}
}
);
// More code
This is from a WordPress plugin which works fine with the default 2019 theme. However, it throws up the error when I use it with a theme I created. I am loading jQuery version 3.3.1 in the footer of my theme. Can this be the reason for the above error?
Thanks.
UPDATE
I added the plugin to the footer of the webpage but the error still did not disappear. After that I looked at the source code of the page by pressing Ctrl + U. This showed me that the problematic file ajax.js loads on line 102. However, the suggest plugin loads on line 515.
I have no control over the source code on that page because it is generated by the WordPress plugin. How can I load these files in proper order?
Thanks.
I'm getting the following error in my console:
Uncaught TypeError: Cannot read property 'length' of undefined galleria-1.4.2.min.js:2
trying to use Galleria.io, version 1.4.2 with the basic "classic theme". I do have jQuery (v1.10.2) included and the following code which should be the basic code for getting the galleria image gallery to work:
<script src="galleria/galleria-1.4.2.min.js"></script>
<script>
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
</script>
and guess what, it seems to work perfectly. BUT, I'm having this error in my console and I'm not allowed to have errors in my console. Neither do I like error messages in my console...
I have no clue what is causing this and what I can do about it, all I know it's triggered by the following line:
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
Even if I would leave the options blank. I'm also using bootstrap v3 if that might have anything to do with it.
The selector is a class and not an ID, but I've seen it in example code so it souldn't be a problem. I have multiple small image galleries on one page, so 0, 1 or more so working with ID's is not a good option. My application does require this.
Thanks in advance for helping.
Hello fellow Galleria User. Your problem is
Galleria.loadTheme('/galleria/themes/classic/galleria.classic.min.js');
You have to ensure its loaded before
Galleria.run('.galleria', {responsive: true, height: 0.724, lightbox: true});
is called.
To do so, I loaded the Theme in the Header after the Galleria.js.
I invoke the Galleria.run Command in a script-tag after the Galleria Container containing the Pictures.
I am creating my first yii framework project. I am using cgridview in my project. When I load the page an error is showing in the console. The error is coming from a Javascript code generated by cgridview.
error is
TypeError: jQuery(...).on is not a function
jQuery(document).on('click','#items-grid a.delete',function(){
My javascript is
/*<![CDATA[*/
jQuery(function($) {
jQuery(document).on('click','#items-grid a.delete',function(){
confirmDelete(this);
return false;
});
jQuery('#items-grid').yiiGridView({'ajaxUpdate':['menuitems- grid'],'ajaxVar':'ajax','pagerClass':'pager','loadingClass':'grid-view-loading','filterClass':'filters','tableClass':'items','selectableRows':1,'enableHistory':false,'updateSelector':'{page}, {sort}','filterSelector':'{filter}','pageVar':'items_page'});
});
/*]]>*/
What Kind of issue this is. I have included jquery.js latest vertion in my header. I tried older version also but this error is same. How should I fix this error?
You may need to disable Yii's build-in JQuery and use your own version of JQuery. To disable Yii's built-in JQuery put the following lines into your view and load your own JQuery with avoiding conflicts:
Yii::app()->clientScript->scriptMap=array(
'jquery.js'=>false,
'jquery.ui.js' => false,
);
I've been scratching my head on this for 2 days, pretty sure I'm just missing something simple but I can't for the life of me figure out why it's not working.
I'm trying to use the script below on my WordPress site to disable specific dates within a datepicker field in a ContactForm7 form.
I can load the script in jsfiddle with a simple input field using the same id and it works perfectly...but when I add it to my site the dates aren't disabled, and there's an error in the JS error console that says "jQuery(...).datepicker is not a function"
I've added it in my header.php file, just below the wp_head() call and just above the </head> tag. I've assigned my datepicker field with the id of dpick like the script uses.
I read that this error is commonly caused when using the $ symbol because it can conflict with other jQuery scripts within WordPress...so they suggested replacing $ with jQuery instead (which I've done in the script below)...but I'm still getting the error
var unavailableDates = ["1-9-2013", "2-9-2013", "3-9-2013", "4-9-2013", "5-9-2013"];
function unavailable(date) {
dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
if (jQuery.inArray(dmy, unavailableDates) == -1) {
return [true, ""];
} else {
return [false, "", "Unavailable"];
}
}
jQuery(function() {
jQuery( '#dpick' ).datepicker({
dateFormat: 'dd MM yy',
beforeShowDay: unavailable
});
});
Can't thank you enough for any help you can offer...this seems like such a simple thing but I just can't seem to wrap my head around it!
The are several reasons for this error:
The jquery.ui is used before jquery.
The $ is used by another library.
The jquery lib that is referenced locally(wordpress) has different version from that using jquery.ui.
When the right library and version is referenced the browser cache must be cleared.
I was having the same problem. In my case I had two jQuery script references on my main page (_Layout.cshtml in ASP.NET MVC). I added 1 reference to jQuery at the top but there was 1 at the bottom of the page that I didn't notice... In Firebug this is what I saw:
So as you can see, jQuery UI was sitting in the middle of the conflict! :D This took me some time to figure out.
check if all files are loaded.Should have 200 ok status.
This worked for me, for conflicting jquery codes -
<script>
$.noConflict(); //Not to conflict with other scripts
jQuery(document).ready(function($) {
$( "#datepicker" ).datepicker({
dateFormat:"yyyy-mm-dd",
changeMonth: true,
changeYear: true,
maxDate: "+0D"
});
});
</script>
I know this question is old but may be It can help other people:
The best practice to include js in wordpress is to do it using It's queuing function in the php template:
wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array ( 'jquery' ), 1.1, true);
(seen here)
It allows to declare the dependencies of your script, in this case, the jquery datepicker. You can check de built-in scripts that wordpress can provide in:
https://developer.wordpress.org/themes/basics/including-css-javascript/#default-scripts-included-and-registered-by-wordpress
Wordpress provide dependencies specifically for jquery datepicker so you could include your script with something like:
wp_enqueue_script( 'script', 'mypath' . '/js/script.js', array ( 'jquery', 'jquery-ui-datepicker' ), 1.7, true);
Note that if you only declare the jquery dependency you'll get an error like
'jQuery.datepicker(...) is not a function'
since the datepicker functions are not included in the base wordpres jquery.
I don't have much experience with wordpress so I might be out of line trying to help. I have used pickadate though.
In the past I've gotten this error before
Uncaught TypeError: Object [object Object] has no method 'datepicker'
It's usually occurs because I didn't load the js files in the right order. Looking in developer tools on your site I don't see where the pickadate plugin is even loaded. I would check (if you haven't yet) to make sure the plugin is being loaded as well as being loaded in the right order.
Okay , I have the same problem a while ago and the solution to the problem is just to add to include the jquery.ui.datepicker.js it is included in the jquery package. However i am still wondering why I have to include this because Im using jquery.ui before and the jquery.ui.custom or simply the jquery js file will do the .datepicker() function for me.
Anyway it's still nice it now working . Hope this helps.
I moved all scripts from footer to head then things started to work propertly
I know this is an old issue. I had this same issue and it was because of including jquery.min.js along with jquery-1.10.2.js and jquery-ui.js. So by removing jquery.min.js my issue of TypeError: $(...).datepicker is not a function got resolved. Hope it helps to someone.
I had a similar issue but only on firefox browser. We are using require to load the js files. I had following lines in my javascript.
require(['jquery', 'jqueryui'], function ($) {
$(document).ready(function () {
$("#form1").validationEngine({ bindButtons: $(".bindButton") });
$("#txtBidDate").datepicker({dateFormat: 'mm-dd-yy'});
$("#txtInstDate").datepicker({dateFormat: 'mm-dd-yy'});
});
Require loads js files asynchroulsy and the order is not gauranteed unless you define shim config or if your js files are all loaded as AMD. In our case, jquery was loaded after jquery-ui. We defined in main.js for require that jquery-ui has dependency on jquery. This fixed it for us