How to modify js file on client side? - javascript

I would like to edit part of the .js file. I mean add some code, and these code should be executed when I open the website (in browser). How I can do that?

The easiest way to do that is to use jquery and put your code into
$(document).ready(function() {
//your code
}
or if you don't want to use jQuery
document.onload = function()
{
//your code here
}

If you want to add on to existing JavaScript code for a site, I am not sure that you can in a permanent way. However, if you want to change some sort of behaviour just for you, you could take a look into creating a userscript. There are many examples at userscripts.org.

You cannot edit the js file but you can override the functions and the variables. This will work unless the js file is not protected by closure.

You can't modify the js file on client side. However, if you just want to add some code, you can use userscript.

this is a bad...
but if the js is not remote, use AJAX to read the file contents, then change what you need then use the DOM to create the script tag and use .innerHTML to put the content in.
if you would like code tell me if you want JQuery or native and i will post
P.S if the file is remote there is no way to do it...

Related

Can I somehow call JSTL function from JavaScript file?

The question is as following: when I write JavaScript inside my JSP page, using JSTL function, it renders normally, understanding everything I want from it. But to make my code clear, I want to move that JavaScript from tag in JSP to a separate file. But when I try to call same function from the file, it doesn't work, but just appends to my page as a simple text.
Here is code example to make this more understandable.
...other JSP stuff
<script>
$.each(data, function(index, item) {
$('#holder').append(
'<tr>' +
'<td>item.price + ' <fmt:message key="currency.default"/></td>'
'</tr>'
);
});
</script>
This works perfect for me. The actual message from the resource bundle is pulled and set instead of the fmt:message function.
But when I move the same code to a separate file, all this doesn't transform and stays plain text.
I understand, that JSP serves on the server, and all transformations with those functions is done much earlier than actual javascript is loaded.
But maybe somebody knows a certain hack to make this work?
Thanks in advance.
You can use DWR for that cause. An old framework but still holds good if that is what exactly you are looking for in your question.
http://directwebremoting.org/dwr/index.html
DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.
Running java methods or jstl functions(also jstl functions are java methods) from JavaScript is impossible. Because java methods run on server-side but javascript on client-side.
If you want to run java methods in client-side anyway you must create java applet for this. You can run java methods with JavaScript inside your applet. For detailed information see this Java Applet Tutorial
I hope this will help you

How to add jquery and javascript to the same file?

I don't know if this is possible. This is how my js file will look like:
$(document).ready(function(){
$("li#dropdown").on('click', function(e) {
$('#toggleList').slideToggle();
e.preventDefault();
});
});
//javascript code...
Will this be possible? or is it better to have my javascript code in another file
That depends entirely on what you want to do.
If your javascript has code, that will be used inside of your $().ready event then you should put it before the $().ready.
The rule is code with functions to do specific stuff, you can call it "your" library, and you should put that code in a separated file.
Code that deals with event handling of your page controls, you should put on a file with [the name of the page].js, but this is just a way for you to organize stuff.
Because javascript is so flexible if you want you can put all in the same file, and it will work generally.
Jquery is an library made out of javascript code.
So actually you are writing javascript in javascript.
So you can combine it, what is already combined :P
haha
You can script inside jquery with javascript goodluck!
That is going to work well and accurate. There is no issue with the code, to be written in jQuery or JavaScript.
jQuery is just a library written in JavaScript. jQuery just shorten downs the code for you. There is no other major difference.
$(document).ready(function(){
$("li#dropdown").on('click', function(e) {
$('#toggleList').slideToggle();
e.preventDefault();
});
});
Would work in every browser, when you have included your jQuery plugin in your web app. Otherwise browser won't be able to recognize $ character and you'll get error. That's the thing you need to worry about only.
.slideToggle() is just a method; function, or jQuery. e is handler for event, and the preventDefault is also a part of JavaScript. So you can see, that jQuery and JavaScript are alike. There is no major difference.
JavaScript is executed by every browser. So it would be executed as it is by every browser.

Access variables from multiple files in WordPress plugin + js

Hi guys I have an issue in a WordPress plugin development...
Basically the plugin has
the main_file.php
a file2.php
and a js file
Into the main file I define some data and I can retrieve them using get_option(xx);
The main_file.php also attach a js that call file2.php
I need to access to some data I set into main_file.php within file2.php but global doesn't work and also get_option give me a Internal error.
Do you have any clue?
I am not sure thi is the right way to do it, and if it it safe...
However after long time I have discovered that putting
include_once('../../../wp-config.php');
include_once('../../../wp-load.php');
include_once('../../../wp-includes/wp-db.php');
allow me to access to get_option(variable) sithin file2.php and so, accessing it using js via ajax.
Hope this coul be useful for someone else and please do not heditate to suggest further methods.
cheers

Where to put a JavaScript alert override so that all pages can use it without importing a *.js?

Where do I put a JavaScript alert override so that all pages can use it without importing a JavaScript file?
I've overridden the alert method. I want to be able to use it from any .aspx page without importing it on each separate page.
You cannot override client side code without sending the override to the client. So what you want is impossible.
You can put all of the JavaScript code in the code behind and register it with Page.RegisterStartup.
For example, put it in the master page or from a page from which that all others pages derive. But it's not a good idea to do it.

Jquery: how to register an event on all pages?

I want to run the following jquery code on every page in my website.
$(document).ready(function(){
$("#more").click(function(){
$("#morediv").slideToggle("slow");
return false;
});
});
In all my pages I have the more and morediv elements defined, for every page I have different js file and adding this code in every file will not be a good solution (I suppose).
I have created a global.js to include this code, but in other pages also I have the $(document).ready(function(){} function defined and may be that's why its conflicting and not running properly.
You can have multiple $(document).ready(function(){}) elements on your page, so that it's the problem. I suggest using Firefox/Firebug and examining any console errors you find to discover the problem. Perhaps your global.js file is being loaded before jQuery itself? Otherwise, you'll need to dig into it with Firebug's debugger.
Are you actually doing some server-side programming or you are talking about plain HTML pages. I would advise that you have templates (this is specific to your development environment and tools of choice) and include the JS in those templates. Then the actual pages will all use the template and have the JS available. The question you are asking has in fact nothing to do with Javascript or JQuery, but the way you organize your site... unless I'm missing something.
having $(document).ready() event handler in global.js and the page it is included in does not poses any problem I'm using it and it works really fine.
Just a guess, but are you referencing the location of the global.js file correctly?
To be sure, write something like the following into your global script:
$(document).ready(function(){
alert("document ready");
$("#more").click(function(){
$("#morediv").slideToggle("slow");
return false;
});
});
If you don't get the alert the script is not pathed correctly, or is not placed after the jquery include (or the jquery include is not pathed properly).

Categories