Facebook share_open_graph: remove message and change button text - javascript

I'm looking for help for sharing an open graph story ("video.rates" action on "video.movie" object), through the action share_open_graph.
It works, but I would like to customize it.
I attach 3 images to post:
album with three images
In the first image the user assigns a vote and writes a brief review ("Beautiful movie") to the movie; in the second image the user has the ability to insert an additional comment ("this text will be hidden"); in the third image the user published the open graph story correctly (review, vote and url are ok), but the last comment has disappeared and you see a "Salva" button.
I have two questions:
I don't understand why Facebook Dialog ask the last comment (when the user writes "this text will be hidden") if it does not show it. Can I remove the inclusion of the latter comment, in Facebook Share dialog?
Can I customize or remove the "Salva" button on the open graph story?
This is my Javascript code:
FB.ui({
method: 'share_open_graph',
action_type: 'video.rates',
action_properties: {
"rating:value": vote,
"rating:scale": 10,
"review_text": comment,
"movie": url
}
}, function (response) {
callback(response);
});

Aurelio, about your second question, "Can I customize or remove the "Salva" button on the open graph story?". The "Salva" button appears on the open graph story because your object inherits from business, it must inherit from object. When you do this, the salva button should automatically disappear.

I haven't found anything in Facebook's documentation that hints towards a way to hide the text input field in the dialog.
The fact that any text that is entered there will not be shown if your OG action has a free form text property already (like the review_text property on video.likes) seems to be a bug.
I recommend that you create a bug report with Facebook at https://developers.facebook.com/bugs/

Related

Wordpress - Transfer Woocomerce product name to Contact form after button is clicked

http://skifimba.hostfree.pw/
This is my website. I'm noob in php/js and I want the following thing:
On the page I have added Request button (woocommerce) for products and when it's clicked a Contact form pops up. I want to echo the product name in <p></p> tags in the contact form. Anyone have an idea how this can be done?
Button locations
First button
Second button
All you have to do is add a click handler on the request button, find the text of the 'h3', and set the modal form's "name" field value to that.
Take this JavaScript for example
jQuery(document).ready(function($){
// When the Request button is clicked
$('.request-form-btn').on('click', function(){
// Set 'title' to the closest product's h3 text
var title = $(this).closest('.prod-i').find('h3').text();
// Set the value of the "name" field to the title we got above.
$('[name="modal_name"]').val( title );
});
});
It appears you're using a premium theme, so add this to the "Custom/Body/Footer" scripts section of the website if there is one, otherwise you'll need to use one of the many "Header/Footer" script plugins that are available.
You can test this by pasting the JavaScript into the dev tools console on that page.

Passing a model to an added to DOM popup window in Grails

Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.
I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.

jquery, replace html on submit

I have a form which is using a select list to jump around my site. This is currently using onclick window.location so user selects the page and presses go and it goes to that page.
I now need to add a small text box for the user to type in a code (say 123456) and then when they click go, it should go to the url selected, but with the [CODE] being the number entered in the box. I discovered jquery replaceAll so it gave me the idea to have this in the select html:
http ://jumptothispage.com/parts/p[CODE]/edit
http ://jumptothispage.com/jobs/j[CODE]/edit
When you press go, it would replace all [CODE] in that html with the code entered and then jump to that page selected, e.g.
http ://jumptothispage.com/parts/p123456/edit
http ://jumptothispage.com/jobs/j123456/edit
I am already using jquery on my site so makes sense to try and utilize that again. I'd appreciate a pointer and or other suggestions instead.
Thanks,
Paul.
A workaround: Store the code in a cookie, so at least it's not visible to every person who looks at the URL bar. Then in every onclick, fit it into the URL to send the user to the "right" page.
Or, have your select option's value literally read CODE, which your onclick interprets to mean "The user hasn't set the code yet." When the user types in the code, store it in a variable (in the example below, realcode), and you can then do this:
$('select#navigation option').each(function(idx, el) {
$(el).attr('value', $(el).attr('value').replace(/CODE/, realcode));
});

onclick event - call a button using something other than id

I am trying to rerun a block of javascript when the user clicks on a button. The site was created in a CMS so I do not have access to the button to give it an id. However, in firebug I noticed it has these values ->
<input type="submit" value="Continue">
Is there anyway I can call to this by using the value of 'Continue'?
FYI: the button is coded with php and I want to rerun the following
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function resizePole(){
var ht=($('#LayoutColumn2').height() > $('#LayoutColumn3').height()) ?
$('#LayoutColumn2').height() : $('#LayoutColumn3').height(); $('#lightPole').height(ht); }); </script>
and I am attempting to call this using:
onclick="return resizePole();"
Oh and I know next to nothing about javascript :)
Link to page working on - you may have to create a customer account. Enter some jibberish and I can delete it later
link to site
What the problem is: Ok let me explain what should be happening. I have created a div called 'lightpole' this div contains a background image of a lightpole that is coded with javascript to match the height of the 'content' div when the page loads. On the checkout_express page the creators of the CMS system have created expanding and collapsible divs that guide the user through the checkout process. On the third step 'Shipping Method' the user clicks on the 'Continue' button which expands the 'Order Confirmation Step'. This div causes the 'content' div to be longer than on initial loading but the lightpole was only sized to match the inital height of the content, not the added height of the Order Confirmation Step so it causes the lightpole to be shorter than it actually needs to be.
This will work.
$('[type="submit"][value="Continue"]').click(function () {
{
return resizePole();
});
EDIT
As pointed out in the comments, there is a more concise way to do this. I typically use the method above out of habit (makes it easier to add future logic to the click event).
$('[type="submit"][value="Continue"]').click(resizePole);
EDIT 2
To answer the question in the comments - yes, you can filter by the div ID as well. This will attach to the click event of all submit buttons inside a div with an id of DivIdHere and a value of Continue.
$('#DivIdHere [type="submit"][value="Continue"]').click(resizePole);
EDIT 3
This is a bit dirty, but after looking at your updated requirments, this should do the trick. Basically, it adds the click event to the last submit button on the page that has a value of continue (which appears to be the shipping section based on the link you provided).
$('[type="submit"][value="Continue"]:last').click(resizePole);

Does JQuery/Django have a way to build "click the text to edit"?

A Flickr page displays the title and description of the photo.
When I click on the description, it will turn it into a text-box, with a Save button. Then, I can edit what I want...and click "Save."
It'll save it via AJAX. It doesn't go to a different page or anything...it just turns the current description into a wiki-like text box.
jEditable
http://www.appelsiini.net/projects/jeditable/default.html for demo

Categories