CODEWITHSUNDEEP
ruby-on-railsrubyajaxjquery
Justin Meltzer
Justin Meltzer

Reputation: 13558

$.ajax() call not working as I would like it to

So I make this ajax call:

$.ajax({
   type: "POST",
   url: "/videos",
   data: { title: oembed.title }
});

inside this function call to the Embedly API:

$('a.oembed').embedly({maxWidth:300,'method':'replace'}).bind('embedly-oembed', function(e, oembed){ 
});

Now there's two things wrong with the way this $.ajax() call is working. First, it's being calling every time I load the index view, which makes sense because that's where I'm pointing the url. However, I want it to be called just once when the video is created, and I don't know how to point it to just the create method.

Second, the ajax call is just adding an empty row to the database, and the title, which is generated dynamically by the embedly API and stored in the oembed hash (the selector finds the video link in my view and turns it into an embedded video, as well as stores all of the video's attributes in oembed), is not being inserted into my database. I'm trying to store this dynamically generated title into my database.

How do I accomplish both of these goals?

UPDATE: If you're curious and want to see this in action, fork the code here: https://github.com/meltzerj/Dreamstill

UPDATE 2: Here's what the console says. Note that one is for create and the other is for show:

Started POST "/videos" for 127.0.0.1 at Wed Mar 16 03:03:12 -0700 2011 Processing by VideosController#create as Parameters: {"title"=>"Exclusive: Charlie Sheen Says He's 'Not Bipolar but 'Bi-Winning' (02.28.11)"} AREL (0.4ms) INSERT INTO "videos" ("description", "thumbnail_url", "released", "video_url", "user_id", "title", "embed_code", "created_at", "updated_at") VALUES (NULL, NULL, NULL, NULL, NULL, NULL, NULL, '2011-03-16 10:03:12.277518', '2011-03-16 10:03:12.277518') Redirected to http://localhost:3000/videos/413 Completed 302 Found in 17ms

Started GET "/videos/396" for 127.0.0.1 at Wed Mar 16 03:03:03 -0700 2011 Processing by VideosController#show as Parameters: {"id"=>"396"} Video Load (0.2ms) SELECT "videos".* FROM "videos" WHERE "videos"."id" = 396 LIMIT 1 Rendered videos/_show_video.html.erb (6.4ms) Rendered videos/show.html.erb within layouts/application (9.8ms) Completed 200 OK in 33ms (Views: 24.5ms | ActiveRecord: 0.2ms)

Upvotes: 1

Views: 305

Answers (2)

Fareesh Vijayarangam
Fareesh Vijayarangam

Reputation: 5052

I forked your code and ran it. I didn't face the routes issue you described, but I am running Rails 3.0.0. I don't know if that is making a difference or not.

Anyway, your application.js file is running exactly the way it's coded to. Basically what is happening is:

On the index page, each video link is of the form <a href="some_video" class="oembed">some text</a>

The Javascript in application.js is trying to convert all oembed classed links to embedded videos. In doing so, once it succeeeds, it runs the AJAX POST, which is really not what you want.

What I'd recommend is:

  • In your Add Window #dialog, (modal partial I believe), change the form to a remote form.
  • Write a javascript view create.js.erb and include some JS that uses the Embedly API to get the title of the video based on the URL. The method currently in use - binding the embedly-oembed method is probably not the best way to do it. The API probably has a specific way of getting the title without having to convert a hyperlink to an embed.
  • Remove the AJAX call from the application.js 's embedly-oembed event binding, since you don't want to create something each time it converts a link to an embed.
  • If the API doesn't have a method like this, you could probably do something along the lines of: Submit Video -> Use create.js.erb to generate a link in the modal partial, and then uses the existing method along with an AJAX call (called only for this window), which does an UPDATE through PUT (not a CREATE through POST) to update the title of the video it just added to the database.

Hope this helps!

Upvotes: 1

corroded
corroded

Reputation: 21604

your new call should be GET if you're using resources :videos. check your rake routes.

as for the data, it should be in the form:

Parameters: {"video"=>{"title"=>"Exclusive: Charlie Sheen Says He's 'Not Bipolar but 'Bi-Winning' (02.28.11)"}}

NOT

Parameters: {"title"=>"Exclusive: Charlie Sheen Says He's 'Not Bipolar but 'Bi-Winning' (02.28.11)"}

so basically, data should look like this:

data: { video: {title: oembed.title} }

Upvotes: 0

Related Questions