Hosting phono (jquery softphone plugin) dependencies locally? - javascript

This may be too obscure a question, but perhaps someone can spot what I'm doing wrong.
Phono (jquery plugin for javascript/flash-based softphone built on top of Tropo/Voxeo) loads a couple of dependencies from the phono.com servers. Namely,
flensed.js
checkplayer.js
swfobject.js
phono.audio.swf
I would very much like to avoid loading these dependencies from an external server (for obvious reasons) and going by this thread on their forums (which I can't register for because it appears every possible username has been "taken") , it should be possible to host them locally.
Here's a prettified source for the main jquery plugin. Maybe I'm just bad at looking, but I could not find a commented, un-minified version either in their full SDK or on github.
So after changing
base_path: "http://s.phono.com/deps/flensed/1.0/"
and
swf: "http://s.phono.com/releases/" + Phono.version + "/plugins/audio/phono.audio.swf"
... all dependencies seem to load just fine, phono successfully grabs a session ID and chats by SIP appear to be working. When I try to dial out or call the session id/SIP, however, I get a javascript error:
Uncaught TypeError: Cannot call method 'start' of null
referring to line 770 : h.start().
this.$flash.play(g, j); appears to return null or undefined. I suck at javascript and can't figure out why.
EDIT - if anyone would be so adventurous as to try this out, you can just grab their "kitchen sink" demo and slap it up on a server without much hassle.

Okay -- this is ridiculous and I'm an idiot for not catching it sooner.
Flash was trying to load the ringtones off my server at the URL that requires authentication. Unfortunately, flash is not a user with a valid session. Hence, flash was grabbing big handful of nothing. Sorry.

You can download the PhonoSDK and all of the samples (including the kitchen sink demo) and run it on your localhost. Here's the link: http://s.phono.com/releases/PhonoSDK-0.2.zip. It's open source, do you can also fork/contribute to the project as well - https://github.com/phono
I just tried it using Apache on my localhost it worked without editing anything.

Related

JQuery "load" worked in Bracket's Live Preview, but not when uploaded to server

I am working on a website in which I want to load web pages through Jquery's .load function as a part of an overlay type of navigation. I use Brackets to code and its Live Preview function has proven to be very useful.
While developing I already noticed that the load function only worked in the Live Preview mode, and not if I open the page in a regular browser window, so I assumed that Live Preview emulates a server in some way and that's why it worked.
However, when I uploaded my files to the server through the MODx content management system that I use, the function seems to have stopped working.
For the sake of completion, here's the code snippet that I use:
{$( ".div" ).load( "page.html" );
Can anybody tell me why this is happening? I've read some stuff about security protocol issues with .load, but since all files are on the same server I don't think that's the issue. Don't take my word for it, though. I'm a designer first and a developer... third or fourth, probably.
EDIT: The console gives me a 404 error.
Thank you for taking the time to read this!
Kind regards

Why do I have differences with AJAX hosted local vs remote?

I guess part of my answer relates to "same-origin" but I'm not still not absolutely clear on when it applies and when not (or why it works in one instance, but is not a solution in other cases).
I am using latest jQuery, jQuery mobile and Apache/MySQL/PHP stacks. Client is either Windows 7/Firefox 38, or iPad/PhoneGap.
My AWS hosted php code serves the following to help resolve "same origin":
$http_origin = $_SERVER['HTTP_ORIGIN'];
header("Access-Control-Allow-Origin: $http_origin");
The Phone Gap version of my app works as expected, retrieving data from my AWS server and rendering the data it has retrieved.
Calling the exact same code from my laptop browser fails. Why?
If I copy/paste the AJAX URL into my browser, it correctly pulls the JSON data from AWS.
In an effort to resolve, I dump output to console.log. The jQuery AJAX "error" section gets called instead of the "success" portion. The same "error" result occurs if I call the index.html file (which calls JS) using File Open within Firefox, or if I call the locally apache hosted index.html file, jQuery ajax jumps to "error" section.
So if my phonegap app works, but my laptop does not, why? I mean, I see my app being akin to the laptop web browser. They both in effect have a different origin than my web server so I would expect either both work, or both fail.
If someone can help clarify it would be great - I have twice spent time chasing a problem that only exists in my dev environment but works just fine in production - its frustrating!
Thanks all in advance
Have you white listed domain in your phonegap config ?
http://docs.phonegap.com/en/4.0.0/guide_appdev_whitelist_index.md.html
ex:
Access to google.com:
<access origin="http://google.com" />
__ reading it should improve : https://github.com/phonegap/phonegap-app-developer/issues/169 __

.htaccess configuration for HTML5 History API

After several days of digging at the HTML5 History API, I found this great working example that suits my needs https://github.com/pinceladasdaweb/html5-history-api
However, when trying to run it on my local server/web hosting, I get an Internal Server Error, which leads me to think that there's something misconfigured in the .htacccess file.
Looked up at the Apache Error log and confirmed my theory, this was what error line tells:
"[...]
.../html5-history-api-master/.htaccess:
Invalid command 'RewriteEngine', perhaps misspelled or defined by a
module not included in the server configuration"
I'd like to know if I need to make specific configurations in the server to make the example run properly.
You can see a working demo done by the owner here: http://www.pinceladasdaweb.com.br/html5-history-api/
Any help will be really appreciated.
Thanks!
This is what I have done to make it work.
1- As Panama Jack said in the comments, the answer of what was happening was in the log file wamp\logs\apache_error.log
[...] /html5-history-api-master/.htaccess: Invalid command 'RewriteEngine', perhaps misspelled or defined by a module not included in the server configuration
2- I enabled the rewrite_module on my local server (see Hardik Thaker for your visual reply to this post!
3- My web hosting is GoDaddy, I found out that I had to tweak the .htaccess file to make it work. This last post saved my life!
Hope it helps!

appMobi / phonegap setting/deleting cookie click action required 2 times before working?

I can't figure out for the life of me whats up with this. I dunno if this is appMobi/phonegap centric, cause they have there own special ways of setting cookies, and handling them. But I have what seems to be a unique problem overall, and it only occurs in the process of actually writing a cookie for the first time. Or removing it if it exists which is kind of like writing it.
Anyway I have 2 functions that worked perfectly up til the point of introducing the cookies to them. But I need the cookies also as its part of a login check, and a handful of other things. So this is my issue.
I type my user/pass, hit login. get nothing. hit login again, works.
I hit logout after being logged in, nothing works. hit it again.. works..
These are ajax driven functions as well. Dunno if that has anything to do with it or not, but in both cases cookies are being written in one shape form or another and thats when the functions seem to break in respect to the fact that I need to click the buttons that trigger them twice to get the desired effect despite them being a single click action.
If I remove the cookie lines from my functions everything works normally again without problem, with exception that the cookies are required to actually use half the stuff I am building. Also its a lone cookie being written with a numeric value.
Ideas?
AppMobi.cache.setCookie('AutoRemember', uid, 90);
This one line if its there, i have to double click for my functions to work, if its not there my functions work as expected..
a sample of one of my function would be (quickly typing one out here for example sake)
$('#buttonX').click(function(){
url = 'http://www.domain.com';
$.post(url, function(data)
{
if(data.status == "good")
{
AppMobi.cache.setCookie('AutoRemember', uid, 90);
window.location = 'dashboard.html';
}
}, 'json')
});
Ah yes, I ran into the same thing. You'll need to download and init the local_bootstrap.js lib and something from "Develop In Eclipse For Android " (I downloaded the .zip "appMobi Cloud Services library for PhoneGap Android development"). I'm doing the Android app with Eclipse, and I assume you are too, your post didn't mention what IDE you were using.
The .zip file has a great readme.txt on where & what to copy (.java files, jar file, etc.)
found here: http://www.appmobi.com/?q=node/85
Well, come to find out or as far as I can figure at least. This appears to be a glitch between browser and emulator more so than it is my coding. When I run the app in the sandboxed appMobi application from "Test Anywhere" things work as expected all around.
I will be opening up a bug ticked on appMobi where every they take bug reports and I will come back here with a link later so others may follow it as well when and if they come across a similar issue.

Javascript debugging difficult as browser doesn't refresh the scripts!

I'm trying to debug a Javascript written in the Mootools framework. Right now I am developing a web application on top of Rails and my webserver is the rails s that boots WEBrick.
When I modify a particular tree.js file thats called with in one a mootools init script,
require: {
css: [MUI.path.plugins + 'tree/css/style.css'],
js: [MUI.path.plugins + 'tree/scripts/tree.js'],
onload: function(){
if (buildTree) buildTree('tree1');
}
},
the changes are not loaded as the headers being sent to the client are Last Modified: 10 July, 2010..... which is obviously not true since I just modified the file.
How do I get rid of this annoying caching. If I go directly to the script in my browser (Chrome) it doesn't show the changes until I hit refresh, but this doesn't fix my problem when I go back to my application and hit refresh, it still loads the pre-modified script.
This has happen to me also in FF, I think it is a cache header sent by the server or the browser itself.
Anyway a simple way to avoid this problem while in development is adding a random param to the file name of the script.
instead of calling 'tree/scripts/tree.js' use 'tree/scripts/tree.js?'+random that should invalidate all caches.
As frisco says, adding a random number in development does the trick but you will likely find that the problem still affects you production. You want to push new JavaScript changes to your users but can't until their browsers stop caching the file. In order to do this, just get the files mtime and add that as the random string. This will only change when the file is modified and so the JavaScript will be loaded from cache if it has not been changed or it will be loaded from the server, if it has.
PHP has the function filemtime but as I'm not familiar with Ruby, I'm afraid I can't help you further in that direction (sorry!). However, this answer seems to accomplish what you want.
Try the Ctrl+F5 trick. To avoid hitting browser cache.
More info here:
What requests do browsers' "F5" and "Ctrl + F5" refreshes generate?

Categories

Resources