jQuery - Apprise not working in ajax loaded division - javascript

I am attempting to utilize apprise link on my website. I have a webpage on which I include the apprise javascript and css files. I also include my own javascript file containing the following function
function cant_find(data)
{
Apprise('Modal test');
}
I am utilizing jquery $.load() to load another page into a division on the page.
This works perfectly.
Within the callback of the load, I call my function
$('#div').load(base_url+'link',{},function(data){
cant_find();
});
This however does not work and gives the error:
$Apprise is null
Does anyone have any suggestions as to why?
Thanks

Related

Javascript not loading wordpress footer

I recently started learning Javascript. I am trying to add a small script to the footer of a page on my Wordpress site. I am using the "insert headers and footers" plugin. However, the script does not seem to load. I do not believe it is a syntax issue, since a similar script works on a different site. However, I cannot figure out what is different here. When looking at the inserted script in chrome inspector, inside of the script seems to be just plain text (not colored javascript code). Is there something I can do to fix this and make the script run?
Link to the page: http://memories.uvaphotography.com/home/services/
Javascript code I am trying to insert:
<script>
$("#reply-title").hide();
</script>
jQuery in WordPress runs in noConflict mode which means the global $ shortcut for jQuery isn't available. Replace your code with the following:
<script>
jQuery(document).ready(function($) {
$("#reply-title").hide();
});
</script>
Inside the document ready wrapper the $ can be used as an alias for jQuery.
The reason that you're not seeing your script execute is because jQuery isn't assigned to the $ variable.
When viewing the element inspector console on your page there's a javascript error
Uncaught TypeError: undefined is not a function
When I run the same script via console replacing $ with jQuery the #reply-title is hidden successfully.

ColorBox - Error: cboxElement missing settings object

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!

jquery load - not able to run the javascripts

I am using jquery ui dialog. In that dialog box, a php file(ex:test.php) is getting loaded using ajax call. Inside the test.php file, it contains some javascript code.
The problem is, after loading the test.php file in to jquery ui dialog, the javascript code inside the test.php file are not getting loaded. Any idea to solve this.
Thanks in advance.
If it is pure inline JavaScript, it should be executed. Does it implement $(document).ready()? In that case the JavaScript will not be executed because the event will never fire. Also be sure your JavaScript code comes after all HTML to allow your script to find the HTML elements.

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.

Document.ready script not working when page called into a tab

I have several pages that are called onto an ajax tabbed area. the pages that are called have javascript on them however the document.ready function will not load for each of these pages when loaded onto the tab. Instead I have had to put a button on the pages to load the function manually. Iv tried putting the document.ready function on both the page being called and the pages calling it but it still wont run. Is there any other way i can use rather than having a button? I dont want buttons displaying on my pages that have to be clicked before it looks good =(
Heres the code that calls the the page:
onclick="createNewTab('dhtmlgoodies_tabView1','Remote Access','','RemoteAccess.html',true);return false">Remote Access
All the javascript files are connected to the main page.
A button is located on the remoteaccess page:
input type='button' value='Load.' onclick='loadlightbox()'
The loadlightbox function is inside a javascript file that is conected to the main page:
loadlightbox = (function() {
$('#gallery a').lightBox({fixedNavigation:true});
});
There is no document.ready event being fired when you load the content into the page with JavaScript. Most libraries just stick what is returned with innerHTML. Most libraries just rip out the JavaScript code from the responseText and run it through eval().
You probably want to forget the whole document.ready and just stick the code block at the end.
The document.ready function won't fire because the page (document) is already loaded. The remote page is loaded as content not as a document.
Since you are using jquery you should take advantage of the .load function and also you should take a unobtrusive approach to attaching the onclick to your link. This allows your JS and code to be separate.
//Using Jquery load
$("#id_of_link").click(function(e){
e.preventDefault();
$('#dhtmlgoodies_tabView1').load("RemoteAccess.html",
function(){
//callback code here
})
})

Categories