Joomla - can't embed custom javascript - javascript

I have Joomla 1.5
I have found a plugin for form styling, the "jqtransform"
I have an article that imports a 'myform.php' page that connects to an external database
I try to embed the jquery plugin (the jqtransform) to stylize the form that resides in myform.php. The steps i make are:
add link for the css in the header of joomla's index.php
add the link for the jquery plugin inside joomla's index.php (or inside myform.php)
add the class jqtransform in form tag of the myform.php (rquired by the plugin)
at the end of the myform.php (or the joomla's index.php) i add the javascript snippet inside the script tags:
$(function() {
//find all form with class jqtransform and apply the plugin
console.log("foo");
$("form.jqtransform").jqTransform(); });
(needed for the plugin)
The problem is that the plugin doesn't work.
I debug the javascript inside the browser and put bookmark in front of $(function(){}); and in front of $("form.jqtransform").jqTransform(); });
The first bookmark works ok (the browser halts).
The second bookmark doesn't do anything. That means the browser doesn't get inside the function.
The console log doesn't show anything.
Anyone has any idea??

The issue is JQuery Conflict.
You should use var jq = jQuery.noConflict();
Just above the script and use jq instead of $ symbol.
like:
jq = jQuery.noConflict();
jq(function(){});
jq("form.jqtransform").jqTransform(); });
something like that.
Also you can add script from myform.php don't need to edit index.php for this kind of use.
Like a page required some js and css don't load it in the index.php
It will load everytime so speed will reduce.
For a component or module or specific page you can use joomla's default document factory.
Like:
$document = &JFactory::getDocument();
$document->addScript('your script file full path');
$document->addStylesheet('your style sheet full path ');
Hope this will help you friend..

This method requires no editing to the template files.
Simply use a Custom HTML Module and Publish it in position
<script type="text/javascript">jQuery.noConflict();</script>
<script>
jQuery(document).ready(function() {
jQuery("form.jqtransform").jqTransform();
});
</script>

Related

I want to change the href link of logo in wordpress website

I have use roccochoco theme in wordpress and now i want to change the url of logo that other than the home page.
i tried this code but that doesn't work
$(document).ready(function(){ $("a.custom-logo-link").attr("href", "https://"); });
please help me out and thanks in advance
In Wordpress using jQuery with $ often doesn't work, because it is used internally. The console might show you a warning saying "$ is not a function". You can put it inside of a function to make it work. Your element is selected by class, so the name of the class is enough.
( function( $ ) {
$(".custom-logo-link").attr("href", "https://www.newurl.com");
}( jQuery ) );
Another way to achieve it without using Javascript would be to edit the header.php file of your theme. If you want to keep your theme updatable, you should create a child theme (it is done in one minute with creating an empty folder and putting a style.css with some info in), copy the header.php of your parent theme in the folder and delete the part in the <a> tag, looking like get_home_url() .
After the DOM is loaded, we can set the href of the anchor having custom-logo-link class to point to the URL you prefer:
jQuery(document).ready(function(){
jQuery("a.custom-logo-link").attr("href", "https://www.domainname.com");
});

Hide HTML Form Before the page loads using javascript

I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.
edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.
You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.
Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>

using focus() and onload() with CakePHP

Is there a way by which we can set the focus to a particular textbox in CakePHP. Something like the textbox we have on the home page of google.We load the page and start typing.Is it possible to achieve the same in Cake.
does cake support javascript's onload function.I only need it for my view and dont want to include an external file for this.I have a user defined function that works fine but the onload doesn't work.
Just use javascript between your head tags as follows
<script type="text/javascript">
window.onload=function(){
document.getElementsByName('txt1')[0].focus(); // txt1 is the name of textbox
} ​
</script>
Update: If you want to use it only for a particular page then you can keep it in that view and in that case you can simply paste it right after the HTML code as follows
<script type="text/javascript">
document.getElementsByName('txt1')[0].focus(); // txt1 is the name of textbox
</script>
You can use Javascript on any webpage or application, so using CakePHP is not a restriction. One of the differences on Cake from other technologies is that you have a layout which is loaded always with your view and you usually import all your scripts there (you can import the scripts on the view too).
So then, you can use onload function for your page on Cake without any problem. In this case, you may want to add that function in your view within <script> tags

Running the javascript code present on another html page through jquery

