why jQuery attr('href', '#') set an empty value rather than # - javascript

I'm using jQuery version 1.8.3
jQuery('#edit_param_apppmStyleImage').attr("href","#");
The HTML turns out with
<a id="edit_param_apppmStyleImage" href="">Edit</a>
It sets an empty value rather than "#". And it is 100% surely caused by my site's special script written by others.
Any specialist can provide some suggestions about what may cause such weird behavior? Btw, it sets other values like '##' normally.

It sets an empty value rather than "#". And it is 100% surely caused
by my site's special script written by others.
You did not provide any details regarding the special script running on your site. But I'd try running the script after everything (including images) is loaded. In that case, this is what comes to my mind;
The load event is sent to an element when it and all sub-elements have
been completely loaded.
Since it's a bit different than $(document).ready() function, it could make a difference if some other script is overriding your script's intended behaviour.
Try the following
jQuery(window).bind("load", function() {
jQuery('#edit_param_apppmStyleImage').attr("href","#");
});
What we're doing here is that we're delaying the execution of the script until the entire window is loaded. And since anything in $(document).ready() function executes before the code in $(window).load() function, we are reducing the chance of your script to be overridden.
Not sure that will work, but give it a try.

Replace attr() with prop():
jQuery('#edit_param_apppmStyleImage').prop("href","#");

Related

get and evaluate javascript -- why not working?

I have a page where I load some content from a different page on click. This content needs some extra javascript to work, so I want to also load this and execute it via eval(). This is my approach but it is not working:
$.get('jsfile.js', function(jsfile) {
eval(jsfile);
});
$('#content').load('otherpage.php #thiscontent');
I don't understand why it's not working. I know inline javascript normally won't execute, but shouldn't eval() be taking care of that?
This is because when you specify a page fragment when calling jQuery.load, the script tags are stripped.
See Loading Page Fragments on the jQuery.load documentation.
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted. This is achieved with a special
syntax for the url parameter. If one or more space characters are
included in the string, the portion of the string following the first
space is assumed to be a jQuery selector that determines the content
to be loaded.
You will need to use another feature to achieve your desired result.

JQuery - Remove tag Script

I need to remove two <script> tags from a page dynamically, at the document ready.
Every tag has its own id;
I've tried to insert in the code:
$("#idPrimoScript").remove();
$("#idSecondoScript").remove();
but nothing happens...
Some ideas? Thanks
As I can understand from your question, you want to remove (actually disable) the scripts included in your 2 script tags.
a work around I usually used to make in these situations is to introduce a variable which will act as a flag or a passing signal.
let's say that I will create a global variable which will be the flage I will be using:
var enableMySpecialScript = true
as you can see, I initially set the value of this flag to true, and whenever I need to disable the special script inside my page, I set this flag to false, then inside my script file, i always check for the flag's value,so when it's only "true", the script will execute, meaning that when it's false the script will not run, which is exactly what you are asking for.
This way you don't have to mess up with removing stuff or altering functions, and from my experience with this solution, it's a clean and debuggable one :)
Apparently (having not tried this myself beyond a simple proof script) the way to do this is to create another function with the same name.
See:
How to override a function in another javascript file?
JavaScript: Overriding alert()
Override jQuery functions
Overriding a function in jQuery plugin

Undo jQuery or revert DOM?

I have some jQuery that runs on a page. As a short-term fix I want to remove the code within the tags (containing the JS), that are on the page so that this jQuery does NOT run.
Is there any way that I can do this, or stop the code from running? I want to revert back to the typical DOM state, not the manipulated one...
Edit:
I have a script tag on the page that runs some javascript.
Due to certain limitations, I can't simply remove this - I have to include a javascript file to remove this script tag / OR prevent this javascript from running.
I want to revert back to how the page should look without having been manipulated by the script tag that is already on the page.
If you can only include a javascript file, you could try re-declaring the jquery object so it can't run:
jQuery = null;
$ = null;
That would kill jQuery providing it's loaded after. This however would probably cause of lot of javascript errors. On that trail of thought, you could just plug in some broken JS and it would stop jQuery from executing if it's before the jQuery stuff.
I can't think on a scenario where it's needed.
And indeed it's impossible to revert the DOM after manipulation. reset button doesn't revert the DOM
if its in a method you can just use return false; before your code runs, you can also just comment out your code, or wrap your code in a method that never runs:
$("p").hide();
becomes:
function() {
$("p").hide();
}
Or have I misunderstood your question?
Just move your code out of the jQuery(document).ready function, that should make the HTML stay the way it was.
After reading your additions in edit, I think the only to see the page before loading that script would be to add a break-point using Firebug script console at that particular script.
Edit: Add further answer after reading the OPs edit.
the only way I can think of you achieving this without manipulating the source or dom would be to test for a cookie prior to code execution,if it does not exist then set it and continue executing the rest of your code something like this. When you want to revert changes made in the dom back to the 'original' just refresh the window and the existence of the cookie will prevent execution a second time
(function() {
if($.cookie('foo') == null) {
$.cookie('foo', 'bar');
$('#alert').click(function() {
alert('run');
});
}
})();
the only flaw I can see in this is if a user rejects the cookie in which case if it really matters I would alert the user and again break out of execution

