He there, i'm trying to get my canvas data on server part to analyze it.
I have my js on mouse button up that saves base64 data in hidden input on page
var src = canvas.toDataURL('image/png');
var rowCount = parseInt($("#total").val());
rowCount++;
$("#total").val(rowCount);
var html = '';
html += '<div id="inputRow">';
html += '<input type="hidden" name="[' + (rowCount - 1) + '].line" value="' + (src) + '" />';
html += '</div>';
$('#newRow').append(html);
Aftet this i need to trigger somehow my c#
Maybe there is more correct way to do this? Or can i trigger OnPost() method from js?
Related
I am having trouble. So I need to get data from an api. I have a search bar and the user needs to input the search bar to look up a super hero api.
How would I get data from a search bar and put in my url all in a .click function.
var userInput;
var url;
var test;
//https://superheroapi.com/api/10215865526738981
$(document).ready(function () {
// when the user types in the data and clicks the button
$(btn1).click(function () {
// this is where the search bar is
userInput = document.getElementById('mySearch').innerHTML;
});
url = 'https://www.superheroapi.com/api.php/10215865526738981/search/batman' + userInput;
// here is where the api link in say type in batman
// and is should pop up with info about batman and
$.getJSON(url, function (data) {
var html = '';
$.each(data.results, function (i, demo) {
html += '<h2>' + demo.name + '</h2>';
//html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2> Power Stats ' + demo.powerstats.combat + '</h2>';
html += '<p> Connections ' + demo.connections.relatives + '</p>';
html += '<p> appearance ' + demo.appearance.gender + '</p>';
html += '<h2> Work ' + demo.work.base + '</h2>';
html += ' Profile <img src ' + demo.image.url + '>';
});
$('#demo').html(html);
});
}
<p>
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<p id="demo"></p>
</p>
Here is something that works that you can use to compare with your code and make something out of it. I've used plain javascript and left comments what is going on so that you can learn from it.
There were few wrong assumptions in original question.
code was executing on page load and didn't wait for user input
url was hardcoded to start with batman + what ever user wrote
Code below is not perfect, but it is close enough to original code and it should be easy to understand. I also opted not to use jQuery, but you should be able to use it if wanted. Just replace getElementById with jQuery selectors and replace XMLHttpRequest with getJson.
I hope this helps you move ahead with your problem and that you will be able to learn something new which could help you better understand javascript. Happy coding!
var button = document.getElementById('btn1');
// when user clicks on button, we want to call function start search
button.addEventListener('click', startSearch);
function startSearch(event) {
// when we are starting the search, we want to pick up the value
// input field from user
var userInputValue = document.getElementById('mySearch').value;
// this is base API url on which we can add what user wanted
var urlBase = 'https://www.superheroapi.com/api.php/10215865526738981/search/'
// if user did not provide name in input, we want to stop executing
if (userInputValue === null || userInputValue === '') return;
// if we are still in this function, append what user typed onto urlBase
var searchUrl = urlBase + userInputValue;
// call function which actually executes the remote call
performSearch(searchUrl);
}
function performSearch(searchUrl) {
// this could be jQuery getJSON if you so prefer
// here it is vanila JS solution of how to get data via AJAX call
var requestData = new XMLHttpRequest();
// because AJAX is always async, we need to wait until file is loaded
// once it is loaded we want to call function handleResults
requestData.addEventListener('load', handleResults);
requestData.open('GET', searchUrl);
requestData.send();
}
function handleResults() {
// once we get response, because we used vanilla JS, we got response
// available in this context as "this.response", however it is type string
// we need to take that string and parse it into JSON
var responseJSON = JSON.parse(this.response);
// if there is error, we didn't find any character
if (responseJSON.error) console.log('Character not found');
else {
var html = '';
responseJSON.results.forEach(function (result) {
html += '<h2>' + result.name + '</h2>';
// html += "<h2>" + demo.biography.alter-egos + "</h2>";
html += '<h2>Power Stats ' + result.powerstats.combat + '</h2>';
html += '<p>Connections ' + result.connections.relatives + '</p>';
html += '<p>Appearance ' + result.appearance.gender + '</p>';
html += '<p>Work ' + result.work.base + '</p>';
// html += ' Profile <img src ' + result.image.url + '>';
})
// this is bad thing to do, injecting html like that into DOM
// but let's leave this lesson for later stage
// so, let's take this html and drop it onto the page
document.getElementById('demo').innerHTML = html;
}
}
<input type="search" id="mySearch" name="mySearch">
<button id="btn1">Search</button>
<div id="demo"></div>
const value = document.getElementById('mySearch').value;
And then use this value in your api url.
I am a newbie in programming. Excuse my ignorance.
My english is not too good. Hope you understand what I mean in my question.
How can I get the value of id NILAI below and insert into mysql.
html += '<tr>';
html += '<td class="indi" align="center">';
html += row.nis;
html += '</td>';
html += '<td class="indi">';
html += row.nama_siswa;
html += '</td>';
html += '<td>';
html += '<input id="nilai" type="text" placeholder="nilai"/>';
html += '</td>';
html += '</tr>';
I want the input value insert into mysql where col nis in mysql table same with row. nis
I've been trying this, but It's wrong. It just read the value of the first row in input nilai and make a new nis=0.
var data1 = document.getElementById("nilai") ;
var i;
for (i=0;i<data1.length;i++) {
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1.elements[i]. value+'")';
}
Note: dataid is a variabel from url that I need to input.
you should use this code in javascript to get the value
var data1 = document.getElementById("nilai").value;
USE:
var data1 = document.getElementById("nilai").value; //to get the value in the input tag
var sql='INSERT INTO nilaitugas(no_tugas, nilai) VALUES ("'+dataid+'","'data1+'")';
I have this javascript code where it goes for each movies in jsonp dataType. For each movies I have to display its thumbnail image and its title together with the star rating. To display the star symbols below for each movies I have this code:
var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING
It simply sets the html content of the class prediction to this -> <div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>
I tried to use this on directly on my html code and it is fully working I can see the stars. Here it is:
But I tried this on javascript and it is not displaying. I just want to have ratings below for each and every movies.
This is my javascript code:
var html = '';
var count = 0;
$.each(data.movies, function(index, movie) {
html += '<div class="item col-xs-6 col-md-3">';
html += '<div class="thumbnail" style="min-height:320px;max-height:320px;">';
//add link here
html += '<a href="viewMovieDetails.php?id=' + movie.id + '">'
html += '<img src="' + movie.posters.detailed + '" style="width:175px; height: 230px;" class="img-responsive" alt="" ></a>';
html += '<div class="caption">';
html += '<h5>' + movie.title + '</h5>';
html += '<div class="prediction"></div>';
html += '</div></div></div>';
//set a delay (1second) for a call on rotten tomatoes api and
//store data on db
if(count > 5){
setTimeout(function() { storeDataOnDB(movie.id);; }, 1000);
count = 0;
}
else{
count++;
}
});
// Append movies
$('#movie_recommend').html(html);
var include = '<div class="rateit" data-rateit-value="2.5" data-rateit-ispreset="true" data-rateit-readonly="true"></div>';
$(".prediction").html(include); //DISPLAYS THE PREDICTION RATING
What do you think is wrong? Am I missing something? or is there other way to do it. Thanks for the help.
You should notify RateIt plugin, that new data is available, just add this:
$(".rateit").rateit();
after $(".prediction").html(include);
I got this data that are am getting from the database using an xmlhttprequest.
[{"description":"welcome","location":"Nairobi","name":"Equity Bank","created_at":"2013-02-07 21:12:45"},{"description":"very nice job","location":"Kisumu","name":"Equity Bank","created_at":"2013-02-16 12:19:46"},{"description":"welcome all","location":"nairobi","name":"Equity Bank","created_at":"2013-02-16 13:28:26"},{"description":"Very nice","location":"Nairobi","name":"Equity Bank","created_at":"2013-07-08 01:50:11"},{"description":"bad job","location":"eldoret","name":"Safaricom","created_at":"2013-02-03 00:00:00"},{"description":"very nice job","location":"mombasa","name":"Deep Africa","created_at":"2013-02-05 00:00:00"}]
My main aim is to arrange the data in a column form as follows:
description location name created_at
The square brackets confuse me a little bit but it seems like a javascript array but i just cant parse it correctly.
You could just loop through it, and access each element. Here is an example formatting it into some HTML tables.
var data = [{"description":"welcome","location":"Nairobi","name":"Equity Bank","created_at":"2013-02-07 21:12:45"},{"description":"very nice job","location":"Kisumu","name":"Equity Bank","created_at":"2013-02-16 12:19:46"},{"description":"welcome all","location":"nairobi","name":"Equity Bank","created_at":"2013-02-16 13:28:26"},{"description":"Very nice","location":"Nairobi","name":"Equity Bank","created_at":"2013-07-08 01:50:11"},{"description":"bad job","location":"eldoret","name":"Safaricom","created_at":"2013-02-03 00:00:00"},{"description":"very nice job","location":"mombasa","name":"Deep Africa","created_at":"2013-02-05 00:00:00"}];
var results = document.getElementById('results');
htmlString = '<table><tr>';
for( a=0; a<data.length; a++) {
htmlString = htmlString + '<tr><td>' + data[a]['description'] + '</td><td>' + data[a]['location'] + '</td><td>' + data[a]['name'] + '</td><td>' + data[a]['created_at'] + '</tr>';
}
htmlString = htmlString + '</table>';
results.innerHTML = htmlString;
There's a jsfiddle at http://jsfiddle.net/R63BJ/
As If ur using a XMLHTTRequest you will get the data in responesText
var jsonData=eval('('+responseText+')');
var text="<table><tr><th>description</th><th>location</th>" +
"<th>name</th><th>created_at</th></tr>";
for(var i=0;i<jsonData.length;i++){
text+="<td>"+jsonData[i].description+"</td>";
text+="<td>"+jsonData[i].location+"</td>";
text+="<td>"+jsonData[i].name+"</td>";
text+="<td>"+jsonData[i].created_at+"</td>";
text+="</tr>";
}
text+="</table>"
document.getElementById("tag").innerHTML="";// make sure that data is not Present
document.getElementById("tag").innerHTML=text;
and In the Jsp Page:
<div id="tag"></tag>
I've got a simple JavaScript client that pulls from a REST API to present some book data, however I seem unable to call the function createBookRow(bookid) and return the appropriate html string to the document ready function where it is called,
The output is currently being produced correctly as verified by the append to .row-fluid on the html page, ideas or suggestions welcome
function createBookRow(bookid)
{
$.get('http://mysite.co.uk/atiwd/books/course/'+bookid+'/xml', function(xml){
$(xml).find('book').each(function(){
var $book = $(this);
var id = $book.attr("id");
var title = $book.attr("title");
var isbn = $book.attr("isbn");
var borrowedcount = $book.attr("borrowedcount");
var html = '<div class="span3"><img name="test" src="http://covers.openlibrary.org/b/isbn/'+isbn+'-L.jpg" width="32" height="32" alt=""></p>' ;
html += '<p> ' + title + '</p>' ;
html += '<p> ' + isbn + '</p>' ;
html += '<p> ' + borrowedcount + '</p>' ;
html += '</div>';
$('.row-fluid').append($(html));
});
});
}
$(document).ready(function()
{
$.get('xml/courses.xml', function(xml){
$(xml).find('course').each(function(){
var $course = $(this);
var id = $course.attr("id");
var title = $course.text();
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
$('.row-fluid').append($(html));
$('.loadingPic').fadeOut(1400);
});
});
});
The line
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" >'+createBookRow(id)+'</row></div>' ;
should be just
var html = '<div class="span12"><p>' + title + '</p><row id="'+id+'" ></row></div>' ;
createBookRow(id);
createBookRow(id) function is making a get request to get some details, which happens asynchronously. Unless you explicitly mention it is a synchronous call(which is not advised).
I guess the functionality you need is to render some rows for course and in between you need books details displayed. In that case you need to explicitly say where your book row needs to be appended.
$('.row-fluid').append($(html));
The above code will always append book row at the end.
You aren't returning anything in the code you provided. You just append some HTML to a jQuery object. Try adding a return statement
return html;