2

Ok. I have this passion project I've been working on.

I'm at the stage where I have a mobile app and a backend, really I use a hosted messaging/cloud processing service as my NEW backend, replacing my own servers.

The problem lies in my non ability to understand javascript.

I know how to go from mobile to backend and all that good stuff... What i now what to do is simply change a DOM element. From either GO code or Python code.

mobile ----> messaging/processing ----> browser/DOM

Basically push either a url or a string of html code so that it displays in the browser

For this I understand my only choice is javascript.

I've looked at pusher and web sockets...

but i still dont understand how to ACTUALLY make the html element change.

sirvon
  • 2,547
  • 1
  • 31
  • 55

3 Answers3

3

Since you have considered Pusher, you can get the necessary keys from Pusher. Once you have access to that, in the client, you can add the Pusher js library to the html file you want to "push" events to.

Then you need to subscribe to a channel(js).

var channelName = "my-channel"
var channel = pusher.subscribe(channelName);

Once you subscribe to a channel from client. Trigger an event along with the data you need to send using python pusher server lib (python): 

push = pusher.Pusher(app_id='your-pusher-app-id', key='your-pusher-key', secret='your-pusher-secret')
push['my-channel'].trigger('dom-change-event', {'data': 'data'})

You can listen to this event from your client side(js):

channel.bind("dom-change-event", function(data){ // the data you Pushed from backed
  $(".div-to-change").hide(); // with the help of jQuery select the dom, and hide it.
})

Pusher maintains a websocket connection with the client, and as soon as an event is triggered from the server, it is raised by Pusher at the client side.

DOM manipulation(change):

The DOM change that you were referring to can be done in many ways. Some are mentioned below:

  1. Have all the Content(html code) ready in your frontend and based on the server's push message you can show/hide different parts of your DOM like the one mentioned above.
  2. Construct the DOM on the fly with javascript based on the pusher message
  3. Send the HTML code from the server and simply append it to the DOM.

IMPORTANT thing to note here is that DOM manipulation is done using a library called jQuery in the above example. jQuery makes it easy for you do DOM manipulations. http://jquery.com/

Also refer to this article to get started on doing DOM manipulations(changes) using jQuery.

Tamillharasan
  • 460
  • 4
  • 10
MIdhun Krishna
  • 1,739
  • 1
  • 13
  • 31
  • can you elaborate on do the div change here...that's the part that everyone assumes is apparent..how do you DO the div change? – sirvon Dec 05 '13 at 09:10
  • @sirvon You can refer to some online resources on how to do dom manipulation. As a starting point refer to this article http://www.tutorialspoint.com/jquery/jquery-dom.htm. – Tamillharasan Dec 05 '13 at 09:25
  • What is the dom change you want to do? – MIdhun Krishna Dec 05 '13 at 09:31
  • thanks to @tamillharasan, ill continue learning from here with the resources and instruction you've provided. thank you guys once again – sirvon Dec 05 '13 at 10:20
  • @midhunkrishna how is using pusher diff than doing SSE or http push? – sirvon Dec 07 '13 at 04:46
  • @sirvon Pusher uses websockets which offers full duplex connectivity. While in sse you will have to use ajax or similar techniques to push data from client to server. A much elaborate discussion about this can be found at http://stackoverflow.com/questions/5195452/websockets-vs-server-sent-events-eventsource – MIdhun Krishna Dec 08 '13 at 12:48
0

Maybe you can use reverse AJAX, I use DWR Framework http://directwebremoting.org/dwr/documentation/reverse-ajax/index.html

Ganchix
  • 315
  • 4
  • 13
-2

JavaScript to change an element

HTML

<div id="myDiv" class="divvy">some content</div>

JavaScript

// selecting elements
var elementById = document.getElementById("myDiv");     // returns the element by id
var elements = document.getElementByClassName("divvy"); // returns array of all elements with this class

References

jasonscript
  • 6,039
  • 3
  • 28
  • 43
  • The asker seems to be somewhat of a beginner to JavaScript. Perhaps this answer would be more useful to them if you mentioned how to actually integrate it with what they are doing? – Matthew Dec 05 '13 at 09:41