How to play a sound when <div> is updated - ajax

I'm writing a simple chat module that will be embedded in a website. It will allow website visitors to chat with the website owner.
The website is ruby/rails and I'm using AJAX.
One thing I can't figure out how to do is how to play a 'bling' sound when a new message arrives (don't worry, this sound is switchable, and the default is 'off'.)
I want the "bling" to play when the message arrives... i.e., when the div that holds the message list is updated by the Server via Ajax.
I'm thinking I need an Event.observe('myDiv', someEvent, callback) function, but I can't figure out what I should use for 'someEvent'...
Any help, much appreciated.
-- John

have you tried 'load' or 'change'? for listeners the event has to be of a certain type described here http://www.w3.org/TR/DOM-Level-2-Events/events.html
another option would be to attach the sound to the AJAX callback function which populates the div.
hope that helps,
Josh

Related

Laravel 5.2 Popup User Notifications in Browser - Examples, Tips?

I have a guitar lessons site where I want to notify users (guests or logged in) about new notifications in real or near real time. I followed this example:
https://blog.pusher.com/writing-realtime-apps-with-laravel-5-and-pusher
I have an event set up, I have pusher account, I have things working as described in the above link.
But... I would like to have the notifications show up the way notifications appear on a lot of other sites. Namely, where a small popup appears on bottom right corner of browser regardless of where user is scrolled on current page. Or maybe where a message bar would appear on top of browser regaardless of where user is scrolled. In any case, I can't find examples of 5.2 notifications in this manner. All I see are examples of using a message div in a blade file and having the div populated via the pusher code in the blade. So I imagine to do do what I want is similar in spirit, just requiring some extra front end steps that are not clear to me yet.
Tips, examples appreciated!
Thanks
Well you can use a common laravel blade file (with pusher code) and inherit that file in all blade templates.
Now using jquery growl (http://ksylvest.github.io/jquery-growl/) or alert box of your choice you can show the popups on any page you want.

ClickFunnels integration with rails2 app

Is there a way to create a page in ClickFunnels(https://www.clickfunnels.com/) website and when I submit that page, I need to store the form details in my rails app(into a particular table). Which means I want to display my database in the clickfunnels integrations list. I googled hours but couldn't get much information on this.
can anyone suggest me if you have done this. A reference link also much appreciated.
We couldn't find any way to do this inside clickfunnels itself, if there is a easy way to add custom systems to their integrations I too look forward to seeing those answers. Until then, here's what we did: We just put our custom form on their page and used ajax to send it back out the end point in our system it needed to hand that data too.
Then, since we also needed to submit the same info to click funnels, we build a fake CF form(I think we actually put one on the page, but used CSS to hide it, then filled it out dynamically from our custom form), and call submit on that form, sending the user through the normal click funnels submission process and sending them to the next page in the funnel.

How to handle rel="async-post" dialog in TWebbrowser Delphi(Lazarus))?

I am making an app for FB to be able to ban people from my facebook page even when they have not yet commented or liked my page. Just like detailed here. I have a browser written in Lazarus, it logs onto facebook, navigates to page/settings, selects the first user on the "People who like this" list and changes the url and gives me a confirm dialog:
The below code creates this dialog:
<a class="_54nc" href="/pages/likes/label_fans/?action=remove&page_id=1234567890&user_id=1234567890" rel="async-post" role="menuitem"><span><span class="_54nh">Remove</span></span></a>
I would like to parse the popup dialog when it hits OnDocumentComplete event, but I am not able "catch" it. (I guess it is due to the fact this is made with AJAX(?) and with "async-post". )
Anyone knows why?
Thanks in advance,
modzsi
It looks like you can do it via API:
https://developers.facebook.com/docs/graph-api/reference/v2.0/app/banned
It doesn't mention any restriction to the user id's you can pass in.
I guess you'll need another API call to retrieve the list of people "Who Like This".

Asynchronous updating / AJAX in Django 1.4

Hi I am still new to Django and have not worked with Ajax before.
I am building an app where two players are able to chat, so it's basically a chatbox and I want the page to update for one player when the other player enters text on their page. I was wondering if anyone had any good resources for this type of functionality?
Thanks so much!
You might want to try html5 websocket.
For JavaScript and ajax, refresh the page at a timed interval. Or better fetch new messages via an ajax call and append to the DOM.

Suggestion for FullCalendar event removal UI

I have my fullCalendar functioning well, however, I need to allow the users to remove events from the calendar. I can use the clickEvent method to bring up a confirmation window with a "do you want to remove" message. But this seems kind of clunky. Is there a better UI way of removing events?
Google calendar uses a qTip on click that offers "edit event details" and "delete". At first I didn't like sending users to a different "event details page" but after thinking about this for awhile it is a really good way to go.
It is always safer to ask for a confirm before removing something.
Anyway you can customize the rendering of the event using the eventRender callback
In particular you can:
attach custom markup to render an X image that when clicked will ajax call a delete function
you can attach other jQuery plugins to reproduce exactly the qTip effect
Have a look at the link for more details. Hope it helps

Resources