I'm making a small website for school, it's an image based gallery where you can vote and comment.
At the moment they're all on one page and all have a rating form.
So at the moment the default rating is working, but I cant update it (I frankly don't know how)
Here's how it looks now
http://i.imgur.com/M4ZOtUG.png
The user is supposed to enter a rating, and then it should show the new value of the rating.
I'm pretty close since when I rate the first image 3; I get: (in my console)
"c1, 3"
And when I rate the 4th image 5, I get:
"c4, 5"
etc.
Now how do I update the default rating?
(default ratings are set in my collection)
Example code of image in collection
{image: "images/gifs/water.gif", rating: 5, comments: "Love the detail in this one!", title:"Water", category:"Nature"}
Here's how it's in my view:
gifs_html += '<td>' + "<span class=\"stars\">" + gifs[gif].get("rating") + ".0</span>" + "\n" + "<form data-id=\"" + gifs[gif].cid + "\"><input type=\"text\" name=\"amount\" size=\"5\" value=\"\"/>" + "\n" + "<input type=\"submit\" value=\"Rate\">" + "<input type =\"hidden\" name=\"cid\" value=\"" + gifs[gif].cid + "\"> </form>" + '</td>';
Then I'm giving this jquery function (to update the star image)
$('span.stars').stars();
and this event
events:{
'submit form':function(ev){
var $form = $(ev.currentTarget);
var id = $form.data("id");
var rating = $("input[name=amount]", $form).val();
console.log(id + ", " + rating);
return false;
}
Help would be greatly appreciated. Thanks.
If the view where you are setting that 'submit form' event it's a Collection View you have to do something like this:
this.collection.get(id).set("rating", rating);
If it would be a Model View:
this.model.set("rating", rating);
Cheers.
Related
I am using simple JavaScript code to submit a form and storing the form data into an array in the form of objects and later showing the data on click of a button. I also have provided two buttons -'EDIT' and 'DELETE' for each elements while showing the data in tabular form under 'Action' header.
I can pass the corresponding ids to those methods to perform edit and delete operation on specific entries/object and based on that I want to keep data in final array and want to show them after the operation.
However I have done the 'delete' functionality but I could not get any lead to implement the 'EDIT' button functionality.
I want to know- is it possible to prepopulate the form with data available and make the changes and again save it back when I click on edit button?
Note: I am not using any database connection for this. Here in the below code I am storing the objects in dataArray
sample form object- I am storing dataArray after submit:
0: CreateUser
description: "I am Web developer"
email: "test#gmail.com"
english: "english"
gender: "Male"
hindi: "hindi"
id: "12312"
name: "test"
othersLang: "others"
role: "dev"
Please have a look at it ---
function getEmployeeDetails() {
let totalLength = userArray.length;
if (totalLength === 0) {
alert("No user Data Found");
return;
}
let tbody = document.getElementById("tbody");
tbody.innerHTML = "";
for (let i = 0; i < userArray.length; i++) {
let tr = `<tr id=` + userArray[i].id + `>`;
tr +=
"<td class='table-data'/td>" +
userArray[i].id +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].name +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].email +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].gender +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].role +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].english +
userArray[i].hindi +
userArray[i].othersLang +
"</td>" +
"<td class='table-data'/td>" +
userArray[i].description +
"</td>" +
`<td class="table-data">
<button onclick="deleteUser(` +
userArray[i].id +
`)">Delete</button> || <button onclick="editUser( ` +
userArray[i].id +
`)">Edit</button>
</td>`;
tbody.innerHTML += tr;
}
}
function deleteUser(id) {
console.log('ID',id);
userArray = userArray.filter(x => x.id === id);
console.log("aftre", userArray);
let elem = document.getElementById(id);
elem.remove();
return userArray;
}
function editUser(id) {
console.log("edit", id);//prints corresponding id
}
I am not sure if this can be achieved or not.
Any suggestion on this is highly appreciated.
I'm not sure I understand what you're trying to achieve, but if you're trying to prepopulate your page without the use of any database, you could use a file with some json data in it.
see JavaScript: Create and save file
Or you could pretty much hardcode it into your page on an on-load event.
On a side note, if you know you're not going to work with Internet Explorer you could use the find() function instead of the filter(), as find() will stop its iteration on the array once it finds the FIRST occurrence of whatever you passed in its function, and filter() will just keep going.
Seeing as you're trying to get data using a unique ID, it might be better to use it instead :)
see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find
I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`
I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`
You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';
It's a list of chatrooms. Currently, if you join a room by clicking enter, it'll open the chatroom by appending a div of the chatroom. So if you click multiple rooms, it'll open multiple rooms.
I would like to make sure that only one room can be open at any given time. So, if a room is open and the user clicks to open another room, any other open room should close.
This is code that shows the addition of a chatroom to a div with an ID of chats:
if (data.join) {
console.log("Joining room " + data.join);
var roomdiv = $(
"<div class='room' id='room-" + data.join + "'>" +
"<h2>" + data.title + "</h2>" +
"<div class='messages'></div>" +
"<input><button>Send</button>" +
"</div>"
);
$("#chats").append(roomdiv);
I'd like to add a bit of code to make sure that all open rooms close before opening another one. Here is the same code with the addition that I plan on making:
if (data.join) {
console.log("Joining room " + data.join);
var roomdiv = $(
"<div class='room' id='room-" + data.join + "'>" +
"<h2>" + data.title + "</h2>" +
"<div class='messages'></div>" +
"<input><button>Send</button>" +
"</div>"
);
$("#room-" + * ).remove(roomdiv);
$("#chats").append(roomdiv);
This line $("#room-" + *).remove(roomdiv); doesn't work. I'd like to implement something here that says any attributes with ID room-(*/anything) should be removed.
What's the proper way to go about this?
All existing rooms have the class room. You can remove all of them at once using $('.room').remove() before creating and appending your new room.
You can use the ^ JQuery selector, it will select everything starting with ... :
$("[id^='room-']").remove(roomdiv);
I have a document that uses the jscolor.com library, for the user to be able to select and store a color. I'm also using a JQuery function to add rows to the screen, so the user can create and define a number of colors. The problem is, when the new row is added, the Javascript isn't re-initialized for the added elements.
Here is the code in question:
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<div id='addr" + i + "'>" +
"<div class='col-xs-4'>" +
"<input type='text' name='config_color[" + i + "][css]' id='input-color[" + i + "][css]' class='form-control' />" +
"</div>" +
"<div class='col-xs-2'>" +
"<input type='text' name='config_color[" + i + "][value]' id='input-color[" + i + "][value]' class='form-control jscolor' />" +
"</div>" +
"<div class='col-xs-2'>" +
"<input type='text' name='config_color[" + i + "][default]' id='input-color[" + i + "][default]' class='form-control' />" +
"</div>" +
"<div class='col-xs-4'>" +
"<input type='text' name='config_color[" + i + "][notes]' id='input-color[" + i + "][notes]' class='form-control' />" +
"</div>" +
"</div>");
$('#tab_logic').append('<div id="addr'+(i+1)+'"></div>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
}).trigger('change');
</script>
I've made an simplified example of what I'm talking about on JSFiddle - you can see in the first row, if you click in the color cell, it gives you a pop up color palette.
If you add additional rows, the popup picker doesn't work.
However, all of the data stores in the database properly, so i have an instance where some elements added by Javascript work properly and others don't?
(Also full disclosure, I asked on Reddit first - this is therefore a cross-post.
In their examples, jscolor has one called "Instantiating new Color Pickers" which shows you how to do it.
You're adding the new row as a string, which I wouldn't recommend, because if you created each input separately using jQuery it would be easier to call jscolor() on only one element, but this works too.
Just add the following to your click handler:
// Get all the inputs first
var allInputs = $('.jscolor');
// From there, get the newest one
var newestInput = allInputs[allInputs.length - 1];
// And call jscolor() on it!
new jscolor(newestInput);
Here's an updated fiddle
Generally Abe Fehr answer helped me too, but i had slightly other problem. My elements already had default values from database so
new jscolor(newestInput);
initialized them but with default FFFFF
So in my case twig (html) looks like this:
<button class="jscolor {value:'{{ category.color }}'} btn btn-sm disabled color-picker" data-color="{{ category.color }}"></button>
And then I reinitialize all the colors like this:
let all_pickers = $('.color-picker');
if ($(all_pickers).length !== 0) {
$(all_pickers).each((index, element) => {
let color = $(element).attr('data-color');
new jscolor(element, {'value': color});
});
}
I have a system where you can create a house and some people. When you have created the house, and you then click on it, some information will appear. You'll also get the opportunity to delete the house.
However, the system will now forget the previous click if you click on a new house. Therefor both of the houses that I've clicked on, will be removed.
You can test it in the JSFIDDLE
It all happend inside my click function:
var objHouse = $('#' + oHouse.id)
objHouse.click(function(){
$('#WindowDisplayCarInfo').hide();
$('#WindowDisplayPersonInfo').hide();
$("#WindowDisplayHouseInfo").show();
$('#ShowId').text("ID: " + this.id);
$('#ShowStreetName').text("Street Name: " + oHouse.StreetName);
$('#ShowNumber').text("Number: " + oHouse.Number);
$('#ShowInhabitants').empty();
$('#ShowMaxInhabitants').text("Max inhabitants: " + oHouse.MaxPeople);
for(var i = 0; i < oHouse.aPeople.length; i++)
{
$('#ShowInhabitants').append("<br />"
+"<br />" + "ID: " + oHouse.aPeople[i].id
+"<br />" + "Name: " + oHouse.aPeople[i].Name
+"<br />" + "Last Name: " + oHouse.aPeople[i].Lastname
+"<br />" + "Age: " + oHouse.aPeople[i].Age
+"<br />" + "Gender: " + oHouse.aPeople[i].sGender
);
}
$('.DeleteHouse').click(function()
{
$(objHouse).children().each(function(){
$(this).appendTo($('#container')).css({"top":"" , "left":"", "display":"block"});
});
$(objHouse).remove();
$("#WindowDisplayHouseInfo").hide();
});
});
}
(It start at line 130 in the JSFIDDLE.)
Hope that you can teach me a trick or two. :-)
This probably isnt good practice but after like 30 min its all I could come up with. It just pulls the ID from the box in the upper right and deletes only the selected box. The "bad practice" is probably the substr part. To make it slightly better you may want to utilize indexOf() to find the start of the ID not just the integer 4 incase the structure of that ID box ever changes.
$('.DeleteHouse').click(function()
{
$(objHouse).children().each(function(){
$(this).appendTo($('#container')).css({"top":"" , "left":"", "display":"block"});
});
var currentID = $("#ShowId").html().substr(4);
console.log(currentID);
$("#"+currentID).remove();
$("#WindowDisplayHouseInfo").hide();
});
http://jsfiddle.net/t8TKc/3/