How to dynamically add a Javascript function (and invoke)

Based on a click event on the page, via ajax I fetch a block of html and script, I am able to take the script element and append it to the head element, however WebKit based browsers are not treating it as script (ie. I cannot invoke a function declared in the appended script).
Using the Chrome Developer Tools I can see that my script node is indeed there, but it shows up differently then a script block that is not added dynamically, a non-dynamic script has a text child element and I cannot figure out a way to duplicate this for the dynamic script.
Any ideas or better ways to be doing this? The driving force is there is potentially a lot of html and script that would never be needed unless a user clicks on a particular tab, in which case the relevant content (and script) would be loaded. Thanks!
You could try using jQuery... it provides a method called .getScript that will load the JavaScript dynamically in the proper way. And it works fine in all well known browsers.
How about calling eval() on the content you receive from the server? Of course, you have to cut off the <script> and </script> parts.
If you're using a library like jQuery just use the built-in methods for doing this.
Otherwise you'd need to append it to the document rather than the head like this:
document.write("<scr" + "ipt type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></scr" + "ipt>");
In all honesty, I have no idea why the script tag is cut like that, but a lot of examples do that so there's probably a good reason.
You'll also need to account for the fact that loading the script might take quite a while, so after you've appended this to the body you should set up a timer that checks if the script is loaded. This can be achieved with a simple typeof check on any global variable the script exports.
Or you could just do an eval() on the actual javascript body, but there might be some caveats.
Generally speaking though, I'd leave this kind of thing up to the browser cache and just load the javascript on the page that your tabs are on. Just try not to use any onload events, but rather call whatever initializers you need when the tab is displayed.

Initiate onclick faster than with document.onload

I have html-pages with links where i want to attach a function to their onclick event. One way to do it is of course:
Save
But I know this is not the best practice. So instead I wait for window.onload, loop through the links and attach the save-function to the links with rel="save". The problem with this is that it waits until the whole page has finished loading which can be several seconds after the link is displayed and clickable.
So is there another way to do this? Avoiding onclick in the html but that makes it work immediately when the link is rendered.
Internet Explorer has a handy attribute for <script> tags called defer. It's for delaying the parsing of a script until the document has finished loading. For other browsers that support it, you can use DOMContentLoaded, as someone else suggested and for browsers that don't support either you can fall back to onload.
<script type="text/javascript" defer>
//- Run this code when the DOM parsing has completed
</script>
I did a quick Google search for "DOMContentLoaded defer" and found the following page that might help:
http://tanny.ica.com/ica/tko/tkoblog.nsf/dx/domcontentloaded-event-for-browsers
In your case, you can just leave that as it is. Stick to the simplest possible thing, even if it is not the general best practice.
You could try DOMContentLoaded event instead of load. IE also gives you the defer attribute for script tags, which defers execution until the DOM is loaded. If those don't work for you, then you are stuck with the solutions you mention, as far as I know.
I don't know if this is appropriate for your solution, but you could insert script immediately below the are with the links you need altered. This script would not be wrapped in a function, allowing the browser to execute it immediately when seen. The effect is that you can run script before the full page is loaded, altering only the items that exist above the script being run. (If you reference something below the script, it will fail.)
BTW, this is almost certainly not a best practice, and some would probably label it a worst practice.
How about this?
Save
Note: This solution requires to users to have Javascript enabled. Not exactly best practice, but may be suitable for your scenario.
The ideal here would be to use the ideas of Unobtrusive Javascript.
In this way, if the Javascript isn't loaded the link would still do something. It's a link right, so it leads the user to another piece of content? - this should work without Javascript. And if the functionality attached to the links can ONLY work with Javascript you should create and insert them into the DOM with Javascript (they aren't clickable if they aren't there...).
(Otherwise how about delegating the click event to a wrapper element? Does that work before the element is complete?)
edit: Oh, and "save" sounds very much like it ought to be a button in a form rather than a link. The Unobtrusive JS stuff still applies though.

Categories

Resources