how to add html in dynamically created div - javascript

I create a div from a DB with the below code
<div id="' + row.flatno + '"></div>
How can I select this div in order to add html code?? I use this
$('input').keyup(function(){
$(this).html("SomeText: <strong>" + diff + "</strong>");
});
but nothing happens

As #xzoert mentioned with this you refer to input.
$('input').keyup(function(){
$('#'+row.flatno).html("SomeText: <strong>" + diff + "</strong>");
});
The part
$('#'+row.flatno)should query id that you are looking for.

Related

How to add a button inside message body in Javascript?

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>';

append jquery does not work

i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);

how to print jquery value in html

This is my code in jQuery, it's working fine when its alert popup, but i want to print this in html body i tried below but not working
// Do What You Want With Result .......... :)
$("#printermodel").change(function() {
//'you select
Model = ' + $('#manufacturer').val() + 'type=' + $('#printertype').val() + 'And Model=' + $('#printermodel').val()
alert('you select Model = ' + $('#manufacturer option:selected').text() + ' ,type= ' + $('#printertype option:selected').text() + ' And Model = ' + $('#printermodel option:selected').text());
});
});
<div id="manufacturer"></div>
You should use text to insert text inside div:
$('#manufacturer').text($('#manufacturer option:selected').text());
Docs: http://api.jquery.com/text/
If you want to add HTML inside div, you can use html instead of text
$('#manufacturer').html(('you select Model = '+
$('#manufacturer option:selected').text()+' ,type= '+
$('#printertype option:selected').text()+' And Model = '+
$('#printermodel option:selected').text());
If you want to take more sophisticated approach I would recommend you to use templates.
One of many options would be to use official jquery-tmpl plugin.
You need to include jquery and http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js plugin to your site and then you can do for example:
Html:
<div id="target"></div>
Javascript:
$.tmpl( "<li>${Name}</li>", { "Name" : "John Doe" }).appendTo( "#target" );
You can adjust it to your needs and for eaxmple read the template (first parameter of tmpl) from some file
See this jsfiddle

How to combine two fields to be displayed as options in a dropdown menu using jquery?

I have a dropdown menu "Names". Right now, Im populating it with the firstName of employees. The first names of the employees is the data which is added at run time. Now I want to display the options in the dropdown as "(firstName) (lastName)" Is there a way to do this using jquery. Im able to retrive both the firstName and lastName from the database.
Current Jquery Code for the dropdown:
$('.employeeName').prepend("<option value=''></option>").val('');
for(i=0;i<data.length;i++){
if(data[i].firstName)
$('.employeeName').append('<option>' + data[i].firstName + '</option>');
}
If you are looking for more efficiency and best practice, try this,
var html = "<option value=''></option>";
for(i=0;i<data.length;i++){
if(data[i].firstName) {
html += '<option>' + data[i].firstName + ' ' + data[i].lastName + '</option>';
}
}
$('.employeeName').append(html);
As mentioned in the comments, it's a matter of simply concatenating the strings to which you already have access.
$('.employeeName').prepend("<option value=''></option>").val('');
for(i=0;i<data.length;i++){
if(data[i].firstName)
$('.employeeName').append('<option>' +
data[i].firstName + ' ' +
data[i].lastName +
'</option>');
}

How to check two parameters in li:contains method

I am using this method to change CSS
$("#AllProducts li:contains('" + Product + "')").css("background", "white");
This works fine, but now I need to check two parameters when I change CSS like below
$("#AllProducts li:contains('" + Product + "')&&('" + iCategory + "') ").css("background", "white");
However, this doesn't work. I can't check if contains product and then if iCategory, I need them to be in the same object.
I think you are looking for something like this. Short answer, try this:
$("#AllProducts li:contains('" + Product + "'):contains('" + iCategory + "') ")
What about:
$("#AllProducts li:contains('" + Product + "'):contains('" + iCategory + "')").css("background", "white");

Categories