Develop Reference

How can I pass an html img element to a javascript included file?

This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!

You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.

maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.

Cross Domain JavaScript Communication

Here's a situation. My customers would be having their own web pages. On that page they might have an iFrame in which they can show a page located on my server. Outside the iFrame they would have simple buttons, which when clicked should execute javascript functions in iFrame.
So basically the code of customer's web page on customer's domain would be something like this
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm" width="800" height="550"></iframe>
And code of myserver.com/some_html_page.htm would be
$("#TestButton").click(function(){
alert("Hi");
});
I did my reserach and I am aware of the Browser Security issues, but I want to know is there any way to handle this, may be with json or something ?

As you can already tell (given the parent and child are on different domains), you definitely cannot reach up from the child iFrame into the parent to listen for events.
One way around this is to pass messages between the pages. This will require your clients to include additional javascript in their page as well as the iFrame which points to your server. This is supported in native javascript with postMessage, but including the library #Mark Price suggests will make your life much easier.
So here goes an example:
Clients Page:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#TestButton").click(function(){
jQuery.postMessage("say_hi", "myserver.com/some_html_page.htm");
});
});
</script>
</head>
<input type="button" value="Say Hi" id="TestButton">
<iframe src="myserver.com/some_html_page.htm"></iframe>
Code on myserver.com/some_html_page.htm:
...
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.postMessage.min.js"></script>
<script type="text/javascript">
// you will need to set this dynamically, perhaps by having your
// clients pass it into the URL of the iFrame,
// e.g. <iframe src="myserver.com/some_html_page.htm?source_url=..
var source_origin = "clients_page.com/index.html";
var messageHandler = function (data) {
// process 'data' to decide what action to take...
alert("Hi");
};
$.receiveMessage(messageHandler, source_origin);
</script>
</head>
Probably it would be nice to bundle the client code up into a single library that they could include, so your clients aren't burdened with writing their own javascript.
As a caveat, I wrote this code off the top of my head and it is likely be rife with typos. I have used this library before to accomplish similar goals, and I hope this answer is a useful jumping off point for you (along with the plugin documentation).
Let me know if I can clarify anything, and best of luck! :)

You could try this jquery plugin from Ben Alman, providing you can have the plugin running on both yours, and your clients servers - see the examples for ways to execute js cross domain :
http://benalman.com/code/projects/jquery-postmessage/docs/files/jquery-ba-postmessage-js.html

Lets consider if you have a function called test() which loads under Iframe, then you can access that test() function as below
document.getElementsByName("name of iframe")[0].contentWindow.functionName()
e.g.
document.getElementsByName("iframe1")[0].contentWindow.test()

One of the common patterns of doing cross-domain requests, is using JSONP.

Javascript loading but not running - rails 3.1

I have in my application layout file an external javascript file witch has several lines of code and at the end runs a function like BooManager.init() no big deal...
the problem is, it is not running the inside code on this javascript file.
this is how i use it:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "iphone4s, apple";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<%= javascript_include_tag "http://widgets.boo-box.com/javascripts/embed.js" %>
but it didn`t do anything it was suposed to do...
i`ve tried in simple html file and it works... what am i doing wrong?
NOTE:
the default way in html is this:
<script type="text/javascript">
bb_bid = "1615455";
bb_lang = "en-US";
bb_keywords = "keywords, between, commas";
bb_name = "custom";
bb_limit = "8";
bb_format = "bbb";
</script>
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>
-- EDIT --
the result generated by rails:
<script type="text/javascript" src="http://static.boo-box.com/javascripts/embed.js"></script>

It's not evaluating the script when loading using the <%= method. I'm not familiar with that syntax, but from the effect, that's what it sounds like. It's treating the script as html rather than code.
jQuery has a script load function that will get a script dynamically from a URL and then eval() it to execute it.
UPDATED WITH SAMPLE CODE
Add jQuery to your app:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
Then use it to load your script:
$.getScript('http://widgets.boo-box.com/javascripts/embed.js');
UPDATE NUMBER 2
I was able to duplicate the problem in this fiddle: http://jsfiddle.net/7x2zT/4/
If what you are trying to accomplish is to get your parameters activated before the script shows the widget - the default one looks like a sidebar, whereas your parameters make it more of a banner, then just make sure you put your parameters above the <script src stuff.
If you must be able to load dynamically, then you're going to have to figure out where the bug lies in the embed code, or if there's some other activation method. That site's documentation doesn't seem to be in English, so I can't help with that.

javascript to add source URL

I am using the following code in CEWP (content editor webpart) so after taking a survey user will be redirected to thank you page. the redirecting is not working. Am I missing something? (user able to take survey and newform.aspx never closes)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
function PreSaveAction(){
var URL = location.pathname.replace("NewForm.aspx","/surveys/Pages/ThankYou.aspx");
if(GetUrlKeyValue("IsDlg")==="1"){
URL+="?IsDlg=1";
}
$("#aspnetForm").attr("action",location.pathname+"?Source="+URL);
return true;
}
</script>

Where's the redirect? Have you tried using window.location(URL); ?

Means you are getting double "/" in URL like this :
/surveys/Lists/TestSurvey//surveys/Pages/ThankYou.aspx?IsDlg=1
just remove starting / from below string
/surveys/Pages/ThankYou.aspx

Insert javascript widget on one page of Drupal site

I have a javascript widget that can be inserted on an a plain-old html page like this:
<html>
<head>
<script type='text/javascript' src="http://example.com/widget.js"></script>
</head>
<body>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>
I would like to insert this javascript on one page of a Drupal 6 site (not every page).
This is what I have tried so far to get the script tag in the HEAD:
I set the Full HTML input format to allow php.
For the Drupal page, I set the input format to Full HTML
I then added this to the top of the body of my Drupal page:
<?php
drupal_set_html_head('<script type="text/javascript" src="http://example.com/widget.js"> </script>');
?>
But Drupal doesn't parse the php and instead prints this at the top of the page:
<?php drupal_set_html_head(''); ?>
Any suggestions as to how I can do this?

#Jeff: You should not really reconsider that. Using the PHP Filter is generally a bad idea as it potentially opens security holes. (In case someone would gain access to your user account or you have a misconfiguration in your settings this is a direct path to compromising the whole server)
I would rather propose to add js via the template.php of your theme. Also the right method to use is drupal_add_js with the option inline:
http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_add_js/6
Here are some further reads on how to use it:
http://drupal.org/node/304178#comment-1000798 http://drupal.org/node/482542

I'm not too familiar with Drupal so this answer merely gets around your widget not loading without actually answering the question why that PHP block isn't being parsed as PHP.
You don't need to call the <script> tag inside the <head>. You can just place that line right above the <script> tag that calls the widget constructor.
<html>
<head>
</head>
<body>
<script type='text/javascript' src="http://example.com/widget.js"></script>
<script type='text/javascript'>
//<![CDATA[
try{ widget_constructor('key',500,400); }
catch(e){ alert(e.message); }
//]]>
</script>
</body>
</html>

After writing that all out, I figured out the problem...
The full html input format has an HTML corrector filter turned on by default, and that filter appears to have caused problems with the PHP code. Reordering the filters to put the PHP evaluator first fixed the problem.