Following is relevant part of my html page, I want to get image instead of image address(result[i].url). Also I want to know if it is possible because I am using certain style(CSS) here.
function BindStudents() {
$.ajax({
type: 'GET',
dataType: 'json',
url: "http://127.0.0.1:8000/memes", success: function (result) {
var totalCount = result.length;
var structureDiv = "";
for (let i = 0; i < totalCount; i++) {
structureDiv += "<tr>" +
" <td>" + result[i].id + "</td>" +
" <td>" + result[i].name + "</td>" +
" <td>" + result[i].url + "</td>" +
" <td>" +result[i].caption + "</td>" +
" <td><button class='btn btn-link' onclick='return confirm(\"Are you sure you want to delete this record?\",DeleteRow(" + result[i].id + "))'>Delete</button></td>" +
" </tr>";
}
$("#divBody").html(structureDiv);
}
});
}
If the server sends a URL then the server sends a URL.
If you want an image then you'll need to either:
change the server-side code so it sends an image (but there is no image, file, or blob type for JSON so you'll need to encode it as text … and then write client-side code to decode the encoded image … and then find some way of displaying it … which will probably involve encoding it as a data: URL)
make a send Ajax request to fetch the image from the URL you were given
It would probably be much simpler to just create an <img> element with the src set to the URL from the JSON when you create all the other HTML.
Just add a HTML element <img>:
structureDiv += "<tr>" +
" <td>" + result[i].id + "</td>" +
" <td>" + result[i].name + "</td>" +
" <td><img src=\"" + result[i].url + "\"></td>" +
" <td>" +result[i].caption + "</td>" +
" <td><button class='btn btn-link' onclick='return confirm(\"Are you sure you want to delete this record?\",DeleteRow(" + result[i].id + "))'>Delete</button></td>" +
" </tr>";
Related
I am making a live data portal in which I have to display live data using Ajax in asp.net using c#.
I have one table and a div which contains data but in different way/different style.
Every time my page loads after 4 secs of time to show updated data i.e table and div both refreshes to have updated data.
Initially when page loads first time, I have displayed table to show data and hiden the data which is in div's form, if I clicked button(toggle button) it will display data in div's form and hide table data.
Now problem is that when I clicked toggle button it does not display's data in div form but it reloads whole java script
and display data in table every time when I clicked the button.
I want to toggle between table and a div.
Below I have my code what I have done so far.
Please help me what I have done wrong.
Thank You.
Note Data comes from db which is SQL.
<form id="form1" runat="server">
<div id="container">
<table id="liveData">
</table>
<div id="div_f" style="display:none;">
<%--<table id="liveData_div"></table>--%>
</div>
</div>
<button>Toggle Data</button>
</form>
<script src="Scripts/jquery-2.1.4.min.js"></script>
<script src="Scripts/jquery-2.1.4.js"></script>
<script>
(function worker() {
$.ajax({
type: "POST",
url: "Default2.aspx/BindData",
contentType: "application/json;charset=utf-8",
data: {},
dataType: "json",
success: function (data) {
//alert("Hello");
$("#liveData").empty();
if (data.d.length > 0) {
InDivs(data);
$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#liveData").append("<tr><td>" +
data.d[i].nodeID + "</td><td>" +
data.d[i].parent + "</td> <td>" +
data.d[i].voltage + "</td><td>" +
data.d[i].humid + "</td> <td>" +
data.d[i].humtemp + "</td><td>" +
data.d[i].prtemp + "</td> <td>" +
data.d[i].press + "</td><td>" +
data.d[i].light + "</td> <td>" +
data.d[i].accel_x + "</td><td>" +
data.d[i].accel_y + "</td><td>" +
data.d[i].result_time + "</td></tr>");
}
}
// Nontoggle();
},
error: function (result) {
//Handling error
alert("error");
},
complete: function () {
// Schedule the next request when the current one's complete
setTimeout(worker, 4000);
}
});
})();
function InDivs(data) {
$("#div_f").empty();
if (data.d.length > 0) {
//$("#liveData").append("<tr><th>Node Id</th><th>Parent</th><th>Voltage</th><th>Humid</th><th>HumTemp</th><th>PrTemp</th><th>Pressure</th><th>Light</th><th>Accel_X</th><th>Accel_Y</th><th>result_time</th></tr>");
for (var i = 0; i < data.d.length; i++) {
$("#div_f").append(
"<table class='LiveData_div'><tr>" +
"<td>Node Id</td>" +
"<td>" + data.d[i].nodeID + "</td>" +
"<td>Parent Id</td>" +
"<td>" + data.d[i].parent + "</td>" +
"</tr>" +
"<tr>" +
"<td>Voltage</td>" +
"<td>" + data.d[i].voltage + "</td>" +
"<td>Humid</td>" +
"<td>" + data.d[i].humid + "</td>" +
"</tr>" +
"<tr>" +
"<td>Hum Temp</td>" +
"<td>" + data.d[i].humtemp + "</td>" +
"<td>Press</td>" +
"<td>" + data.d[i].press + "</td>" +
"</tr>" +
"<tr>" +
"<td>Press Temp</td>" +
"<td>" + data.d[i].prtemp + "</td>" +
"<td>Light</td>" +
"<td>" + data.d[i].light + "</td>" +
"</tr>" +
"<tr>" +
"<td>Accel_x</td>" +
"<td>" + data.d[i].accel_x + "</td>" +
"<td>Accel_y</td>" +
"<td>" + data.d[i].accel_y + "</td>" +
"</tr>" +
"<tr>" +
"<td>Time</td>" +
"<td>" + data.d[i].result_time + "</td>" +
"</tr></table>");
}
}
}
$(function () {
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
});
});
</script>
Problem
Your page reload since the button tag has by default type='submit' and that will refresh the page.
Solution
You should define your type as type='button' to prevent that behavior, e.g :
<button type='button'>Toggle Data</button>
Hope this helps.
Try to add a "return false;" at the end of your click button:
$('button').live('click', function () {
$('#div_f').toggle();
$('#liveData').toggle();
return false;
});
Hi together I've got a problem with the ' and " in my js code.
$(".searchResultsMember table").append("<tr>" +
"<td>" +
"<a href='#' title='Statistik' data-container='body'
data-toggle='tooltip' data-placement='bottom' onclick='open_statistic('/memberships/statistik/', '"+
data.results[i].firstname +" "+
data.results[i].lastname +"','"+ data.results[i].id +
"');return false; '><img src='/images/iconpack/table.png' alt='Statistic'/></a> "+
[....]
The Problem is in the onclick part .. can someone help me with this ?
In JavaScript, you can mix and match ' and " as long as you use them in pairs, eg:
var x = "a";
var y = 'b';
You can also combine these on the same line, eg:
var z = "a" + 'b';
so you pick the one you need depending on the content (unless you have some nefarious coding standards written by someone that doesn't understand this (which I've seen..))
to concat a single quote, surround in doubles and the other way, eg:
var x = "'" + '"'; x == '"
this also applies to attributes:
<a href="#" title='double quote (")'>
<a href="#" title="single quote (')">
so you can fix your code by changing the quotes:
$(".searchResultsMember table").append(
"<tr>"
+ "<td>"
+ "<a href='#' title='Statistik'"
+ " data-container='body' data-toggle='tooltip' data-placement='bottom'"
+ ' onclick="open_statistic('
+ "'/memberships/statistik/', '"
+ data.results[i].firstname
+ " "
+ data.results[i].lastname
+ "','"
+ data.results[i].id
+ "');return false; "
+ '">'
+ "<img src='/images/iconpack/table.png' alt='Statistic'/></a> "+
[....]
But, having done this for you above - it's really confusing! (and therefore prone to errors)
So break it up into steps with variables, and break out just the double quotes, eg:
var onclick = "open_statistic('/memberships/statistik/', '" + ... + "');return false;";
$(".searchResultsMember table").append(
"<tr>"
+ "<td>"
+ "<a href='#' title='Statistik'"
+ " data-container='body' data-toggle='tooltip' data-placement='bottom'"
+ " onclick=" + '"' + onclick + '"' + ">"
....
I have written the script as follows:
<script type="text/javascript">
$(document).ready(function(){
$("#Click").click(function(){
var data1 = new Object();
data1.name = $('#databases').val();
$.ajax({
url : "form_submit",
type : 'POST',
data : data1,
dataType : "text",
success : function(data){
data = JSON.parse(data);
var output="<table id=tableStyle>";
output+="<tr>" + "<th>" + "REPORTSUITE_ID" + "</th>" + "<th>" + "REPORTSUITE_NAME" + "</th>" + "<th>" + "STAGING_DATABASE" + "</th>" + "<th>" + "DWH_DATABASE" + "</th>" + "</tr>";
for (var i in data)
{
output+="<tr>" + "<td>" + data[i].REPORTSUITE_ID + "</td>" + "<td>" + "<button type = \"buttion\" id =\"tableList\">" + data[i].REPORTSUITE_NAME + "</button>" + "</td>" + "<td>" + data[i].STAGING_DATABASE + "</td>" + "<td>" + data[i].DWH_DATABASE + "</td>" + "</tr>";
}
output += "</table>";
document.getElementById("placeholder").innerHTML=output;
}
});
});
});
$("#tableList").click(function(){
alert("this is data");
});
</script>
On the clicking of button with id = tableList, i want the alert with message "this is data" to be displayed but it does not display anything.
I also tried with pasting the code related to click of button with id tableList between different tags, still it did not work.
Please help
Hi used event delegation for the above question as pointed out as follows:
<script>
$(document).on("ready",function(){
$("#placeholder").on("click","button",function(event){
alert("id is " + this.id + "for database " + $('#databases').val())
})
});
</script>
The value is being passed correctly. Thanks for the pointer.
I am building an application that would allow adding tasks to the list,
and I want to add an edit button, that would allow user to edit each item from the list and then save or delete the amended item. Basically I want my .append code to attach an "Edit" button to each row.
Here is my current .append code
var id_counter = 0;
if ( valid ) {function increment(){id_counter++;} increment();
var $task = $("<div class='taskList' id='"+ id_counter +"'><ul class='taskScreen2'><tr>"
+ "<td><h1>" + type.val() + "</h1></td>"
+ "<td class='title'><h3>" + title.val() + "</h3></td>"
+ "<td>" + wordcount.val() + "</td>"
+ "<td><p>" + description.val() + "</p></td>"
+ "<td>" + deadline.val() + "</td>"
+"<td><button onclick='edit("+id_counter+")'>"+"edit"+"</button></td>"
+ "</tr></ul></div>"
).appendTo("#tasks2 tbody");
I don't know if I understood the question properly, but I think this should do what you like.
if ( valid ) {
var $task = $("<tr class='taskList'>"
+ "<td><h1>" + type.val() + "</h1></td>"
+ "<td class='title'><h3>" + title.val() + "</h3></td>"
+ "<td>" + wordcount.val() + "</td>"
+ "<td><p>" + description.val() + "</p></td>"
+ "<td>" + deadline.val() + "</td>"
//new button
+ "<td><button onclick='edit()'>"+ "Edit" + "</button></td>"
+ "</tr>"
).appendTo("#tasks2 tbody");
if you want to act differently depending on the row, you could call the edit function with a parameter. e.g edit(row_id)
EDIT
var id_counter
var $task = $("<tr class='taskList' id='"+ id_counter +"'>"
for the addition of the id in the code and
+"<td><button onclick='edit("+id_counter+")'>"+"edit"+"</button></td>"
for the button code
you could start with id_counter = 0; and then add plus one each time
I can't figure this out for the life of me. Jquery keeps closing the form that I create (instead of <tr><form> ... <td></td> ... </form></tr> it creates <tr><form></form>... I've looked at lots of questions regarding this and each suggestion is to use an intermediate string, which I am. Hopefully someone can pick up on something I'm missing :)
var my_table = $("#output_table").find("tbody");
// Loop over JSON data and create table rows
$.each(json.data, function(index, field) {
var html_string = "<tr><form action='addtoDB.php' method='POST'>" +
"<input type='hidden' name='instructor' value=" + field.instructor + ">" +
"<input type='hidden' name='section' value=" + field.section + ">" +
"<input type='hidden' name='course_id' value=" + field.course_id + ">" +
"<input type='hidden' name='course_name' value=" + field.course_name + ">" +
"<td class='row_head'>" + field.instructor + "</td>" +
"<td>" + field.section + "</td>" +
"<td>" + field.start_time + " - " + field.end_time + "</td>" +
"<td>" + field.weekdays + "</td>" +
"<td>" + field.total + "/" + field.capacity + "</td>";
if (field.open) {
html_string += "<td><input type='submit' value='open to enroll' class='disabled' disabled></td>";
} else {
html_string += "<td><input type='submit' value='Notify me' class='enabled'></td>";
}
html_string += "</form></tr>";
my_table.find('tr:last').after(html_string);
});
I've tried removing <form> and <tr> from the string entirely and adding it at the end with:
my_table.append("<tr><form>" + html_string + "</form></tr>"); but I get the same effect. So confused!
This is actualy not a jquery problem but a browser one. Browsers won't let you do that because the only elements allowed to be children of tr are th and td.
Source : w3c documentation