ColorBox - Error: cboxElement missing settings object - javascript

What I'm trying to do is to play a video inside ColorBox lightbox.
My HTML code is as follows. When I click on the link it should play the video.
Video
What I do with Colorbox is as below. Load the video into lightbox.
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
It gives me the below error.
Error: cboxElement missing settings object
ScreenShot
What should I do to fix this ? Given that there are no js errors except above one. jQuery is included correctly.

I had the same problem. I'm having a hard time trying to understand why exactly, but somewhere the colorbox is running in to a conflict because it also uses the name 'iframe' internally. Somehow this is causing a conflict when the classname 'iframe' is used as the class by which the function is called.
In my case changing
jQuery(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
to:
jQuery(".photo_link").colorbox({iframe:true, width:"80%", height:"80%"});
worked.

Well this worked for me. Even though everything was in place and all the code was generated in the backend, for some reason colorbox wasn't picking up the links properly because on my page the link was inside a div that shows/hide on mouseover. Anyway, the way it worked for me was this one:
$(".iframe").live('click', function(e){
$(this).colorbox({href: $(this).attr('href'), iframe:true, innerWidth:640, innerHeight:480, open:true});
e.preventDefault();
return false;
});
In this way you rebind the actions to the element and then forces colorbox to open the link.
I hope it works for you and it isn't too late.
PS: If you're using jQuery 1.9+ you must use on instead of live

I ran into this same error and solved it by removing a duplicate call to colorbox. I had included both the library as well as my colorbox function in two separate include files. I figured it must be a duplicate because I had to close each colorbox window twice after it launched.
Check your code and make sure that the jquery.colorbox-min.js is only included once, as well as your function that calls it. In my case, my function was simple:
$(document).ready(function(){
$("a.single_image").colorbox();
$("a.link_preview").colorbox({iframe:true, width:"80%", height:"90%"});
});
After removing the duplicate calls, the problem went away. Hope it helps!

I experienced this error Error: cboxElement missing settings object when making a second jQuery on document ready function call after the initial on document ready function call that holds the colorbox parameters.
My situation:
On my pages I use and call just one external .js file that holds all
my code.
Inside the external .js file I have the colorbox parameters within a
jQuery on document ready function.
On the troubled page (page with cboxElement missing settings object
error), immediately following the external .js file I had some
jQuery code that used the on document ready function: $(function(){});
My problem:
This second on document ready call caused and triggered the error Error: cboxElement missing settings object for me.
My solution:
The fix was as easy as changing the troubled pages code from using jQuery's on document ready function to using Javascript's native self-executing anonymous function.
(function(){
})();
Sure enough the error Error: cboxElement missing settings object went away and everything works perfect!

Related

Is there any jquery to detect if the html tag was not closed? or page has not completely loaded?

I'm experiencing an issue (which I still need to fix) where my entire page does not load. It gets cut off in the middle of an element.
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
I was thinking of just putting <div id="end_of_page"></div> at the bottom of the page, and checking if that was rendered, if not, i'll know something went wrong and can reload to try again.
thanks!!
Is there a way using jquery or javscript to do something like:
if (some element has not loaded yet) {refresh the page}
You can do that, yes. Put this in the head after including jQuery:
<script>
jQuery(function($) {
if (!$("#end_of_page")[0]) {
// Something went wrong, load again
location.reload();
}
});
</script>
You'll enter the body of the loop (and so, force a reload) if the end_of_page element doesn't exist as of when the jQuery ready event fires (which is meant to be when the page is done loading).
But: Better by far to figure out why your page is getting cut off half-way through and solve that. This sort of workaround is not a solution.
You can use
$(document).ready(function(){
// code here
});
that code will only run when the page has loaded. A convenient shorthand is:
$(function(){
// code here
});
assuming your jQuery object is $. To finish your requirement, you can have a variable that is set within the load function, then use a timer set at the start of the page to check for it. If it's not there, reload.
Personally, I think you should invest some time into figuring out why your pages only half-way (Firebug or the Chrome Inspector may help you do this, it might be a resource in your page that is causing it to hang, and since most HTTP requests are only made 2 at a time per hostname, it might be waiting for that to return before fetching the rest).
Might be a server-side issue OR some script or library is stealing your fish $ (AKA: 'Dollar').
I'll rather suggest you to debug your code instead of refreshing the page trying to fix issues.
Make sure your scripts are in the head of your document, and jQuery + your jQ functions right before the closing </body> tag wrapped in:
(function($){ /*your functions*/ })(jQuery);

Making jQuery .on() work with Rails 3

I'm building a Rails 3 app, and trying to get the jQuery .on() function working. It's currently not doing anything.
In assets/javascripts/v-application.js:
console.log('application');
$('body').on('click', function(){
alert('test');
});
When the app loads, the console displays "application" (as it should), but when I click on the body, no alerts fire. If I paste that exact same javascript into the console and click on the body, the appropriate alert fires.
If I view v-application.js in the browser, it shows the function.
I am using the latest versions of jquery-rails (2.0.1) and rails (3.2.2). This is all in the development environment.
What's going on that Rails doesn't know how to handle that basic function call? Does this have to do with the asset pipeline? How can I get that working?
I'm going to guess that you don't have a ready function.
$(function() {
$('body').on('click', function(){
alert('test');
});
});
If you stick the code directly in the main JS file, doing $('body') will not find anything, because when the script tag is interpreted, the body tag hasn't been processed yet. Sticking the logic inside a ready function will wait for the whole document to be parsed.
Are you using jQuery 1.7.1? That's when .on came about, had the issue before.
jsFiddle here: http://jsfiddle.net/LmC6x/
As #loganfsmyth said though, I'd recommend using the ready function.

How to execute custom js after jQuery Mobile has created a new page div?

So I am using Django 1.3 and jQuery Mobile for a webapp. When trying to create new functionality or override some of jQM's functionality I don't seem to be able to get it to excute some code on page creation. I am still hackish at js, but it seems to be a bigger problem than myself
How to execute JavaScript after a page is transitioned with jQuery Mobile
I end up putting js snippets on the page itself which doesn't seem the correct way to handle they work sometimes and sometimes not. I have tried the same commands in the script console of Chrome and the selector and commands seem to work fine.
examples:
Hiding the numeric inputs on on sliders I end up putting this script tag in the template itself, I know this is bad form, but am unsure how to get it to work otherwise:
<script>
$('#form_div > input').hide();
</script>
Trying to do a similar snippet:
<script>
console.log("Focus snippet!");
$('.ui-input-text').blur(function(){
console.log("focus was changed!");
});
</script>
yields no results, except the initial console.log, but I can execute through the script console and it works fine.
I saw in this several other posts, but none have seemed to answer the question clearly and I am unsure how how to make this work the right way.
This seemed the closest suggestion, but I was unable to make it work:
Jquery mobile: how to execute custom jquery code in page
$(“body”).delegate(“div[data-role*='page']“, “pageshow”, function(){
// Your code here. It is good to check to not run unnecessary code
});
Any suggestions would be greatly appreciated.
Look at the documentation here: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
One small note is that all the javascript executed on any page must go in the base page (like: index.html). If you add javascript for page2.html in page2.html it will not be executed. if you add the javascript for page2.html in index.html it will be executed.

IE7 gives error

I have one page which have chat application,wall comments,uploading photos,videos on that page.All is working fine on mozilla firefox,chrome but does not work on IE7.It gives two error
jquery-1.4.4.min.js
HTML Parsing error.Unable to modify
the parent container element before
the child element is closed
(KB9278917).
Because of this error my rightside bar of this page is not seeing & chat application is also not working.
Please reply me as early as possible.
Thank you
This question discusses the error message you have listed as (2).
You're modifying document while it's being loaded (when browser hasn't "seen" closing tag for this element) . This causes very tricky situation in the parser and in IE it's not allowed.
Since you're using jQuery, you can probably avoid this by putting whatever code is causing this error in a function called once the page is loaded, using the jQuery.ready function:
<script>
jQuery.ready(function() {
// put your code here, instead of just inside <script> tags directly
});
</script>

ASP.net: ClientScript.RegisterClientScriptBlock fires before jQuery is loaded

Interesting problem here from some inherited code I recently looked at. I'm trying to add a compression module to a project. It is loading all the JS and CSS files, combining them, minifying them, and compressing them. I've tried a number of solutions, but all of them have one fatal problem.
I have some javascript that is being loaded via Page.ClientScript.RegisterClientScriptBlock in the PreRender of the MasterPage. The compression module is loading as a Script Tag link in the MasterPage, but when I run the page... the code from the PreRender is lopped on top and is giving me a '$ is undefined' error, telling me jQuery isn't loaded yet.
Furthermore, I can't seem to get past the same problem when it comes to inline javascript on content pages.
Any ideas as to what is causing this? Enlighten me as I have no clue.
If have done this before with RegisterStartupScript (instead of RegisterClientScriptBlock) and called the $(document).ready(function() from WITHIN that script.
If the script tag link that eventually expands out to jquery is not in the head, but in the body of the page, then $ will be undefined when the script block executes, unless it is included in the html before the opening <form /> tag in the rendered html, which I understand is where RegisterClientScriptBlock spits out its script (just after that opening tag).
If this is not the case, and the joined/minified script is in the head, then I'd use a browser debugger such as Firebug or IE Dev Tools to verify that the jquery script is being correctly included in your combined script.
I know this answer is late to the party, but try calling ClientScript.RegisterClientScriptBlock in your OnPreRenderComplete (rather than OnPreRender) handler. This inserts the code later in the page rendering process.
All your jQuery code should be written inside the DOM-ready function:
$(function() {
// your code here
});
indipendently from where you place it in the page, 'cause the jQuery() function isn't avalaible before.

Categories