Jquery Appended Button Not Displaying Correctly - javascript

I am working with Jquery/javascript/html. I am trying to display a button inside of tags in my table. I am appending the information into/onto a section on my html page. Code is as follows:
<html>
<body>
<p id="report_area"></p>
</body>
</html>
Javascript file below
$('#report_area').append('<table>');
$('#report_area').append('<tr>');
$('#report_area').append('<th>' + view + '</th><th>' + col_1 + '</th><th>' + col_2 + '</th><th>' + col_3 + '</th>');
$('#report_area').append('</tr>');
var btn=$('<button/>');
btn.text('View');
btn.val=item.SURVEY_JOB_ID;
btn.id=item.SURVEY_JOB_ID;
// recently added code - start
btn.click(function()
{
window.localStorage.setItem("MyFirstItem", 10);
window.location = 'GoToThisOtherPage.htm'
}
// recently added code - end
$('#report_area').append('<tr><td>'+ btn +'</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');
THis seems to work correctly however, the button is not showing up correctly. It shows up as an object. All the other data displays correctlyMy table row is displayed as :
[object Object] 12 New Job Title 0
[object Object} 30 Title Help Me 1
I'm not sure why it is displaying as [object Object]. When I do something as simple as:
$('#report_area').append(btn);
the button shows up on the page correctly. Any help on this would be greatly appreciated. Thanks in advance.

To understand why this does not work, you have to look at the documentation for append.
Type: htmlString or Element or Array or jQuery
append is able to except any of those types, and handle each of them differently, so when you pass it an element (actually jQuery collection), it is able to intelligently convert it into the desired html.
However, in your case, you are passing it a string, so it will naively treat the string as html. The reason that this produces [object Object], is because it is relying on native JavaScript to convert the element into a string. You'll produce the same output with console.log(btn).
// append recieves a jQuery collection, calls appropriate methods to obtain html
$('#report_area').append(btn);
// append receives a string, blindly assumes that it is already the desired html
$('#report_area').append(btn + '');
Solution 1 - Append separately
From your comments on other answers, it doesn't seem like this solution works. I think this is because append will automatically add the close tags for the tr and td when appending, causing the button to be added afterwards. You could check if this was the case by looking at the html produced in the developer tools of your browser.
$('#report_area').append('<tr><td>', [btn, '</tr></td>'])
Solution 2 - Convert to string properly
$('#report_area').append('<tr><td>'+ btn[0].outerHTML +'</td><td>')
Solution 3 - Constructing everything as jQuery collections
I think the main problem you have been having is to do with mixing elements and strings. I've written a working jsfiddle solution that constructs everything as jQuery collections.
var table = $('<table>');
var btnRow = $('<tr>');
var btnCell = $('<td>');
var btn=$('<button>');
btn.text('View');
btn.val('val');
btn.attr('id', 'id');
btn.on('click', function()
{
window.alert('Click');
});
btnCell.append(btn);
btnRow.append(btnCell);
table.append(btnRow);
btnRow.append('<td>1</td><td>2</td><td>3</td>');
$('#report_area').append(table);

JavaScript is converting btn to a string because you're concatenating several strings to it.
It should work if you do this.
$('#report_area').append('<tr><td>');
$('#report_area').append(btn);
$('#report_area').append('</td><td>' + item.JOB_NUMBER +
'</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr>');
$('#report_area').append('</table>');

You're attempting to set native DOM properties on a jQuery object. Remember, a jQuery object is a superset of a native DOM object. Alter your code to use the .val() and .attr() jQuery methods like so:
var btn=$('<button/>');
btn.text('View');
btn.val(item.SURVEY_JOB_ID);
btn.attr('id', item.SURVEY_JOB_ID);
Alternately, you can chain these methods together for convenience:
var btn= $('<button/>')
.text('View')
.attr('id', item.SURVEY_JOB_ID)
.val(item.SURVEY_JOB_ID);
Finally, alter your use of the .append() method to append the content like so:
$('#report_area').append(
'<tr><td>',
[
btn,
'</td><td>' + item.JOB_NUMBER + '</td><td>' + item.TITLE + '</td><td>' + item.MODIFICATION_NUMBER + '</td></tr></table>'
]);

Related

How do I add a row manually in the Jquery array

I have this Jquery code:
var $affectedTRs = $('#location-usergroup-table tr[data-department-id="' + departmentID + '"')
So this contains all trs and I can run functions like find etc.
Now I want to push an item in this $affectedTRs
But this is not working:
$affectedTR.concat($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));
How do I push something manually in this selected object so I can have all Jquery functions like find etc available on it.
You can use jQuery's add() method: https://api.jquery.com/add/
$newSelection = $affectedTR.add($('#location-usergroup-table tr[data-domain-id="' + domainID + '"'));
Perhaps you want this:
$("#location-usergroup-table").append("<tr data-domain-id=\"" + domainID + "\""></tr>");
To add a new element to existing container, use .append(). More details here.
Your $affectedTR has all the rows i.e DOM elements. If you wish to create new row in the table, try jquery append

How to incremental a variable and while in a string Javascript

Basically, I have a .each loop that iterates over some data and for each item in the data set it appends a span class to the DOM.
$('.selected_cont').append('<span class="' + classes + '"></span>');
Classes is just the variable ive creative above that saves the name of the data I iterate over.
So after iterating over the data I could have 5, 10 span tags on the DOM all with different class names.
My issue is, I don't add the span tags in the order they're in the data so the latest one ive iterated over will be the first.
So I've created a variable
var incrementalEle = 1;
How can I add this variable into my string $('.selected_cont').append('<span class="' + classes + '"></span>'); so each class has something similar to theClassName1, theClassName2 and so on.
This errors when I try it $('.selected_cont').append('<span class="' + classes + + var incrementalEle++ + '"></span>');
As you are using jQuery to create element, use .addClass() method at set the classes.
$('.selected_emoji').append($('<span />').addClass(classes + incrementalEle++ ));
OR, when using string concatenation use operator's properly
$('.selected_emoji').append('<span class="' + classes + incrementalEle++ + '"></span>')

Jquery & JSON: Replace section of JSON array

I've been reading a ton on this and can't seem to find a solution that works for me. I am building a drag and drop menu system and saving the structure to the db as JSON.
I have a hidden field as part of a form that submits to the db. This hidden field has the full JSON string in it.
When I update a particular node/menu item, I want to search the value of the hidden text field, find the 'section' of JSON I want to update and replace it with the new values.
What is the best solution for this? grep? replaceWith?
Example before and after JSON
// This is the full json string
[{"title":"Cool link","link":"link","cssclass":"","cssid":"","id":"1399209929525"},{"title":"New link","link":"new-link.html","cssclass":"","cssid":"","id":"1399209790202"},{"title":"Another link","link":"cool","cssclass":"","cssid":"","id":"1399209834496"}]
// This is the updated section
[{"title":"Another link changed","link":"cool","cssclass":"","cssid":"","id":"1399209834496"}]
So I have the updated section with a unique ID to search against.
A simple solution would be something like this, but it doesn't work like that.
var currentsection = /'{"title":"' + edittitle + '","link":"' + editurl + '","cssclass":"' + editcssclass + '","cssid":"' + editcssid + '","id":"' + editid + '"}'/;
var newsection = /'{"title":"' + updatedtitle + '","link":"' + updatedlink + '","cssclass":"' + updatedcssclass + '","cssid":"' + updatedcssid + '","id":"' + updatedid + '"}'/;
$("#menu_items").val().find(currentsection).replaceWith(newsection);
What do you think the best approach is? Many thanks for taking the time out to help. I really appreciate it.
I think you should create your JSON object, and work with it. In this way it would be easy to change values and also save it as you want ;)
For example :
var json = YOUR JSON HERE;
var obj = JSON.parse(json);
// now you can update values as you want
// for example with example title
obj[0].title = "updatetitle";
And then, before sending your JSON, you may want to convert it in plain text
var json = JSON.stringify(obj);

