Is there a way to disable the onclick function but still use the href to re-direct the user to the requested link. Example a header menu there are many links that looks like below :
Phones
I am unable to remove the "DA_A('id', ':per:shop', this.href); return false;" from the HTML page. However using a tag manager how would one go about injecting a snippet of JavaScript code function which will de-activate/mute the "DA_A" function but still make the link work as normal? Is it possible? It seems the function "DA_A" is a function that calls another ".push" function and pass some data.
What are my options? as I am unable to edit the menus in questions?
You can probably remove the onclick from the element if you can run some javascript after the DOM renders:
var anchor = document.getElementById("someId"); // or tagname, querySelector, etc
anchor.onclick = "";
You could also disable the function it calls altogether, depending on whether it is needed elsewhere:
window.DA_A = function() { /* do nothing */ };
The first snippet would need to be run after the DOM was rendered (for example, if you are using jquery then enclose it in a $(function() {})), and the second snippet would need to run after the DA_A function is defined in the first place.
Either of these by themselves should disable the onclick, but still allow the anchor to navigate.
this code snippet will do the trick:
window.onload = function()
{
document.querySelctor("a").removeAttribute("onclick"); // make selector more specific
};
Related
I load a part of my basketpage inside an accordion div in my header. This works great and shows my basket in a nice dropdown.
The last problem I need to solve with this is to get the buttons in the loaded content to work. Is it possible to write an callback that make these works? Im not sure even what to google for this one..
This is how the buttons is setup in the loaded content:
checkout
Script Im using to load the content:
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox');
use the callback function of .load().
$('.dcjqg-accordion ul.sub-menu').load('/m4n?seid=etailer-basket div#centerbox.itembox.centerbox', function() {
$("#_ec_oie2").on("click", function() {
if (UI.pb_boolean(this, 'click')) { }
return false;
});
});
checkout
You need to use a child selector for the event. You can attach an event to the .sub-menu element that will fire on the content loaded in through the ajax. Something like the following could work:
$(".dcjqg-accordion ul.sub-menu").on("click", ".action.actionbasket.checkout", function() {
if( UI.pb_boolean(this, 'click') ) {}
return false;
});
Notice the second parameter to the on method. It is a selector that will be used to look at the target of the click event. I used .action.actionbasket.checkout since that is what is on your a tag.
This code may not work exactly, but this should help get you in the right direction.
Here is the link to the jQuery documentation for the on method: https://api.jquery.com/on/
i have a very simple code which tries to open a popup window but it passes to ruin the whole html and other code.
the code is as follows:
<head>
<script type="text/javascript">
function write(){
/* var w = String(window.offsetWidth),
s = String(window.offsetHeight);*/
var s = window.open('', 'MsgWindow', '_blank');
};
</script>
</head>
<body>
<button onclick="write();" id="writeBtn">Write</button>
</body>
so simple but it dosent do anything!
i don't know what is the problem.
something to note...
when the button is clicked then the screen goes white and all the element disappear
when i saw this in google console then what i saw was shocking all the html code just disappear
i even try to werite in to the variable s like s.document.write('sanmveg') but that dosen't worked
what is the problem?
Rename your function. document.write() is being called instead of your function. Calling document.write() with no parameters causes unexpected behavior like this.
function mywrite() {
var s = window.open('', 'MsgWindow');
};
<button onclick="mywrite();" id="writeBtn">Write</button>
The problem is that your write function isn't being called; instead, document.write is being called. The reason for this is somewhat complex, but the short version is: If you call your function something else that isn't on document (or button elements), like openwindow, it'll work.
So why is document.write being called even though you're calling write(), expecting it to pick up your global write function?
Attribute-based onxyz event handlers are called in a complex scope which is effectively a series of nested with statements, each mixing in different stuff, and one of the things in that mix is the document object.
When you use an attribute-based onxyz event handler on a button as you have in your code, the browser generates a handler for you that looks very roughly like this:
with (document) {
with (theButton) {
handler = function() {
/* This is your attribute text */
write();
/* This is the end of your attribute text */
};
}
}
...and then calls the handler function. So when the browser calls your function, it tries to resolve any free symbols in your function, like write, against the button element first, then if the button doesn't have a write it tries document, and then if document doesn't have it, it tries the global scope.
But of course, document does have a write function, so it gets called instead of your event handler.
You can actually see this in Chrome, or Firefox with Firebug, by doing this:
Create a button with debugger; in the onclick, e.g.:
<button onclick="debugger;">Click Me</button>
Open the page in your browser
Open your dev tools / Firebug
Click the button
At this point, the debugger will pop up, paused on the debugger; statement. Here's what you see in Chrome:
(I don't know what the object is that Chrome inserts between the document and the button; it'll be a Chrome-specific implementation detail.)
And in Firefox+Firebug:
You can see how the function is nested within a couple of with blocks.
If your button were inside a form, the form would be there too, like this:
with (document) {
with (theForm) {
with (theButton) {
handler = function() {
/* This is your attribute text */
write();
/* This is the end of your attribute text */
};
}
}
}
...and so free symbols would attempt to resolve against the form element.
I guess you should fill the arguments in the proper order , which is :
window.open( "URL" , "window name" , "menubar,resizable,width,height,top,left") ;
note that the third argument should be a comma-separated string that specify some properties
I have a table, with a lot of elements. It is a calendar with events, and every event has it's own ID number, as well as one of three different categories, let's call them A, B and C.
Now for styling reasons, the categories are also implemented CSS-classes, which has the same names.
I ahve searched a bit on how to implement a "right-click-listener" with javascript/JQuery. I tried a couple of different solutions, before setteling on a override of the contextmenu-function, that the right button usually fires. I have also been able to differ between the categories, by passing parameters, that the contextmenu should only be overridden when elements of A, B and C are clicked. The following code works perfectly:
$(document).on("contextmenu", (".A, .B"), function(e) {
$.colorbox({width:"554px", height:"480px", iframe:true, href:"myurl"});
return false;
});
$(document).on("contextmenu", (".C"), function(e) {
$.colorbox({href:"myurl"});
return false;
});
The colorbox, if not familiar with it, is just a popup, implemented as an editor of my calendarevents. However I wish to pass on the source of the click's identification number, and I have not been able to find out how. These ID's are unique.
So:
Can I pass parameters through this function?
If so, how?
If not, or if this overriding contextmenu is a bad way of doing it, how should it be done?
If any relevance at all, this is a part of a Java web app. I am using jstl and jsp when coding.
Thank you.
EDIT:
here are two functions. The top is a changelistener I use on some checkboxes, and they work. The bottom is the overridden contextmenu, but it does not work. Somehow it seems that the $function breaks out of the parent function, and ignores everything after. The return statement does not work, and the contextmenu appears.
$(document).ready(
function() {
$('.toggle').change(function() {
var id = this.value;
$('.' + id).toggle(this.checked);
});
});
$(document).ready(
function(){
$(".A, .B").contextmenu(function() {
var id = $(this).Attr("class");
alert(id);
return false;
});
});
EDIT 2:
In other words, I just solved my own problem. Even so, I only kinda answered my own question. I have figured out how to pass at least a single parameter, but it still need to be one of the set parameters of a given html-element, this time, the . I set my desired identification number, as the elements id, and retrieved the value like this:
$(document).ready(
function(){
$(".A, .B").contextmenu(function() {
var id = this.id;
alert(id);
return false;
});
});
Still, I feel this is a clunky way of implementing a "onrightclicklistener", especially when compared to how I am used to do it in SWING. I'll leave the question unanswered, In case someone know of a better solution.
Five years later, i think it is time I answered my own question.
//my standard settings object, only relevant to colorbox
var popup_settings = {
opacity : "0.6",
width : "554px",
height : "640px",
iframe : true
}
//executes when the document has finished loading
$(document).ready(function(){
//ovverrides right click function
$(".A, .B").contextmenu(function() {
var id = $(this).attr("data-value");
var settings.href = "myURL?id=" +id; //adds the parameter directly in the URL
$.colorbox(calendarelement_editor_settings);
return false;
});
});
This is obviously a bit specific for a colorbox setup, but a lot of the code is relevant for any setup. When you bind a function to an event through jquery, like I do with contextmenu here, the specific element clicked is accessible through this. All jquery functions can be used on the element through $(this).anythingInTheAPI(); Like getting the attribute data-value, in my case.
any other function, like $(this).hide(), is also available.
Now that I have the attribute i want to pass, the next step is to include it in the request for the new page. This popup opens up a separate page inside a modal container. There are many ways to do this, but the simplest one, is to include the parameter directly as a part of the URL, and implement a back end that expects that. To include parameters in an url, you write
myURL?firstName=firstValue&SecondName=SecondValue
The question mark signals that parameters are following. the & is a seperator between parameters.
So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default.
I've been working around the JS but no luck so far so I need your precious help to get this to work.
Thanks!
Demo
Javascript
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
});
You can do it with something like:
$('.added_class_on_second li').eq(0).children('.toggle-content').show();
Just add another distinct class to the second, or target it with:
$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();
if you don't want to change the html at all.
http://codepen.io/anon/pen/CDdlH
If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.
I would like to dynamically load a javascript file and undo what was done with the static javascript i have on my site. the static javascript i want to edit is
document.getElementsByTagName('script')[3]this is what im trying to do:
document.getElementsByTagName('script')[3].attributes[2].value = "http://differentlocation.com/jsfile.js"
The thing is when the source is altered I want all the other functions i had statically cached to go away. how is this possible?
*reworded. The sites current javascript attaches event handlers and does all kinds of functions, i would like to make all of these go away. Basically I am reloading a Almost exact copy of the javascript and dont want certain handlers active. etc
Or is there a way to blank out all of the pages current javascript, Just make it all useless, and then Load my new javascript
It looks like you're not using jQuery. If you were, this simple line of code should remove all event handlers from every element in your document:
$("*").off();
It might be worth exploring.
I'm unable to get the JavaScript to run again, most likely: it needs to be linked (which jsFiddle doesn't allow). Here's a demo.
In this example, we have three buttons.
<button id="myButton">Add an event listener for the bellow</button>
<button id="listener">Do something</button>
<button id="reset">reset</button>
We can then add event listeners,
// Do some stuff
document.getElementById("myButton").addEventListener("click", function () {
document.getElementById("listener").addEventListener("click", function () {
alert("I do something!");
});
});
... and at some point, reset the page. This works by taking the current HTML content out of the page, and having it stored in a variable. We then put it back in, causing all bindings to elements to be removed. It also has the harmful side effect of not running inline scripts.
// Soft reload of the page
document.getElementById("reset").addEventListener("click", function () {
var html = document.documentElement.innerHTML;
document.documentElement.innerHTML = "";
document.documentElement.innerHTML = html;
});