problem with event handlers in dojo - javascript

I have a span inside which i have a achor tag.For anchor tag , i have used DojoAttachEvent,Now somwhere in my code i replace innerHTML of span as show below.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction"> txt223 </a> </span>
Now i replace text of span as follows:
var tmptxt = dojo.byId("xyz").innerHTML
dojo.byId("xyz").innerHTML = "some more txt" +tmptxt
Now after running this code the function _myfunction doesnot get called when onmoveover gets triggered.
I know that i can get away with the problem by using two spans ,one for next txt and one for anchor , but due to some css issues(i get each span on new line,its some two colum css and if i use 2 spans txt and anchor come on 2 different line which we dont want) i cant do it.
I tried to use dojo.connect , but the problem is as my span is present in some wizard the event gets triggered when am on page other then the page which is the current page of wizard.

Try this code.it may helps.
<span id ="xyz"> <a dojoAttachEvent="onmouseover:_myfunction();return true;"> txt223 </a> </span>

First of all, if this isn't inside a widget template, dojoAttachEvent isn't what you want - you probably want something more like onMouseOver="_myfunction();".
Secondly, if you're replacing the innerHTML of the parent node of the node in question with the event, then naturally you're going to end up clobbering that node out of existence, and the event along with it, and you'd have to hook it up again one way or another. Is there a reason you can't be more careful with your DOM manipulation? Like, put an id on the a tag (or query for it from the span) and change only that node's innerHTML?

Related

How to use click event on <a> tag

How to use click event on tag without id
Hello everybody, I have a html tag bellow:
<a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end fc-draggable fc-resizable" href="https://www.youtube.com/watch?v=XXXXX"><div class="fc-content"> <span class="fc-title">event</span></div><div class="fc-resizer fc-end-resizer"></div></a>
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag.
What I want is when I click on this tag, it will open a new windows with href for me. I tried to use
$('.fc-day-grid-event).on('click, function() {
...//
});
But it's not working.
How should I do for this case? Please help.
this html code was built automatically by jquery so I can't add id or "onlick" event on this tag
If you can't control when that happens, you can still use event delegation to get involved in the click event:
$(document).on('click', '.fc-day-grid-event', function() {
...//
});
That works even if the code runs before the element exists. The code in your question only works if the element exists as of when your code runs. See the documentation for details.
As the code is generated after the page rendering, you should use a delegated event handler:
$('body').on('click','.fc-day-grid-event', function() {
//...
});
The original code is missing apostrophes after the class name and after the 'click'.
This should work:
> $('.fc-day-grid-event').on('click', function() {
...//
});
However you might consider to check, if there are other dom elements with that class. An ID is much safer. A workaround could be to use multiple classes in the jQuery selection by selecting the element(s), that matches them all:
$('.fc-day-grid-event.fc-h-event.fc-event.fc-start.fc-end.fc-draggable.fc-resizable')
but this might still be not sufficient, because these framework-classes seem to be dynamically created and maybe deleted and the selection might be too wide or too narow. You could try to select the a tag with parent/child relations, where you know, that you are getting the right element and you could even use the innerHTML of the elements. Alternatively you could iterate through a JQuery-Selection and check for certain attributes.
I'm not sure, if you want to change the target of the link or the target window of the link. Opening the target of a link in a new window works with standard html by using the target attribute
<a href='bla' target='_blank'>bla ...
If you use Javascript for manipulating the target adress of a link outside of the href, the code might get hard to maintain in most contexts and the user might get confused, because he get's to page, he didn't expect. I would try to manipulate the Javascript, that is creating the a tag or if that's really impossible, i would manipulate the existing a tag according to my needs and change the attributes like this, if you want to use jQuery:
For the target address of the link:
$('.fc-day-grid-event').attr("href", "www.newhrefvalue.com")
Or for opening the link in a new tab:
$('.fc-day-grid-event').attr("target", "_blank")
Then you don't need to prevent or emit events or create event listeners.
<a onclick="doStuff(this)">Click Me</a>

using .replaceWith() jQuery

I have a div that has this elements:
<div id = "menu">
<a>Elemento1</a><br/>
<a>Elemento2</a><br/>
<a>Elemento3</a><br/>
</div>
Each time one of the elements gets clicked I want a new div with different content to be added beside this list, depending on which element is clicked, it should add a diferent list. I'm new to web development, and I found that using the jQuery function .replaceWith() may do it, but is there any way I can use this function, adding divs I got in other .html files?
Thanks!
To get a certain part of another HTML file, use jQuery load function. A basic usage in your case, would be:
$('#result').load('ajax/test.html #container_you_want_to_load');
To add an element after or before the link, you have a few choices. The question is if you really need it. Perhaps it's enough to define one target div into which you'll load your content. In that case, the above example would suit perfectly.
If you however want to add element next to <a> tag, consider using after or before jQuery functions.
To catch a click even on one of your links, check click
Why not just have <div id="content"></div> after the menu, then use
$("#content").load("your_file.html");?
replaceWith is used to replace some DOM elements with different ones. I don't think this function can solve this.
You can use .load function to get html files content and insert it wherever you want. Just bind a click event to every link and use their href atributtes to get the respective file. Don't forget to return false in the end of the event.
something like this:
<div id="menu">
Elemento1
Elemento2
Elemento3
</div>
<div id="content"></div>
$("#menu a").click(function(){
$("#content").load(this.href);
return false;
});