It might be a noob questions but I have just started using jquery.
My basic requirement to extract the link which is there in the javascript code present in another html (code is embedded in the html page and not in a seperate file).
The link is also present as a href attribute of <a> tag inside a tag, just to add if it is easier to extract it from there (I am using chrome so I think it considers there are no child nodes of <noscript> tag)
After this I tried doing an ajax request to the html page (using $.ajax) thinking it will run the scripts on the page but got the html code of the page in return :S . I have also heard of something called evalscripts:true but not sure if that will work here or how to use it?
I have also tried to search for the link in html code returned by my html page by using the "contains" operation of jquery.
I am doing all this to create a greasemonkey script. Please suggest
Example Code:
This is a function present inside the html of that page:
function fun() {
obj = new pollingObj('argument', "a link I want to extract comes here");
}
I want to extract the link: "a link I want to extract comes here" and then open it.on my page where I am running my jquery script
This link is also present like this on the html page:
<noscript>
blabla
</noscript>
Also is it possible to run the javascripts present on that page if the link extraction is not possible?
If you're able to get the html code of the page successfully via .ajax, and the data you want is in the HTML code, it's not worth the effort to bother with trying to run the scripts. Just access the URL through the DOM:
// ajax success function
success: function(html) {
var anchorCode = $(html)
// this assumes that noscript is a top-level element
// otherwise, use .find('noscript')
.filter('noscript')
.text(); // get the code for the anchor tag, as a string
var myLink = $(anchorCode).attr('href');
// do something with myLink
}
Edit: It turns out that jQuery is a little funny in the way it deals with noscript tags - inner tags don't appear to be considered part of the DOM, so you need to grab the text content of the tag and then use jQuery to DOM-ify it. See updated code above.

Injecting JavaScript into head element of website using Fiddler

I was thinking of using Fiddler for the following purpose...
I have a JavaScript based service I want to demonstrate to potential clients. In order to show them what their website could look like if they install (i.e. include) my script, I want to set up Fiddler on my PC, so that when fetching the client's website, the
<script type="text/JavaScript" src="myscript.js"></script>
line will be included in the HTML <head> section.
Can this be easily done with Fiddler? Could someone point me to where I may find the documentation covering that, if it is?
Thanks!
----Update----
For the time being I have resorted to using a BHO to add my script to the page. I use execScript(), upon onDocumentComplete, to run a simple piece of JavaScript which appends the .js file I need to the page. But EricLaw's pointers and jitter's answer seem like the way to go for a more complete (and elegant) way to do what I need.
If someone is interested I could upload the BHO code here.
-Thanks!
Open fiddler -> Menu Rules -> Customize Rules (or hit Ctrl+R)
The CustomRule.js file opens. Scroll down until you find the line
static function OnBeforeResponse(oSession: Session)
This is where your code goes. Here you can change the server response before the browser sees it.
The following code sample shows how to include a custom piece of jQuery code which replaces the Unanswered link in the horizontal menu with a link which serves as short cut to Unanswered jQuery Questions
I first show you the jQuery code I want to include
<script type='text/javascript'>
$(function() {
var newLink = 'Unanswered jQuery';
$('div#hmenus div.nav:first ul li:last a').replaceWith(newLink);
});
</script>
Now the fiddler code (based on code found in CustomRules.js and code samples from the FiddlerScript CookBook)
//is it a html-response and is it from stackoverflow.com
if (oSession.oResponse.headers.ExistsAndContains("Content-Type", "html") &&
oSession.HostnameIs("stackoverflow.com")) {
// Remove any compression or chunking
oSession.utilDecodeResponse();
var oBody = System.Text.Encoding.UTF8.GetString(oSession.responseBodyBytes);
// Match the jQuery script tag
var oRegEx = /(<script[^>]*jquery.min.js"><\/script>)/gi;
// replace the script tag withitself (no change) + append custom script tag
oBody = oBody.replace(oRegEx, "$1<script type='text/javascript'>$(function() {$('div#hmenus div.nav:first ul li:last a').replaceWith('Unanswered jQuery');})</script>");
// Set the response body to the changed body string
oSession.utilSetResponseBody(oBody);
}
I think you should now able to hackyourself together a piece of code which fits your problem.
Example
// Match the head end
var oRegEx = /(<\/head>)/gi;
// replace with new script
oBody = oBody.replace(oRegEx, "<script type='text/javascript' src='http://url/myscript.js'></script>$1");
if you use jQuery you can add js on the fly. I would probably think you can have a method which would include/exclude your script based on some query param. This is how you would include JS with jQuery
$.getScript('someScript.js',function(){
//Do something here after your script loads
});
Haven't tried it, but how about GreaseMonkey for IE?

Categories

Resources