I am using FB.ui() to share a post. The size of my image 1200x600. Everything is working perfectly expect image dimension. It is showing in thumbnail, however my image dimension is 1200X600 so as per Facebook rule my post share image will should be show in full width if dimension is 1200X600.
Following is my html code:
<div class='col-md-12 text-center' style='padding:5px 45px'>
<input type='hidden' value='".$eventName."' id='fb_title' />
<input type='hidden' value='".$base_url."/images/".$fb_image."' id='fb_image'>
<input type='hidden' value='".$fb_description."' id='fb_desc' />
<input type='hidden' value='".$base_url."/events/".$eventUrl."' id='fb_link'>
<button class='btn btn-primary font_family' id='shareBtn'><i class='fa fa-facebook'></i> Share on facebook</button>
</div>
Following is my script:
<script>
$(document).ready(function(){
$('#shareBtn').click(function(){
var fb_title = $('#fb_title').val();
var fb_image = $('#fb_image').val();
var fb_desc = $('#fb_desc').val();
var fb_link = $('#fb_link').val();
FB.ui({
method: 'feed',
name: fb_title,
link: fb_link,
picture: fb_image,
description: fb_desc
});
});
});
</script>
Related
I have blogger website. I am making a contact form by editing HTML. But the post method doesn't work when I submit the form. It shows error "Method Not Allowed
Error 405".
Can anyone help me please?
<form name="google-sheet" method="post">
<h1>Registration</h1><br>
Your Name: <input type="text" name="name" required><br>
Your message: <input type="text" name="msg" required><br>
<br><br>
<button type="submit">Submit</button>
</form>
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbzKqduyPdrNj2XMNKah5T2VJ92IFIRYkQx3w5uXazMc9ZSXCFCh/exec'
const form = document.forms['google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})
.then(response => alert("Your response has been recorded!"))
.catch(error => console.error('Error!', error.message))
})
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>
</html>
I have this template:
<Template name="nuevoEjercicio">
<div class="container-fluid">
<div class="form-group">
<input type="text" class="form-control input-lg" name="ejercicio" placeholder="Ejercicio?"/>
<input type="number" class="form-control" name="repeticiones" placeholder="Repeticiones?" />
<input type="number" class="form-control" name="peso" placeholder="Peso?" />
<button type="submit" class="btn btn-success" >
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</Template>
that I use to capture and save to the database.
Then on my .js file I am trying to get the data and save it:
Template.nuevoEjercicio.events({
'click .btn btn-success': function (event) {
var ejercicio = event.target.ejercicio.value;
var repeticiones = event.target.repeticiones.value;
var peso = event.target.peso.value;
ListaRutina.insert({
rutina:"1",
ejercicio:ejercicio,
repeticiones:repeticiones,
peso:peso,
});
// Clear form
event.target.ejercicio.value = "";
event.target.repeticiones.value = "";
event.target.peso.value = "";
// Prevent default form submit
return false;
}
});
}
as I understand, when I click on any object that has the btn btn-success style....but is not the case. For some obscure reason -for me- is not working.
Can you check it and give me some advice?
Thanks!
First of all, there's an error in you selector. It's 'click .btn.btn-success', not 'click .btn btn-success'.
Also you can't do that event.target.ejercicio.value thing. event.target is the element that was clicked. You'll have to do something like this:
'click .btn.btn-success': function (event, template) {
var ejercicio = template.$('[name=ejercicio]').val()
...
OK
What after wasting hours and hours the solution is:
1- on the html file give your input an id:
<input type="number" class="form-control" **id="peso"** placeholder="Peso?" />
<button type="submit" class="btn .btn-success" id="**guardar**" />
so now you want to save data on the input when the button is clicked:
2- You link the button with the funcion via the id
Template.TEMPLATENAMEONHTMLFILE.events({
'click **#guardar**': function (event, template) {
var ejercicio = template.$("**#peso**").val();
and get the value linking using the input id.
I need form with one text box and submit button, and that's should be used for taking number from the user and open my site url + the number.
For example:
User will type in the text field : 44
Then he press the button.
The page should take the number and open a link like this :
http://localhost/44
<form action='http://example.com'>
<input type="text" name="number">
<input type="submit">
</form>
You have to use jquery + form like below may help you
<form method="get">
<input type="text" name="num" id="num" />
<input type="button" class="submit" value="Go">
</form>
<script type="text/javascript">
$('.submit').live('click',function(){
var url = "http://www.example.com";
var input = $('#num').val();
alert(input);
window.location.href=url+'/'+input;
});
</script>
I am facing a problem in my Jsp page. I am filling the values in form and then clicking on Submit button. Now the problem which I am facing is, that I want the filled values to be shown in that division only in which I filled the form. I don’t want values/result of form to be displayed in next page.
My code of form is this:
<FORM id="Fid" METHOD="GET" ACTION="attributesWithModelInfo.jsp">
<INPUT NAME="make" TYPE="hidden" value="<%=(String) session.getAttribute("baseMake")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
<INPUT NAME="model" TYPE="hidden" value="<%=(String) session.getAttribute("baseModel")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
<INPUT NAME="year" TYPE="hidden" value="<%=(String) session.getAttribute("baseYear")%>"/><BR> <!-- This attribute is optional and can be used as a regular expression. -->
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
Attribute Name: <INPUT NAME="attribute" TYPE="TEXT" SIZE="30"/><BR>
<INPUT TYPE="SUBMIT">
</FORM>
Code of ajax that I am trying is:
$(function() {
alert('here I am in Attribute');
$("#Fid").submit(function(e) {
var name = $("#attribute").val();
var dataString = 'attribute='+ attribute;
$.ajax({
type: "POST",
url: "attributesWithModelInfo.jsp",
data: dataString,
success: function(){
}
});
e.preventDefault();
});
return false;
});
The form is in attributesWithModelInfo.jsp file.
This file is given its href in index.jsp as:
<li>Attributes</li>
The div in which Form is displayed and the result after submit too has to be displayed is:
$(document).ready(function() {
$('a#pageurls').on("click", function(){
$("#refdiv").load($(this).attr("href"));
return false;
});
});
the upper code too is in index.jsp
I am attempting to post form data to my app using Facebook. My form is integrated with a dialog and I am using form.submit() to submit the form. Please see my code. The post data does not appear on the backend (e.g. load-cargo-radio, city-id, train-id), but the fb_sig* data does. Does anyone know if there are any caveats regarding posting form data with Facebook? Thanks!
Note: I have tried both using my server domain and my fb callback url for the form action. Neither works.
<div id="action_prompt">
Loading cargo...
</div>
<fb:js_string var="fbjs_load_cargo_select">
<div id="load_cargo_select">
<form id="load_cargo_select_form" action="http://railsacrosseurope.com/turn/load_cargo_select" method="POST">
<p>Your train has stopped in the city of Arhus.</p>
<p>Arhus produces the following goods:</p>
<ul>
<li>Dairy</li>
</ul>
<p>Your train is hauling the following goods:</p>
<ul>
<li>Timber</li>
</ul>
<p>What would you like to do?</p>
<input type="radio" id="load_cargo_radio" value="1">Load new goods</input>
<input type="radio" id="load_cargo_radio" value="2">Discard existing goods</input>
<input type="hidden" id="city_id" value="3" />
<input type="hidden" id="train_id" value="15" />
<input type="submit" id="submit" value="Submit" />
</form>
</div>
</fb:js_string>
.
.
.
<script type="text/javascript">
var dialog = new Dialog().showChoice('Load Cargo', fbjs_load_cargo_select, 'Okay', 'Pass');
dialog.onconfirm = function() {
// Submit the form if it exists, then hide the dialog.
frm = document.getElementById('load_cargo_select_form');
if (frm) { frm.submit(); }
dialog.hide();
};
dialog.oncancel = function() {
form = document.getElementById('redirect_form');
form.setAction('http://apps.facebook.com/rails_across_europe/turn/move_trains_auto/');
form.submit();
}
</script>
[/code]
The problem was not with Facebook. The problem was that I left out the "name" attribute for my input elements.