changing links doesnt work with jquery

I have got this link:
Visit imLive.com
I want to use this code to add/change different url parameters:
$("a.sitelink_external.imlive").each(function(){
$params=getUrlVars(document.URL);
var promocode_addition='';
if('INFO'==$params['ref']){
promocode_addition='LCI';
}
$(this).attr("href", 'http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&"FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS');
});
The problem is that that jquery code doesnt work..I tried to move it to document ready..but it doesnt work there too..
The thing that jumps out at me is that you're mixing your double and single quotes on this line:
$(this).attr("href", 'http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS');
Try changing them all to double quotes, and remove the extra " from after the ampersand in "&"FRefID=" - like this:
$(this).attr("href", "http://im.com/wmaster.ashx?WID=124904080515&cbname=limdeaive&LinkID=701&queryid=138&promocode=LCDIMLRV" + i + promocode_addition+"&FRefID=" + FRefID + "&FRefP=" + FRefP + "&FRefQS=" + FRefQS);
The way you had it was a single string containing stuff that looked like code. The way I've changed it is several strings and variables being concatenated together... (Note the difference with StackOverflow's syntax highlighting.)
Note also that the following code:
$params=getUrlVars(document.URL);
var promocode_addition='';
if('INFO'==$params['ref']){
promocode_addition='LCI';
}
...can be moved to before the .each() loop, since it operates only on the document and thus will produce the same results on every iteration.
(Of course there could be other problems since you reference several variables that aren't shown.)

Problem disabling/enabling multiple form elements using javascript

I'm trying to disable/enable multiple form elements of an HTML page using javascript. I have a form with many fields, each row of the form has a checkbox to enable/disable the elements on the row.
The problem is, only the first two form elements get disabled (no matter the order). After that, the remaining javascript code in the function just won't be executed anymore.
Here's the code (it's part of a function called by the onChange attribute of every checkbox):
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_quantity")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_description")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_price")[0].disabled = !theBox.checked;
document.getElementsByName(prefix + "fase" + phaseNumber + "_" + objectNumber + "_language")[0].disabled = !theBox.checked;
Each form element has a different (and unique) name, and the single lines of code work just fine... until you put them together.
For example: in the above code, "quantity" and "description" fields will get disabled/enabled, but "price" and "language" won't.
If i change the order of the lines, the first two get always executed, no matter what.
Then every line of code doesn't work; it's like it's commented. I even put some alerts to try debugging, but they just get ignored (no dialog shows up at all) if I insert them after the above code. The elements names are correct.
I'm sure I've made a mistake somewhere, but since the single lines of code are working, I don't know where to look... it's driving me nuts!
Please, I could really use some help.
I just made it work and, as I thought, it was a very bad mistake.
The problem was, not every form row in the HTML has all of those 4 fields. So, basically, I was trying to access a property of a null object.
I solved it by putting:
if( document.getElementById(id) != null )
before trying to manipulate the element.
Sometimes when you're in a hurry, you end up neglecting some very basic stuff...
Thank you for your time.

Categories

Resources