I'm trying to get a basic JSONP query going:
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
I'm using IE8 and jquery v1.11.3
Syntax error ?callback=jQuery111309915726215071462_1436849961686&_=1436849961687, line 1 character 1
What is this callback? Where is it coming from?
If I change the URL to 'https://www.bing.com/search?q=hello+world'
I get:
Syntax error search?q=hello+world&callback=jQuery11130544191867791898_1436850255384&_=1436850255385, line 1 character 1
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
// Use event.preventDefault.
Change dataType: 'jsonp' to dataType: 'text'
Related
I am trying to pass the ajax response obtained from view to the template using HttpResponse but I don't have any idea, how to do that?
view.py
analyzer=SentimentIntensityAnalyzer()
def index(request):
return render(request, "gui/index.html")
#csrf_exempt
def output(request):
sentences = request.POST.get('name',None)
senti = analyzer.polarity_scores(sentences)
context_dict = {'sentiment': senti}
return render(request,"gui/index.html", context = context_dict
I want the senti to be printed after the score on the page but I am unable to obtain it.
template file
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<form action = Post>
Enter Sentence:<input id = "name" type = "text" name = "EnterSentence" encoding = "utf-8"><br>
<input onclick = "testfunction()" type = "button" value = "Submit" >
</form>
<div><strong>Score is {{ sentiment }}</strong></div>
</body>
<script>
var testfunction = () => {
var test = document.getElementById("name").value
console.log(test)
$.ajax({
type: "POST",
dataType: "json",
url: 'output/',
data:{
csrfmiddlewaretoken: '{{ csrf_token }}',
'name': test
},
success: function(response) {
console.log("Succesful return firm ajax call");
},
error: function(result){
console.log("Failure");
}
});
}
</script>
</html>
In your view.py return render(request,"gui/index.html", context = context_dict code is missing ending paranthesis.
This is the correct order of jQuery ajax:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
Your success and error fields are inside of data.
<script>
$(document).ready(function(){
$("button").click(function(){
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>
</body>
This is an example of how to use .html method of ajax jquery. You can adjust for your own.
Additionally, use below code to loop through response:
$.each( data, function( key, val ) {
HTMLString += <li id='" + key + "'>" + val + "</li>
});
and this should be inside of the function of success and then pass HTMLString into .html method
To make it clearer how to $.each works:
var numbers = [1, 2, 3, 4, 5, 6];
$.each(numbers , function (index, value){
console.log(index + ':' + value);
});
I have a textarea which will be in hidden state when the request comes to the page and once i select the value in the page i call a controller method which does manipilation and returns the response to the same page and in the ajax success method i try to print the response in the textarea
This is my gsp page
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Json Compare</title>
<g:javascript plugin="jquery" library="jquery"
src="jquery/jquery-1.11.1.js" />
<script>
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
var retrievedValue = JSON.parse(data);
alert("Parsed Values are: "+retrievedValue)
alert("Values are: "+retrievedValue.status)
//alert("success: "+retrievedValue.result)
if (retrievedValue.status===true) {
alert("inside the success: "+retrievedValue.result)
alert("the parsed values 1st data"+data.firstText)
$("#result").css("display","block")
$("#result").val(data.firstText)
//notice .html since it is content of textArea
//$('.textarea').html(retrievedValue.result)
//document.getElementById("textarea").style.display = "block"
//document.getElementById("textarea").innerHTML = data.result
//$('#textarea').val(retrievedValue.result).show()
// $('.textarea').css("display","");
//$('#result').attr('style', 'display:block');
//$('#testdiv').show()
//$('.textarea').toggle();
// $('#testdiv').attr('style', 'display:block');
//$('#testdiv').removeAttr("style");
//document.getElementById("result").style.display = "none";
} else { /// if (data===false ) {
alert("Failure: "+retrievedValue.value1+" "+retrievedValue.value2)
//$('#result1').html(entry.value1).show()
// $('#result2').html(entry.value2).show()
}
}
});
});
});
//event.preventDefault();
</script>
</head>
<body>
<g:form>
<div>
<label>From Time</label>
<g:select name="firstText" from="${eventsList}" noSelection="['':'-Choose the From Date-']" />
<label>To Time</label>
<g:select name="secondText" from="${eventsList}" noSelection="['':'-Choose the To Date-']" />
<button class="testMe">Compare</button>
</div>
<br>
<textarea id="result" style="display: none"></textarea>
<%--<div id="textarea">
<label>Output</label><br>
<textArea id="result" name="myField" />
<textarea></textarea>
</div>
--%></g:form>
</body>
</html>
once the result is displayed immediately it disappears how to stop it. And also how to display the result different textarea based on the response from the controller. Initially the textarea should not be visible
Treat a textArea like a div
$('#textArea').html('content');
Unless you declare:
<g:textArea value="something" />
Which then behaves differently to a standard textArea if I recall correctly
Update:
$(document).ready(function(e){
$('.testMe').click(function(e){
e.preventDefault();
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
//alert("success"+data.value)
console.log(data);
$("#result").val(data).show()
}
});
});
});
try this.. hopefully it'll work.
$(document).ready(function() {
$('.testMe').click(function() {
var URL = "${createLink(controller:'jsonComparison',action:'compare')}";
var firstText = $('#firstText');
var secondText = $('#secondText');
alert(URL);
alert(firstText.val());
alert(secondText.val());
$.ajax({
url: URL,
data: {
firstText: firstText.val(),
secondText: secondText.val()
},
success: function(data) {
//alert("success"+data.value)
console.log(data);
$("#result").val(data);
$("#result").show();
}
});
});
});
And if you try to append the textarea element dynamically? For example:
$(document).ready(function(){
$('.testMe').click(function(){
// ... your code ...
// ajax part
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
var textarea_el = $('<textarea />', {
id: 'result',
text: data.value // or just data?
});
// change form_selector with the real selector!
$(<form_selector>).append(textarea_el);
}
});
});
});
<script>
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
//alert("success"+data.value)
console.log(data);
$("#result").css("display","block")
$("#result").val(data.firstText)
}
});
});
});
</script>
try above code
if it not ,try to alert(data.firstText) check the return value in alert .whether it is object or value
I have show_place.php and two ajax pages photos.php and rating.php
I use this function to get content from ajax pages
function loadtab (getFile){
$.ajax({
url: getFile,
beforeSend: function() {
$(".tabcon").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data) {
$(".tabcon").html(data);
}
});
}
I use jQuery fancybox plugin in photos.php like this
<link rel="stylesheet" type="text/css" href="style/css/jquery.fancybox.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
and this is rating page content
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autosize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".textarea").autosize();
$(".stars").click(function () {
var ratevalue = $(this).val();
$("#rate").val(ratevalue);
});
$("#formreview").submit(function(){
var yourname = $("#yourname").val();
var yourmail = $("#yourmail").val();
var rate = $("#rate").val();
var textrev = $("#textrev").val();
var s = {
"yourname":yourname,
"yourmail":yourmail,
"rate":rate,
"textrev":textrev
}
$.ajax({
type: "POST",
url: "ajax/send_review.php",
data: s,
beforeSend: function(){
$(".showdata").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data){
$(".showdata").html(data);
}
});
return false;
});
});
</script>
Notice I use the autosize jQuery plugin and I made a form to send the rate
I use tabs to get data file from contents pages my problem is when I go to tating fancybox plugin doesn't work. How can I fix that?
I've below a script-
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function () {
$('.error-load').hide();
$('#imgLoading').hide();
$("#BtnLoadMore").click(function () {
$(this).hide();
var lastArticleId = $('#hdnLastArticle').val();
var sortOrder = $('#<%= hdnSortValue.ClientID %>').val();
alert(sortOrder);
$('#imgLoading').show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: '{"RowId":"' + lastArticleId + '", "SortOrder":"' +sortOrder + '"}',
url: "http://blogs-test.com/themes/blogs/vitalvotes/LoadService.aspx/GetNextData",
dataType: "json",
success: RenderPagedData,
error: function (response) {
$('.error-load').show();
$('#imgLoading').hide();
}
});
});
$("#btnMostRecent").click(function(){
alert("clicked");
});
});
</script>
When i run the page in the console of Firefox it shows the below err -
SyntaxError: illegal character $("#btnMostRecent").click(function(){
Am i missing something..?
Please help and thanks in advance..!
Are you copy and pasted from somewhere the code ? Here is the pic and found the red dot :
Remove that and should be okay
There is a '?' before $("#btnMostRecent").click(function(){ line.
? $("#btnMostRecent").click(function(){
alert("clicked");
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('.error-load').hide();
$('#imgLoading').hide();
$("#BtnLoadMore").click(function () {
$(this).hide();
var lastArticleId = $('#hdnLastArticle').val();
var sortOrder = $('#<%= hdnSortValue.ClientID %>').val();
alert(sortOrder);
$('#imgLoading').show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: '{"RowId":"' + lastArticleId + '", "SortOrder":"' +sortOrder + '"}',
url: "http://blogs-test.com/themes/blogs/vitalvotes/LoadService.aspx/GetNextData",
dataType: "json",
success: RenderPagedData,
error: function (response) {
$('.error-load').show();
$('#imgLoading').hide();
}
});
});
$("#btnMostRecent").click(function () {
alert("clicked");
});
});
</script>
</head>
<body>
</body>
</html>
I have tried your code and getting the same error you mentioned. Can you replace the following code with your code? I have removed the special character.
<script type="text/javascript">
$(document).ready(function () {
$('.error-load').hide();
$('#imgLoading').hide();
$("#BtnLoadMore").click(function () {
$(this).hide();
var lastArticleId = $('#hdnLastArticle').val();
var sortOrder = $('#<%= hdnSortValue.ClientID %>').val();
alert(sortOrder);
$('#imgLoading').show();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
data: '{"RowId":"' + lastArticleId + '", "SortOrder":"' +sortOrder + '"}',
url: "http://blogs-test.com/themes/blogs/vitalvotes/LoadService.aspx/GetNextData",
dataType: "json",
success: RenderPagedData,
error: function (response) {
$('.error-load').show();
$('#imgLoading').hide();
}
});
});
$("#btnMostRecent").click(function(){
alert("clicked");
});
});
</script>
If you have copied the code from a source which supports Unicode encoding, then you would get the error because, ' and " is a single quote (which we use while coding) and ‘ and “ are also quotes. If the code is copied from such a source, dont forget to remove the unsupported characters.
PS. jQuery doesn't support unicode.
To avoid this problem in future, copy the code to notepad (plain text) and then copy from there, and try pasting again to your code editor!!
<html>
<head>
<meta charset="utf-8"/>
<script src="../JQUERY/jquery-1.11.0.js"></script>
<script>
function getOptions()
{
var html=new String();
$.ajax(
{
//url: 'http://server.com/?method=get&search=menu_group_options_with_items&type=group&group_id=6&format=json',
url: 'http://server.com',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
async: false,
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
}
});
alert("returning html");
alert(html);
return html;
}
</script>
<script>
$(document).ready(function()
{
var str="";
str=getOptions();
$('#content').append(str);
});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
When I would run this using the full URL nothing would happen. I wouldn't get any information back. Now that I've changed my URL just to http://server.com and set the data:{} to the requirements from the URL, I still get nothing. At this point I'm stuck and don't know where else do go.
My Questions:
What would be a reason my code isn't working?
What else do I need to do to retrieve data from the website?
async:false is deprecated after jQuery 1.8. Either use older jQuery version change your code.
To change your code, move this part into the success function:
$('#content').append(str);
I hope this helps.
Thanks
function getOptions()
{
$.ajax(
{
url: 'http://server.com/',
data:
{
'method': 'get',
'search': 'menu_group_options_with_items',
'type': 'group',
'place_id': '6',
'format': 'json'
},
dataType: 'jsonp',
success: function (data)
{
alert("function");
//var data = JSON.parse(data);
var h=new String();
for(var i=0;i<data.length;i++)
{
h+='<div class="data">';
h+=data[i]['group_option'].OptionsID+'<br>';
h+=data[i]['group_option'].MenuGroupID+'<br>';
h+=data[i]['group_option'].group_options_name+'<br>';
h+=data[i]['group_option'].menu_group_option_information+'<br>';
h+=data[i]['group_option'].menu_group_option_min_selected+'<br>';
h+=data[i]['group_option'].menu_group_option_max_selected+'<br>';
h+=data[i]['group_option'].fDateAdded+'<br><br><br>';
for(var iter = 0; iter < data[i]['group_option']['group_option_items'].length; iter++)
{
h+=data[i]['group_option']['group_option_items'][iter]['item'].OptionItemID+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_name+'<br>';
h+=data[i]['group_option']['group_option_items'][iter]['item'].menu_item_option_additional_cost+'<br>';
h+='<br><br><br>';
}
h += '</div>';
}
alert("h");
alert(h);
alert("html equals ");
html=h;
alert(html);
$('#content').append(html);
}
});
alert("returning html");
alert(html);}