Hide A element with CSS or Javascript

I have this element in my HTML page:
<a style="display:block;width:728px;height:90px;margin:0 auto;background:#EEE url('/_images/2011images/img_dotco_3.jpg') no-repeat top left; text-decoration:none;color:#000;" href="/domain-registration/dotco-overview.aspx?sourceid=bnrq2co728x90">
<span style="float:right;margin:5px 27px 0 0;width:110px;color:#FFF;text-align:center">
<span style="display:block;font-size:1em;text-align:center">NOW ONLY</span>
<strong style="display:block;font-size:1.6em;text-align:center"><!-- START TAG // Co_RegisterPrice_TLD -->
<span class="Tag_Co_RegisterPrice_TLD"><strong>$35.70</strong>/yr</span>
<!-- End TAG // Co_RegisterPrice_TLD --></strong>
</span>
</a>
I need to hide it with CSS or Javascript. CSS would be the best scenario but Javascript is OK as well.
The fact is that I cannot edit the HTML code at all, so I have no way to delete this item directly. Also this is not parent of any other HTML element, so I do not find an easy way to hide it with CSS.
Also I need to hide this A element even if the background image changes or the link changes, in fact it's not always the same.
I reported all the available HTML.
Here is an example http://subdir.co/help-center/default.aspx
It's the top banner there.
Let me know how to hide it from the page. Thanks.
Try with jQuery:
$('a[href^="/domain-registration/dotco-overview.aspx?sourceid"]').hide();
This hides the a tag with a href attribute starting with /domain-registration/dotco-overview.aspx?sourceid.
Use:
document.getElementById('yourElementId').display=none;
You can traverse the dom tree from the class "Tag_Co_RegisterPrice_TLD" to find the A tag which you can then hide.
If you need to do additional logic then you can access the text (e.g. price/title/url) before deciding to hide.
Use jQuery if raw javascript is to much for you.
Since you cannot change the HTML code, you can't add an identifier to the element in order to select and manipulate it.
But you can use jQuery to select the first 'a' element, and set the 'display' property to 'none'.
I think something like this should do:
$('a:first').css("display","none");
You could try it with css:
a[style][href] {
display: none !important;
}
i think adding class or making some rule for css selector woudn't work, because definition in attribute of the elements overrides another style definition.
It will be easy if you use some javascript library for dom manipulating for example jQuery.
after that you can write something like
$(".sCntSub3 > a").hide()
you can try finding element from browser console. It is easy way how to verify you choose right element
jsFiddle Classname Method DEMO
jQuery via Classname: In this method we "look inside" the anchor for clues.
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
$('.Tag_Co_RegisterPrice_TLD').closest('a').hide();
});
jsFiddle ID Method DEMO
jQuery via ID: This time, we don't look inside since anything can change. We now use a div reference!
$(document).ready(function () {
// To disable the line below, just comment it out just like this line is.
// No matter the unique ID code in front of MasterUpdatePanel Div, it will always be matched.
$('[id$="MasterUpdatePanel"]').next('a').hide();
});
Shown here is a Firefox Screenshot of the HTML Page. Notice the Div ID contains ctl00_MasterUpdatePanel. The letters, numbers, and underscore in front of that may change, but not this keyword. Therefore, a match of the "ending part" of the id works!

JavaScript - adding a class to a child of a button

I'm trying to work out how to add a class to a child element of a button, specifically to the <i> below:
<button><i class="icon-undo"></i> Undo</button>
Ideally, using plain JavaScript, there'd be a function which can be added to the button (i.e. <button onclick="function()">) which would add the class "icon-spin" to the child <i> of whatever element was clicked (so it could be used in multiple places in the same page).
Maybe the code in this question helps.... posted the answer today itself. Just pass 'this' to the function and you could do wonders to the DOM thereafter
get nearby sibling in javascript

HTML + Javascript: Detecting where in a line of text a click occurred

What's a good way to do this without wrapping each letter with <span> tags and binding onclick functions to each, or something silly like that?
if you use a textarea and style it to not look like one, you could do something like this: Inserting a text where cursor is using Javascript/jquery
I don't think that's possible as each browser renders a page different on each client. As a javascript-event is always attached to some html tag (and a text it self is not a tag but the content of this tag) you can only retrieve the tag the event occures on or every parent tag.
You could in some way determine the approx. position of the cursor by wrapping each paragraph or sentence with div||p||span, retrieve the position of the click event relative to the document, retrieve the position of the tag the event occures on relative to the document and calculate depending on the number of sibling tags and their heights the approx. line number.

Categories

Resources