I've been having some trouble adding Jquery Impromptu boxes into a project of mine. The code works fine outside of the project, but when placed inside malfunctions.
<script type="text/javascript">
function openprompt(){
var txt = 'Text here';
function mycallbackform(v,m,f){
if(v != undefined)
$.prompt(v +' ' + f.alertName);
}
$.prompt(txt,{
callback: mycallbackform,
buttons: { Add: 'add', Cancel: 'cancel' }
});
}
</script>
When executed this function will do nothing. If I remove the $.prompt then it will work.
I'm also getting this console message when I execute the function...
Uncaught TypeError: Object function ( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context, rootjQuery );
} has no method 'prompt'
The code is placed in a PHP file which I think might be causing the problem, but I have tested the code in another PHP file, so its not the PHP alone.
I am planning to use the prompt to display a combo-box which is why I can't use a standard alert.
I'm quite new to these things, am i doing anything obviously wrong?
Thanks
Have you extended the jQuery methods when you used this code out side this project? If yes you should include that extension of jquery in this project.
$.prompt this means, in your jquery library there is a method name prompt.
If NO, your jQuery library of project is not same with Out side the project where you have tested this code. There must be a method (function) name prompt and you have to include that in your project.
Related
I'm using Joomla 2.5.19 and I have removed Mootools since it is generating a conflict with JQuery. I've also disabled caption.js.
Now, on every page, the following script is being added in the head section:
<script type="text/javascript">
window.addEvent('domready', function() {
$$('.hasTip').each(function(el) {
var title = el.get('title');
if (title) {
var parts = title.split('::', 2);
el.store('tip:title', parts[0]);
el.store('tip:text', parts[1]);
}
});
var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false});
});
</script>
This is throwing the error:
Uncaught TypeError: Object [object global] has no method 'addEvent'
How do I get rid of this?
I followed the instructions here and deleted:
JHtml::_('behavior.caption');
From components/com_content/controller.php
But no luck. I also tried including unset($this->_scripts['/media/system/js/caption.js']);
How do I get rid of this?
You should not remove Mootools, for conflictions, you can use jQuery Easy plugin. Visit http://extensions.joomla.org/extensions/core-enhancements/performance/jquery-scripts/18327
I've managed to remove the script with:
<?php
// Custom script
$document =& JFactory::getDocument();
// Remove call to JTooltips
$document->_script = preg_replace('window\.addEvent\(\'domready\',\s*function\(\)\s*{\s*\$\$\(\'.hasTip\'\).each\(function\(el\)\s*{\s*var\s*title\s*=\s*el.get\(\'title\'\);\s*if\s*\(title\)\s*{\s*var\s*parts\s*=\s*title.split\(\'::\',\s*2\);\s*el.store\(\'tip:title\',\s*parts\[0\]\);\s*el.store\(\'tip:text\',\s*parts\[1\]\);\s*}\s*}\);\s*var\s*JTooltips\s*=\s*new\s*Tips\(\$\$\(\'.hasTip\'\),\s*{\s*maxTitleChars:\s*50,\s*fixed:\s*false}\);\s*}\);', '', $document->_script);
?>
Thanks to this post.
If you are developing your own extension there is really no need to remove Mootools or use a third party extension to load jQuery. Mootools is used heavily in Joomla, especially version 2.5.x; so removing it could have adverse affects on expected behavior when using core functions. If you need to use jQuery simply wrap any jQuery code around an IIFE like so:
function($) {
// jQuery code goes here
})(jQuery);
I am attempt to load a little JS code using a method php static class.
The aim is to maintain every JS on the same place of their HTML object.
So, when we call the method it will create the HTML obj and will create a tag script whit the $jsString inside it.
myClass
myMethod(){
btnObjc id=txtbtnid
$jsString="
$(document).ready(function(){
$(\"#txtbtnid\").click(function() {
alert(\"oook\");
});
});
";
}
so far so good. It creates the btn Object and create the tag script just after the btn, whit the $jsString inside it.
The problem is it is unresponsive. That means I press the button and not is happening.
Any idea folks?
The problem is that you are creating button after page loading
Solution:
Use live function instead:
$(document).ready(function(){
$(\"#txtbtnid\").live('click',(function() {
alert(\"oook\");
}));
});
I'm having problems trying to call a Javascript function from an enqueued javascript file used whilst editing Wordpress pages. I have created a simple meta box with some AJAX hyperlinks that I want to be able to call functions from the Javascript file (pretty simply stuff but I keep getting error "blah(1) is not defined".
HTML CONTAINED IN METABOX:
Delete Item
JS:
function blah(theid){
if ( confirm("Are you sure you wish to remove this image (Note: Images are not removed from the Media Library)?") ) {
var data = {
action: 'myajax-delete',
imgid: theid
};
jQuery.post(ajaxurl, data, function(response) {
//Parse the JSON Object
var object = jQuery.parseJSON(response);
if ( response.status == 'true' )
{
jQuery('#file_' + theid + '_row').remove(); //remove TR
alert('Image removed from this portfolio');
}else{
alert('Sorry, that image could not removed right now, please reload the page and try again.');
}
});
Note: The PHP server side code works fine and responds absolutely as expected to my manual Posts. The javascript file is definitely present and being downloaded by the browser as expected.
If I use the following line of code below, the AJAX works (so I know the JS is OK) but I need to be able to call the function by name rather use a selector. I'm very keen to work out why I can't call a simple function!!!!
jQuery('.delete_pimg').click(function() { ^Above code^ }
Just to re-cap the error I get when the link is clicked: 'blah(1) is not defined'
I hope I've explained this clearly - if not, please give me a shout :)
Ok Basically - I could not get this to work. My javascript is absolutely fine, so In order to call my own functions, I declared them within the page itself rather than calling in a JS file. This seems to work and my code executed with no errors straight away.
I.e
<script type="text/javascript">function blah(id){alert("This Works Nicely!");}</script>
A work around but at least solved my problem anyway.
Wipes sweat from forehead
I was having the same issue where blah() is not defined, and found out I needed to have the enqueued js file just define the function, instead of wrapped with a jQuery(document).ready(function($) { function blah(param){[...]} }).
Here's what my code looks like now, which got everything working for me:
Inside of functions.php
(short snippet within my file)
function blah_init() {
# Want this on all pages
# Queue JS and CSS
wp_enqueue_script(
'blah-file', // handle
get_template_directory_uri() . '/assets/js/blah-file.js', // source
array('jquery'), // registered script handles this script depends on
'1.0', // version
true // true = in footer, false (or blank) = in <head>
);
}
add_action('wp_enqueue_scripts', 'blah_init');
Inside of blah-file.js
(this is the full contents of the file)
//jQuery(document).ready(function($) {
function blah(param) {
console.log('Blah triggered: ', param);
}
//})
Inside of header.php and footer.php
(short snippet where I output some link, such as social link)
<!-- Ignore the href, this has nothing to do with getting this to work -->
Facebook
Sorry if title is not too clear but I think it's about right. NEhow, what I would like to do is a bit like (well is to a certain extent) building a widget with JQuery (pref), PHP & CSS.
What I would really like to happen is for a "member" of my site to simply paste 2 lines of code in their HTML to load the widget. Something like this:
<script type="text/javascript" src="http://www.mydomain.com/script.js"></script>
Then to display the widget something like this <div id="displaywidget"></div>
OK that bit is "easy" and ok. But how do I include JQuery or "something" to generate the widget in script.js
What I mean is "displaywidget" - the ID of the widget div will be the name of a php file on my server so essentially script.js will need to load displaywidget.php into the div displaywidget.
I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?
Thinking as I write "pure" java can do "most of what I want i.e. document.getElementById('displaywidget'), BUT I would prefer to also "include" Jquery.js as I would like some aspects of the widget to use JQuery. Example being the JQuery UI date function.
Sorry if I am rambling a bit but trying to think as I go along. My "real" problem is I am not too sure on "pure" javascript i.e. getting the div to display/load displaywidget.php
Suggestions please. (Oh if I am barking up the wrong tree please feel free to tell me - nicely:) )
Thanks in advance
I think I use document.getElementById('displaywidget') to get the div but how do I then "write/insert/load" displaywidget.php inside the div?
You're looking for the AJAX behaviors inside of jQuery which would make the call to the php page and then push the data into the div.
You should be loading jQuery early on in the process, right up front in your head element. Once its loaded it will be cached so no worries of its on every page. No real overhead incurred.
Once jQuery is installed you can call one of many AJAX functions related to obtaining data and popluation elements. Theres $.load(), $.ajax(), and a few others that escape me unless I go and check out their docs section.
You can do all of this without jQuery, but its more code and you have to control for browser differences.
You can load jquery into script.js, just copy and paste it after or before whatever javascript lives in script.js.
So if script.js is:
//start of file
alert('ex');
//end of file
Make it:
//start of file
alert('ex')
Copy and pasted Jquery source
//end of file
After a bit more "trawling & thought" I found this code:
(function() {
// Localize jQuery variable
var jQuery;
/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
script_tag.onload = scriptLoadHandler;
script_tag.onreadystatechange = function () { // Same thing but for IE
if (this.readyState == 'complete' || this.readyState == 'loaded') {
scriptLoadHandler();
}
};
// Try to find the head, otherwise default to the documentElement
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);
} else {
// The jQuery version on the window is the one we want to use
jQuery = window.jQuery;
main();
}
/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
// Restore $ and window.jQuery to their previous values and store the
// new jQuery in our local jQuery variable
jQuery = window.jQuery.noConflict(true);
// Call our main function
main();
}
/******** Our main function ********/
function main() {
jQuery(document).ready(function($) {
******* Load CSS *******/
var css_link = $("<link>", {
rel: "stylesheet",
type: "text/css",
href: "style.css"
});
css_link.appendTo('head');
/******* Load HTML *******/
var jsonp_url = "http://al.smeuh.org/cgi-bin/webwidget_tutorial.py?callback=?";
$.getJSON(jsonp_url, function(data) {
$('#example-widget-container').html("This data comes from another server: " + data.html);
});
});
}
})(); // We call our anonymous function immediately
writtend by Alex Marandon and found here http://alexmarandon.com/articles/web_widget_jquery/ - works a treat, exactly what I wanted, including/installing JQuery into a .js file
I'm trying to create a module in joomla, which uses one jquery plugin. I've to do an ajax operation while clicking on an element in the module. Currently I'm specifying the whole path to the php file. But I know Its a wrong method.
The code in jquery plugin is like this.(please note the second line where the path is specified in the jquery plugin file)
$.get(
"/subdirectory/MyBlog/modules/mod_calendar/getCalendar.php", {
month: $("#selectedMonth").val(),
year: $("#selectedYear").val(),
flag: '-1'
}, function(data){
$("#monthlyCalendar").html(data);
$("#monthlyCalendar").show();
}
);
What is the correct method to specify the path in a jquery plugin file.
Also I need to know where to put my jquery plugin file in the module.
I found an answer in the following blog.
http://blog.subooa.com/development/joomla-coding/ajax-in-joomla-with-jquery/
The best way I found to do it is to use the JURI::root method to create a javascript variable that I can then use. In your php code, you would do something like this:
?>
<script type="text/javascript">
var joomlaRoot = '<?php echo JURI::root(); ?>';
</script>
<?php
You can then use that variable when you are doing your AJAX call.
As for where to put the jquery plugin file in your module, you can put it whereever you want under your module's directory and then use JURI::root again to create a path to it and call the JDocument::addScript method.
On a side note, you may consider using MooTools. It comes bundled in Joomla! already. It has the ability to do AJAX calls. Also, by using it, you avoid the possibility of having jQuery conflicts.
Atlast I was able to find a good solution to use the Ajax using Jquery in Joomla.
For this first you need to create a view and model to get required html through AJAX call.
Then use jQuery code similar to the following to get only the output of the required view.
//Code to get the base URL of joomla installation
szURL = document.URL;
componentList = szURL.split('/');
szDocument = componentList[componentList.length-1];
szURL = szURL.replace(szDocument, "");
//URL to the required component
url = szURL + "?option=COMPONENT_NAME&view=VIEW_NAME&tmpl=component&uid=" + getRandomValue();
jQuery.get(url, function(data) {
jQuery("#mydiv").html(data);
});
//Function to get a random number
//It is used for Ajax calls from IE; Else IE will use the cache values
function getRandomValue(){
return Math.floor(1000000 * (Math.random() % 1))
}
Note the URL used for the ajax call. It uses "tmpl=component" to get only the html for the selected component without joomla HTMLs.