I would like to give users the option to post tweets by entering only the url of the tweet (i.e. they would paste https://twitter.com/inspiredmag/status/342771390283411456 and then the actual tweet embed code, once received will be saved into the database to be displayed later). I'm not too familiar with the twitter api. i assume that once the user enters the url and clicks submit i will be able to get the embed code and then save it. is there a way I can grab it before submit and show a preview to the user?
Figured it out
<script>
$('#tweetLink').on('input', function() {
var url = $('#tweetLink').val();
if(url)
{
$.ajax({
url: "https://api.twitter.com/1/statuses/oembed.json?url="+url,
dataType: "jsonp",
async: false,
success: function(data){
$("#embedCode").val(data.html);
$("#preview").html(data.html)
}
});
}
})
</script>
Related
My project has a Post model. My home page has list of all post and post_create form. I create post using ajax view. Intention was to create a new post and update the home page without page refresh. Here is the code,
views.py,
def post_create_ajax(request):
if request.is_ajax():
if request.method == 'POST':
title = request.POST.get('the_post')
author = request.user
post = Post(title=title, author=author)
print(title)
post.save()
return JsonResponse({'title': title})
The script,
$('#postform').submit(function(event){
event.preventDefault();
console.log('Working');
create_post();
});
function create_post(){
console.log('Create Post is working');
var posttitle = $('#id_title').val();
$.ajax({
url: '/ajaxcreate/',
type: "POST",
data: {
the_post: posttitle,
csrfmiddlewaretoken: '{{ csrf_token }}',
},
dataType: 'json',
success: function(data){
$('#id_title').val('');
console.log(data.title);
$('#post_title_content').html(data.title);
},
error:function(){
console.log('Error Occoured');
alert('Error');
},
})
}
This part works fine. The page new post is getting added without refresh.
Here is a problem. After I submit a post, the new title that getting added are not safe.
e.g. if I add <b> This is a title </b>, The new div is added with This is a title and only returns to plain text <b> This is a title </b> after I refresh the page.
So my question is how to change my script so that it will update div as plain text?
Images:
New post is added, but not in plain text,
After I refresh it shows as plain text,
You should use .text instead of .html on this line
$('#post_title_content').html(data.title);
jQuery.html() treats the string as HTML while jQuery.text() treats the content as text
You should use .text(data.title) instead of .html(data.title). There is more information on this other question.
is there any way to open url in "server side".
I'm using https://www.lightsms.com/ as my sms gateway. And to send sms, you need to visit (for example) https://www.lightsms.com/send.php, so i don't want to redirect user to that url. I just want to open it in server background, and close.
after route and before real redirect, example's here:
Route::get('/sms', function() {
//i need to excecute that url here
redirect('success.html');
});
Is there any way to do this?
I think you need to do this asynchronously using xhr or ajax if you use jquery, you basically post the information asynchronously and your server (your php script) just returns a json back, in your success function / promise you can get the data and do something with it if you like, this process does not require any redirect.
This is a simple example which you may need to modify:
function asyncPost(event){
$.ajax({
url: "https://www.lightsms.com/send.php",
data: {
name: "any value or variable,"
id: "any value or variable"
},
datatype: "json",
type: "POST",
success: function(data) {
console.log("success");
// do something with data if you need, data contains the returned data from your php script
},
error: function(data) {
console.log("an error occured");
}
});
}
I have a regular POST form for my search function. I currently have the following route:
Route::post('/search', 'PostController#search');
I get the form data using jQuery/AJAX:
$('form').on('submit', function(event)
{
event.preventDefault();
var form = $(this);
$.ajax({
url: '/search',
type: 'post',
data: form.serialize(),
dataType: 'json',
success: function(data)
{
//
},
error: function(data)
{
//
}
});
});
However, when the results page is shown, it only shows /search in the URL without the user's query, like:
http://www.website.com/search
What I want is to do something like /search/{user query here}, like:
http://www.website.com/search/bob
Essentially, I want to be able to show the user's query within the URL.
How can I do this and how can I do this safely?
You have two options.
Use normal form and give action as "user/{user_name}" when submit without using jQuery.
For that add a route like that.
Route::get('/search/{user_name}', 'PostController#show');
When your ajax success redirect it to the page "user/{user_name}"
I have a website in localhost:8080, that has a window to log in to Facebook. When I make the request like this:
function fb() {
$.ajax
(
{
type: "POST",
url: "https://www.facebook.com",
data: {
username: $("input[name = 'username']").val(),
password: $("input[name = 'password']").val()
},
success: function(data, text, status) {
alert(status.status);
}
});
}
it keeps returning me 200 status even if I provide incorrect details. I suppose it just returns me the whole page...
How can I make this work? I want the Facebook page opened and logged in if credentials are correct and if credentials are wrong, I want error code to be returned.
You cannot use ajax to post to another domain or the server has to enable CORS for your domain. But you can use the FB login: https://developers.facebook.com/docs/facebook-login/web/login-button
When dealing with OAuth from the server, such as Twitter and Facebook, you most likely will redirect the user to an URL asking for app permission. Usually, after clicking a link, you send the request to the server, via AJAX, and then return the authorization URL.
But when you try to use window.open when the answer is received, your browser blocks the popup, making it useless. Of course, you can just redirect the user to the new URL, but that corrupts the user experience, plus it's annoying. You can't use IFRAMES, but they are not allowed (because you can't see the location bar).
So how to do it?
The answer is quite simple, and works cross browser without any issues. When doing the AJAX call (I'll be using jQuery in this example), just do the following. Suppose we have a form with two buttons, Login with Twitter and Login with Facebook.
<button type="submit" class="login" value="facebook" name="type">Login with Facebook</button>
<button type="submit" class="login" value="twitter" name="type">Login with Twitter</button>
Then the Javascript code where the magic happens
$(function () {
var
$login = $('.login'),
authWindow;
$login.on('click', function (e) {
e.preventDefault();
/* We pre-open the popup in the submit, since it was generated from a "click" event, so no popup block happens */
authWindow = window.open('about:blank', '', 'left=20,top=20,width=400,height=300,toolbar=0,resizable=1');
/* do the AJAX call requesting for the authorize URL */
$.ajax({
url: '/echo/json/',
type: "POST",
data: {"json": JSON.stringify({"url": 'http://' + e.target.value + '.com'})}
/*Since it's a jsfiddle, the echo is only for demo purposes */
})
.done(function (data) {
/* This is where the magic happens, we simply redirec the popup to the new authorize URL that we received from the server */
authWindow.location.replace(data.url);
})
.always(function () {
/* You can poll if the window got closed here, and so a refresh on the main page, or another AJAX call for example */
});
});
});
Here is the POC in JSFiddle http://jsfiddle.net/CNCgG/
This is simple and effective :)
Try adding async: false. It should be working
$('#myButton').click(function() {
$.ajax({
type: 'POST',
async: false,
url: '/echo/json/',
data: {'json': JSON.stringify({
url:'http://google.com'})},
success: function(data) {
window.open(data.url,'_blank');
}
});
});