Recent Widgets


Register for DashboardWidgets

Recent Forums Posts

Partners


iCompositions

MacDesktops.net

RSS Showcase
RSS Comments
RSS Forums

This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies. Posted in: Widget Development

element.src method not working in regular dashboard

Author Message
benbriggs



Joined: 30 Aug 2008
Posts: 5
Location: New Jersey

Posted: Sat Aug 30, 2008 - 6:51 pm    Post subject: element.src method not working in regular dashboard Reply with quote

My widget that I'm developing was working fine in Dashcode. The widget uploads files to the web service I made. I used javascript to change an image's source to a progress image. However, when I try to use the widget in regular Dashboard, trying to change the image's src doesn't seem to work. Does anyone know a reason why?
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
thewilson



Joined: 28 Aug 2008
Posts: 18

Posted: Sat Aug 30, 2008 - 8:10 pm    Post subject: Reply with quote

Please post the function that you are using when you change the img src something like

Code:

function changePic(imgId)
{
document.getElementById(imgId).src = 'newimage.jpg';
}


use the code tags up above to ease readability Smile

Also be sure you are using the path relative to the source code.

Good Luck

MW
View user's profile Send private message Send e-mail Widgets
benbriggs



Joined: 30 Aug 2008
Posts: 5
Location: New Jersey

Posted: Sat Aug 30, 2008 - 10:00 pm    Post subject: Reply with quote

Here you go:
Code:

function get(element) {
    return document.getElementById(element);
}
get("image").src = 'Images/complete.png';


I just find it really strange that it works fine in Dashcode's test runs, but not in regular Dashboard Confused
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
thewilson



Joined: 28 Aug 2008
Posts: 18

Posted: Sun Aug 31, 2008 - 11:02 am    Post subject: Reply with quote

I usually avoid passing object handlers around too much. In this case IMHO its excessive anyhow. This will work and take less line space and less processing muscle

Code:
document.getElementById("image").src = = 'Images/complete.png';


I have not had an experience where it works in safari but not in dashboard. Inside Dashcode you are in a development environment so things are a little whack. This is what a full body page with image change would look like.

Code:

<html>
<body>
<img src="http://devimages.apple.com/images_index/iphone_sdk.png" id="image">
<input type=Button onclick="document.getElementById('image').src='http://devimages.apple.com/images_index/mac_products.png';" value=Change>
</body>
</html>



I hope this helps if not let me know we'll try to figure something out.

MW
View user's profile Send private message Send e-mail Widgets
benbriggs



Joined: 30 Aug 2008
Posts: 5
Location: New Jersey

Posted: Sun Sep 21, 2008 - 7:21 pm    Post subject: Reply with quote

I've haven't looked at the problem in a while, but I found out what is happening (but no solution yet).

In the function, the image's src is changed three times. One for while the file is uploading, one when the file is completed, and one after a delay to go back to the original. For some reason, Dashboard only listens to the last src change called, in this case the original image (Dashcode listens to all three). This makes it look like nothing has changed, but it was just called once and to the same thing. Does anyone know why Dashboard does this and how it can be fixed?
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
thewilson



Joined: 28 Aug 2008
Posts: 18

Posted: Thu Oct 02, 2008 - 2:02 pm    Post subject: Reply with quote

How are you delaying the change? If the body of the function is only the one line it really will be easier to just use the javascript function built in i would think.
View user's profile Send private message Send e-mail Widgets
benbriggs



Joined: 30 Aug 2008
Posts: 5
Location: New Jersey

Posted: Thu Oct 02, 2008 - 4:36 pm    Post subject: Reply with quote

I used a system osascript command and applescript to delay it. here's the function with any relevant parts. obviously, it's in a drag and drop function. I do know that the actual function is called and that the try block works because the file is actually uploaded.

Code:
function dragDrop(event)
{
   try {
      // Obtain the URIs of the dropped items
      var uriString = event.dataTransfer.getData("text/uri-list");
        //filename processing commands will be here in final   
      var image = document.getElementById('image');
        image.src = 'Images/progress.gif';
        image.className = 'progress'; //adds a with extra margins to line it up.
        widget.system("/usr/bin/osascript -e 'delay 5'", null); //will be replaced with actual upload curl script
        image.src = 'Images/complete.png';
        image.className = '';
        widget.system("/usr/bin/osascript -e 'delay 5'", null);
        image.src = 'Images/default.png';

   } catch (ex) {
      alert("Problem fetching URI: " + ex);
   }

   event.stopPropagation();
   event.preventDefault();
}


Thanks for your help Very Happy
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
benbriggs



Joined: 30 Aug 2008
Posts: 5
Location: New Jersey

Posted: Wed Oct 08, 2008 - 3:53 pm    Post subject: Reply with quote

I found the solution!

When I run both system commands, they run asynchronously. This means that they run in the background while the next command is run, in this case the widget. In effect, the src changes are being run immediately, so there is no visible change. To fix this, I used the end handler of the system command to run the src changes.
Code:

function imgchange() {
image.src = 'Images/complete.png';
}
function myFunction() {
widget.system("terminal command", imgchange);
}

However, if you want to use the output from a terminal command you must use an onreadoutput event:
Code:

function imgchange() {
image.src = "Images/complete.png";
}
function outputhandler(x) {
alert("Terminal output: " + x);
}
function myFunction() {
var thecommand = widget.system("terminal command", imgchange);
thecommand.onreadoutput = outputhandler;
}

Because the command isn't running asynchronously, it doesn't allow you to use the outputString method. By setting a function to the onreadoutput handler, it fires it with a variable attached, the output.

I hope this helps anyone else who has this same problem, and thanks for your help!

Ben
View user's profile Send private message Send e-mail Visit poster's website AIM Address Widgets
This forum is locked: you cannot post, reply to, or edit topics.   This topic is locked: you cannot edit posts or make replies.

 
Powered by phpBB © 2001, 2002 phpBB Group