We Keep Coding

How to refresh an Input field after changing its value with JQuery?

I have an Input element in HTML (and a Javascript template) with empty Value. Throught AJAX and JQuery, I update the said value to a list of words split by comma. Each word should become green retangulars with an 'X' to remove it from the field. The same list of words works perfectly when I write it down in the code.
The problem is that when I put this very same string in the Value attrib. using JQuery, it just doesn't work properly. I just get plain text, and those fancy green retangulars only appear when I click inside the input field and hit TAB key. Then They become one item only and when I finally click to remove it, then they got split(!).
I have already tried using fadeOut() and fadeIn() and refresh method. Did not work.
Any ideas about this?
HTML:
<input id="tags_1" type="text" class="tags form-control" value="" />
AJAX/JQUERY:
var tags_x = tags_x.replace(/\,/g, ', ');
var tags_x = tags_x.split(',');
$('#tags_1').val(tags_x);
$('#tags_1').attr('value', tags_x);
$('#tags_1').fadeOut();
$('#tags_1').fadeIn();

Your id of the input is tags_1 but you are selecting it like #tags_1_tag. Why is that? I think maybe that could be the reason.
And by the way when you use var tags_x = tags_x.split(','); tags_x is an array now. If you want to put it in a value convert it to a string and then try to put it in the value attr. You can see an example below:
var new_x = tags_x.join('')
$('#tags_1_tag').val(new_x);

Array printing results from data

I'm having trouble thinking of a JS function for the following idea. I want to have an array with 5 names. I also want to have a input box with a submit button. When I enter a number (1-5) I want to have it print the name that is assigned with that number from the array. Any ideas?
I have the button/input box setup but I'm not sure how the code would work.

Are you looking for something like this? JSFiddle attached https://jsfiddle.net/kgLnc6nd/
HTML
<input id='i1'/><br>
<button onclick='javascript:show()'>Click</button><br>
<div id='d1'></div>
JAVASCRIPT
var names = ['michael','henry','james','rebecca','allison'];
function show() {
var x = i1.value;
d1.innerHTML = names[x];
}

jQuery: Identify particular element among for loop elements and manually trigger twitter bootstrap popover

I want to keep track of article bookmarks for a user. The one's that are already added and the one's that are newly added. A quick check is made through ajax call, to check if the bookmark already exist. I am adding the information to be shown through popover dynamically, either Bookmark Exist or Bookmark Added.
Here's the popover button :
<button class = "btn btn-primary" name = "bookmark" id = "bookmark_list" value = "{{post.slug}}" data-container="body" data-toggle="popover" data-placement="right"> Add Bookmark </button>
The problem that I am facing here is that, once I add the data-content to the popover and click it, the popover of other for loop elements also shows up.
success: function(data){
if (data.status){
$("#bookmark_list").attr("data-content", "Already Bookmarked");
$('[data-toggle="popover"]').click()
}
else{
$("#bookmark_list").attr("data-content", "Bookmark Added !");
$('[data-toggle="popover"]').click()
}
This results in multiple popovers getting clicked. I tried identifying the exact instance by using the unique value attribute:
var popover_value = $(this).attr("value");
Having got the popover's value, I tried to get the element using $('[value = popover_value]') and adding data-content dynamically. But, the identification of the exact instance using value isn't happening.
$('[value = popover_value]').attr("data-content", "Already in list");
$('[value = popover_value]').click()
How do I do this so that only the current instance Add Bookmark button is clicked? Thanks !
Edit 1 :
Here's the Django template : https://pastebin.com/c8hwksad
Here's the javascript code : https://pastebin.com/7YWUTpGc

How can I assign a submit button's id to a javascript variable

First post on Stack, thanks in advance.
I have a webpage that has 8 different forms, and on submit, I would like each one to display a different set of strings that I have stored in JavaScript arrays. The code to display the array works fine when used with only one form on the page, but I can't get it to work with all 8.
I have assigned each submit button an id, and am trying to assign that id to a variable called "chosen button" on submit. "chosen button" ultimately corresponds to the appropriate array, but only if the id is assigned to the variable. Here is html code:
<form id="ipsum-form" action="#" method="post">
<input type="submit" class="button" id="corporate" value="And So Forth.." />
And Javascript (my array variables and switch statement are obviously much longer):
var chosen_button = $("#ipsum-form submit").id;
var corporateIpsum = ["corporate jargon", "etc etc"];
switch (chosen_button){
case "corporate":
words = corporateIpsum;
break;
}
Is this the correct way to assign the submit button's ID to the variable? If not (or if this doesn't work for what I want), how can I make this work?
Cheers and I look forward to posting and learning more here in the future.

easy:
var chosen_button = $("#ipsum-form [type='submit']")[0].id;
or plain js:
document.forms[0].querySelectorAll('input[type="submit"]')[0].id;

Try var chosen_button = $('#ipsum-form .button').attr('id');. You can also use handlers to get the object (more useful in some situations) ex:
$('#ipsum-form input[type="submit"]').click(function () {
var chosen_button = $(this).attr('id');
// more code.
});
EDIT: Little bit more correct.

Getting and passing parent info to hidden form

In a WordPress plugin (called postRatings) when a user presses a nested image he adds a "like" to the page. I want to pass that info to a hidden form.
So when user clicks the img (that's what triggers the plugin functionality), I want to get the serial number that is in the parent span of that image, and pass it as a value to my hidden form input.
Thing is the serial number is displayed at the end part of the parent span id name. I wrote it in the HTML code below as “XXXX”.
I am trying to get that number (only) and pass it to the value of my hidden input. I started writing the JavaScript code but don't know how to continue.
HTML:
<span id="post-ratings-XXXX" class="post-ratings">
<img class="post-ratings-image" src="1_on.gif">
</span>
<form>
<input type="hidden" id="supportedCheck" name="supportedCheck" value="#"
maxlength="19"/>
</form>
JavaScript
$('.post-ratings-image').click(function(){
$('#supportedCheck').val ......?
});

You can use the following
$('.post-ratings-image').click(function(){
$('#supportedCheck').val($(this).parent('span')[0].id.split('-')[2]);
});
Fiddle Demo

You could use following snippet:
$('.post-ratings-image').click(function () {
$('#supportedCheck').val($(this).closest('span[id]')[0].id.split('-').pop());
});

Instead of adding the serial number to the id tag, consider to add it as a data tag. This is JQuery's way of working with data through HTML tags (see docs). You can set it this way:
<span data-serial-number="XXXX" class="post-ratings">
And access it this way:
$('.post-ratings-image').click(function(){
var span = $(this).parent();
var serial = span.data('serial-number');
span.find('input:hidden').val(serial);
});