I'm learning Javascript right now. Can anybody tell me why the second code block traces a empty path for -launch(this)- but using the first code block it gives me the right path?
"<form action='"+launchwebsite+"/subsite/' method='post' target='_blank' onsubmit='launch(this)'>"
and this not:
"<a onclick='launch(this)' title='launch' class='iblack' /></a></div>"
Best
Uli
The this refers to the the element it is attached to. In the first snippet it is the <form>- and in the second the <a>-element. Also the <a> lacks a href-attribute.
I'm not shure but if the code you put is exactly what you are testing you are missing a ;
<a onclick='launch(this)' title='launch' class='iblack' /></a></div> <-- You're Version
<a onclick='launch(this);' title='launch' class='iblack' /></a></div>
Else I never really did an onclick on a html control I usually do href="" to call another page php per exemple and in that page to the treatment I want.
Another point I`ve looked at is to catch this command in javascript you would need you to call and "blank" page as of
<a href="#" onClick='launch(this);' title='launch' class='iblack' /></a></div>
This last code acutally worked for me! Keep me in touch, wanna see if this works out for you!!
Patrick
Related
I have a project that is implemented with Django, Dojo and JS. I've been banging my head against this issue all week and cannot find any hints online as to what the problem might be. Hopefully someone here has either run into this issue as well and can shed some light on the problem.
I have an unordered list <ul> similar to the following:
`````
<ul>
<li><a target="displayArea" id="pre-select" href="foo.html>Foo</a></li>
<li><a target="displayArea" href="bar.html">Bar</a></li>
<li><a target="displayArea" href="baz.html">Baz</a></li>
</ul>
```
elsewhere in the code is the target iframe:
```
<iframe style="border: none;" name="displayArea" id="displayArea" width="100%" height="95%" title="Report Area"></iframe>
```
When I mouse over and click "Foo" it works as expected, "Foo" is displayed in the iframe shown above. If, however, I execute the following script which is immediately after the </ul> in the code:
<script>
window.document.getElementById('pre-select').click();
</script>
"Foo" is not displayed in the iframe, instead it briefly appears in the host window frame then disappears. I'm not sure why there is a difference clicking directly on the link as it appears in the <ul> or executing the <script> that does the "click" programmatically.
Any insight would be greatly appreciated...
As stated in the problem description I expected the link to appear in the target iframe when the script:
<script>
window.document.getElementById('pre-select').click();
</script>
is executed but it doesn't appear in the iframe. If the link is clicked with the mouse it works as expected.
I was able to accomplish what I needed to by adding an onload to the of my HTML like this:
<body onload="document.getElemenById('pre-select').click()">
This does exactly what I need and can be changed easily when the users inevitably change their minds :)
Thanks to epascarello and markfila for their help pointing me in the right direction.
I am trying to make it so that when I click an <a> tag a <div> appears on the first click and disappears on the second.
Easy enough right?
Just do this...
<a href ng-click="clicked=!clicked">Click me</a>
<div ng-show="clicked">
SOME CONTENT HERE
</div>
and that works perfectly.
But what I'm doing is setting a variable in Python equal to this <a href='"#"' ng-click='"clicked=!clicked"'>Click me</a> and then passing that through Flask into the front end (HTML). The passing works perfectly. It shows exactly the same code as I want it to (see below).
<a href ng-click="clicked=!clicked">Click me</a>
But for some reason, when I pass it, it loses the ng-show/ng-click functionality. When I click, nothing appears or disappears.
Why is this?
I am new to learning js and having a problem with the following:
I have a custom block on my page that looks like this...
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
And a function in my script.js file that looks like this...
jQuery(function() {
jQuery(".toggleup").click(function(){
jQuery("#chat").slideToggle("slow");
jQuery(this).toggleClass("toggledown");return false;
});
});
The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:
javascript:window.close();
Which I have changed to:
javascript:window.parent.jQuery('.toggleup').click()
When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:
[object Object]
where my Iframe content should be.
What am I doing wrong?
I don't really get what you are trying to do :).
All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.
Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)
The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
However when calling the jQuery function like this...
javascript:window.parent.jQuery('.toggleup').click()
instead of clicking the link, the box would close as expected but the div and iframe are never created.
Instead I changed the following line in my custom block from...
<a class="toggleup" href="#">Live Support</a>
to...
<a class="toggleup" href="#" id="chatbtn">Live Support</a>
and called it using
parent.document.getElementById('chatbtn').click();
instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.
Hope it helps someone.
:
In the above code, I am appending a javascript onclick method to the image tag. When I click the image once and I press back, it should go back to the page it came from. Instead its staying on the same page. Is there any way I can avoid that? (probably set something else instead of href="#"). The reason I set href="#" is to make my cursor turn into hand, other than that it has no use.
This is occuring in Firefox. In IE it works fine.
Please help. Thanks.
The reason I set href="#" is to make
my cursor turn into hand, other than
that it has no use.
You can remove the <a href="#"> and add the cursor: pointer style to the image:
<img src="logo.gif" style="cursor: pointer;" />
... to turn the cursor into a hand.
On the other hand, it is probably better to follow the guidelines for progressive enhancement, as David suggested in another answer.
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi'); return false;"/>
you need add return false; to your onclick events if you don't want to load the link.
<a href="#">
<img src="http://www.google.com/intl/en_ALL/images/logo.gif"
onClick="alert('hi'); return false;"/>
</a>
return false prevents the default action from occurring (in this case navigating to "#"), and then navigating back will return you to the previous page, instead of to the current page without "#".
Follow the pragmatic guidelines for progressive enhancement. In particular: Build on things that work.
Use this instead:
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" onClick="alert('hi')" style="cursor:pointer"/>
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.