Using the following example, a table that pulls all of the items in Parse for its particular column (I.e. if there is 20 subjects in parse, than 20 subjects would be displayed).
http://jsfiddle.net/richf/sKLxE/
Below is the code for it:
Javascript:
//message
var Message = Parse.Object.extend("Message");
var query = new Parse.Query(Message);
query.descending("createdAt");
query.find({
success: function(results) {
//alert("Successfully retrieved " );
// Do something with the returned Parse.Object values
for (var i = 0; i < results.length; i++) {
var object = results[i];
(function($) {
$('#messages-table').append('<tr><td>' + object.get('currentDate') + '</td><td>' + object.get('Subject') + '</td><td>' + object.get('Message') + '</td></tr>');
})(jQuery);
//alert(object.id + ' - ' + object.get('playerName'));
}
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
HTML
<table id="messages-table">
<tr>
<th>
<h1>Date</h1></th>
<th>
<h1>Subject</h1></th>
<th><h1>Message</h1></th>
</tr>
</table>
What I am trying to achieve is the following is making each line clickable, where when someone clicks on a line then the message from the “message” column in parse is retrieved, and displayed right below the line click, and once that line is click again, that message is hidden.
This is a massive dilemma I am having, I have spent quite some time trying to resolve it.
If you need any clarification, let me know.
Add a class to the rows... and add your additional data as a hidden table row.
$('#results-table').append('<tr class="results-row"><td>' + object.get('playerName') + '</td><td>' + object.get('score') + '</td></tr><tr class="xtra"><td colspan="2">INSERT MESSAGE HERE</td></tr>');
(Note extra table row added above)
CSS: .xtra {display: none;}
Then you can easily toggle that extra row:
$(document).on('click' , '.results-row', function () {
$(this).next('.xtra').toggle();
});
DEMO HERE
First add some indicator for the element which on click will have some action.
For example:
$('#results-table').append('<tr><td class="player">'
Then add an event listener as below:
$(document).on('click' , 'td.player', function () {
alert("Clicked on" + $(this).hmtl());
});
Related
to summarize my problem ... I have made a calendar with contains the from - to date range. Now the selected dates are displayed in a div with a delete button for each. But as the id of the button is the same for all the dates ....it deletes the entire date range. I have attached the screenshot as well.
I also tried taking a loop and giving each date a div so that the Del function will work properly. but I wasn't successful. I will mention code for the same
$(document).ready(function () {
var i = 0;
$.each(between, function (key, value) {
var rest = $('#target').append($('<div id="r' + i +value+ '" class="ansbox">
</div>'));
console.log(between);
var template = '<div id="ChildTarget_' + i + '"><span>key + ":" + "' + value + '"
</span><button id="tr' + i + '" class="target">X</button></div><br></div>';
i++;
$('#target').on('click', function () {
console.log("hola");
$('#target').remove();
You should add click event for the button itself.
var template = `
<div id="ChildTarget_' + i + '">
<span>key + ":" + "' + value + '"</span>
<button id="tr' + i + '" class="deleteButton">X</button>
</div>`;
$(".deleteButton').on('click', function() {
// do deletion here
});
First of all ,
The 'X' button should have different id
$.each(between, function (key, value){
$('#results').append(key+":"+value+'<br>');
$('#results').html(between.join('<button id="result"+key+"" > X </button><br>')
here you can see i am adding key to the Button Id making it unique. Use that id to remove the value, that you dont want. Hope this helps
Hello and thank you for your time.
I have one doubt because I am trying to associate the ID I am reading from the Firebase database to the ID which identifies the button. It is important because of this button leads us to the event's modify page so then the event's ID is the one we use to load its data.
However those buttons' IDs look like they are one position forward let's see:
As you can see button 0 has ID Ejemplo nuevo which is the following row's event and so on.
Events:
Code:
Function's code:
function insertPlans() {
setReferences();
$("#title").html("Planes");
resetAllData();
$("#table thead").html("<tr>" +
"<td>ID</td> <td>Capacidad</td> <td>Fecha</td> <td>Descripción</td> <td>Ubicación</td> " +
"<td>Título</td> <td>Organizador</td> <td>Precio</td> <td>Prioridad</td><td>Asistentes</td>" +
"<td>Visibilidad</td></tr>");
dbRef.child('plans').once('value', function (snap) {
snap.forEach(function (planID) {
dbRef.child('plans/' + planID.key.toString()).once('value', function (snap) {
var row = "<tr><td><button id='new-button' class='btn btn-primary' onclick='saveEventName(this.id)'>Modificar evento</button>" + planID.key.toString() + "</td>";
$("#new-button").attr('id', planID.key.toString());
snap.forEach(function (fields) {
row += "<td>" + fields.val() + "</td>";
});
$("#table").find("tbody").append(row + "</tr>");
});
$("#table").find("tbody").append("</tr>");
});
});
}
Also if I do a console log as:
It prints the correct IDs:
Could you help me please?
$(‘#new-button’) is always referencing the previous row because we haven’t attached the row to the document yet.
You can first insert row then you can use the selector to change its id
Thank you for your help digitil. As you said I was editing the previous row because of the current one was not been added to the document.
The solution:
function insertPlans() {
setReferences();
$("#title").html("Planes");
resetAllData();
$("#table thead").html("<tr>" +
"<td>ID</td> <td>Capacidad</td> <td>Fecha</td> <td>Descripción</td> <td>Ubicación</td> " +
"<td>Título</td> <td>Organizador</td> <td>Precio</td> <td>Prioridad</td><td>Asistentes</td>" +
"<td>Visibilidad</td></tr>");
dbRef.child('plans').once('value', function (snap) {
snap.forEach(function (planID) {
dbRef.child('plans/' + planID.key.toString()).once('value', function (snap) {
var row = "<tr><td><button id='new-button' class='btn btn-primary' onclick='saveEventName(this.id)'>Modificar evento</button>" + planID.key.toString() + "</td>";
snap.forEach(function (fields) {
row += "<td>" + fields.val() + "</td>";
});
$("#table").find("tbody").append(row + "</tr>");
$("#new-button").attr('id', planID.key.toString());
});
$("#table").find("tbody").append("</tr>");
});
});
}
I have created one html which contains search box. After searching, I'm getting the data in list. But when I click on that I'm getting the value of all list item by using this
var text = $(this).text(); method
In my app, if I click on one item only it should give me only that value of list item not other. I'm making a mistake somewhere, but I don't know where.
Here is my code:
HTML
<ul data-role="listview" class="ui-li-icon">
<li id="list"></li>
</ul>
And here is my JavaScript code:
function successCallback(responseObj)
{
// alert(JSON.stringify(responseObj));
form.reset();
dataj=JSON.stringify(responseObj);
len=dataj.length;
for(i=0;i<len;i++)
{
var output = "<ul>" + responseObj.merchants[i].imageFileName+ " " + "<font size=3 color=green>" + responseObj.merchants[i].merchantName + "</font>" +"</ul>";
$('#list').append(output);
}
$('#list').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
}
So when I'm searching for some a item. I'm getting list of:
ab
abc
But when I clicked on it. I get value of both ab and abc. I just want only one value where I have clicked.
//replace your click event by below code
$('.ui-li-icon li').click(function() {
var index = $(this).index();
var text = $(this).text();
alert('Index is: ' + index + ' and text is ' + text);
});
$('#list').append(output);
I believer list is the id you are giving to list items i.e.
Now, this will confuse the browser because id should be UNIQUE and here you are giving this id to all the list items.
If you fix this, your problem should be resolved!
Or you could simply attach click event using this
$('.ui-li-icon li').click //Your click event handler
It's very difficult to understand what you are asking. From what I can tell you're looking for something like this:
$('#list li').on('click', function(){
alert("index: "+$(this).index() + " value: "+ $(this).text());
});
Here's a fiddle http://jsfiddle.net/Jw8qz/
I want to delete the last append when i click the back button. but when Im choosing appending again,the last append still there.
this is my codes on appending. its working:
$(req.responseText).find('ItemName').each(function () {
ItemNameArr[ItName] = $(this).text();
ItName++;
})
$(req.responseText).find('ItemQty').each(function () {
ItemQtyArr[ItQty] = $(this).text();
ItQty++;
})
$(req.responseText).find('ItemUnit').each(function () {
ItemUnitArr[ItUn] = $(this).text();
ItUn++;
})
for (var a = 0; a < ItemNameArr.length; a++) {
//$contentDt = $('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>');
$('#Ingredients').append('<p><h6> ' + ItemQtyArr[a] + " " + ItemUnitArr[a] + " " + ItemNameArr[a] + '</h6></p>')
$('#Ingredients').fieldcontain('refresh')
}
My codes in back button when its click:
$("#btnBack").on('click',function(){
$('#Ingredients').empty()
$('#Ingredients').fieldcontain('refresh')
});
My codes in html when it was append
<div data-role="fieldcontain" id="Ingredients"> <!--Ingridients-->
</div>
});
You can do it using below code.
$('#Ingredients p:last').remove();
Use this Code
$('#Ingredients p:last').remove();
Explanation
# referees for the id selector.
$('#Ingredients p) finds the p tag in the element with id Ingredients.
$('#Ingredients p:last') selects last p tag in the element with id Ingredients.
.remove() function removes it from the page.
Problem is in your back button code (click event)
it will be -
$("html").on('click','#btnBack',function(){
// your code
// for remove last p element within #Ingredients
$('#Ingredients p:last').remove();
});
I'm working my way through a JQuery Solution and for the most part it works but I"m stumped on seemingly a small detail I know I'm overlooking. Heck, maybe my implementation/approach needs to be reconsidered.
Here's the flow of what works.
1. Click an anchor that adds to a table.
2. Add CSS Class.
3. Disable (Unbind) click on after preappend().
4. From the table of dynamically added record remove table based on ID.
5. delete class that was added in step 2.
6. Bind 'click'
However, although I can bind the click and alert on it. The expected functionality does not allow me to step through the above process again.
The code in question:
HTML SAMPLE:
link that starts the process:
table that holds new records after click of link
<table id="carrier-table"><tbody></tbody></table>
JQUERY and Custom Javascript Function
<script type="text/javascript" id="removeCarrier">
function removeCarrierFromList(obj) {
var i = obj.parentNode.parentNode.rowIndex;
document.getElementById('carrier-table').deleteRow(i);
$('a#' + obj.id).removeClass('delete-carrier-company');
//alert(obj.id); //.hasClass('add-carrier-company').tostring() ); //
$('a#' + obj.id).bind('click', function() {
//alert('User clicked on ' + obj.id);
});
}
</script>
<script type="text/javascript" id="carrierListJS">
$(function() {
// Link
// This adds a carrier to a list
$('.add-carrier-company').click(
function() {
var target = $(this).attr("id");
alert(target);
$("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" +
"<td><a href='#' id='" + target + "' class='delete' onclick='removeCarrierFromList(this)'> </a></td>" +
"<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" +
"</tr>");
return false;
});
$('.add-carrier-company').click(
function() { $(this).addClass('delete-carrier-company').unbind('click'); }
);
});
</script>
There were a few issues I noticed with the code. For one thing, as #RussellUresti mentioned, you create two tags with the same ID. For another thing, if you're using ID's in a selector in jQuery, don't include the tag name, just use the id (ie. use $('#id') not $('a#id')) it will be faster (it won't break your code though).
I have created a jsfiddle to answer your question (though I rewrote most of it). :) I think it's what you're looking for.
Here's the code:
Test HTML
aa
bb
cc
10002
10003
<table id="carrier-table" style="border:1px solid #000"><tbody></tbody></table>
JavaScript
function addCarrier() {
var target = $(this).attr("id");
$("#carrier-table").prepend("<tr id='carrierRow_" + target + "'>" + "<td><a href='#' id='a" + target + "' class='delete'> </a></td>" + "<td class='carrier-list-text'>" + target + " " + $("#name_" + target).val() + "</td>" + "</tr>");
$('#a' + target).click(removeCarrierFromList);
$(this).addClass('delete-carrier-company').unbind('click');
return false;
}
function removeCarrierFromList() {
var $this = $(this);
var id = $this.attr('id').replace("a","");
$this.closest('tr').remove();
$('#' + id).removeClass('delete-carrier-company').click(addCarrier);
}
$(function() {
// Link
// This adds a carrier to a list
$('.add-carrier-company').click(addCarrier);
});