append jquery does not work - javascript

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

Related

JQuery/Javascript unable to display style and image correctly in output

I have the following output code, which is taking information from a JSON variable and presenting in a map:
marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4>" + place.description + '<br/>' + place.belongs_to + '<br/>' + '<br/>' + place.categories
self.markers[place.id] = marker
The output however is not displaying the image, but instead the link to the image.
Like so:
https://imagelocationishere.jpg
I have tried the following, which will show an image icon which makes me think that I am close, but I am still unable to display the image.
'<img src=' + place.image + '/>'
How do I adjust so I can display the image, or even just display the output better?
Thank you.
Forgot to add the double quotes.
Here is the solution:
'<img src= " ' + place.image + ' " />'

Problems posting data forms created by javascript

I now am struggling with this for a couple of days and want to finish it.. Let's explain the html/js/php project. Via select boxes people can choose products and an amount. These products will be inserted via javascript into a basket.
Inside the basket I made an attribute with a form. In this form the products will be added with javascript with < li > tags. I understood that li tags could not be posted so I made a hidden input for every product. When I try to post the data after that it does not work.
In Opera and Chrome he just gives an empty array and in Firefox he gives an 404 Not found exception on the post. Let's explain some code:
First the html page. This is the shop with the products and the basket.
In the javascript a fuction get calls when the 'add' button is clickes:
(this is the code that add's the elements to the html)
function addProduct() {
var productAdded = $('<li class="product" name="product' + i + '">' +
'<input type="hidden" name="p' + i + '"value="' + product + "/" + qty + "/" + price + '" />' +
'<div class="product-image">' +
'<a href="image">' +
'<img src="images/' + product + '.jpg" alt="placeholder"></a>' +
'</div>' +
'<div class="product-details">' +
'<a style="color: black;">' + product + '</a>' +
'<span class="price">€ ' + price + '</span><br>' +
'<div class="quantity">' +
'<label>Aantal: ' + qty + '</label> <div class="actions">' +
' <a href="#0" class="delete-item" >Delete</a></div></div></div></li>');
cartList.prepend(productAdded);
}
The **Php ** part of the endpage that needs to get the Form data is the following:
<div class="row">
<div class="col-md-2 col-sm-12 ">
<h3>Bestelling:</h3>
</div>
<div id="bestellingklant">
<?php
print_r($_POST);
?>
</div>
</div>
There maybe are some better ways to do this. But I can't see any mistake and I tried a lot of things. It seems though not so difficult. This is the Error i get with Firefox:
Thanks a lot

Apply filters in AngularJS controller

I am newbee to angular and have this filter to translate the text (localization) which works well in my html/view:
<input type="button" class="btn btn-link" value="{{'weeklyOrdersPage.reposting' | translate}}" ng-click="sortBy('reposting')" />
What this does is to take the value from one resource file and display text and it works very well.
Now, I need to do something similar in controller where I am rendering a google map using javascript api. I need to set the text of the marker based on the language i choose. I tried this and it didn't work:
var markerConter = '<div class="infoWindowContent">' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelId'}}") + ': </b>' + panel.id + '</div>' +
'<div><b>' + $filter('translate')("{{'weeklyOrdersPage.panelClassification'}}") + ': </b>' + panel.panelClassification + '</div>' +
'<div><b>' + $filter('translate')('{{weeklyOrdersPage.quality}}') + ': </b>' + panel.format + '</div>'
'</div>';
Any pointers on how to move forward?
You don't need to use {{}} when writing code in controller
$filter('translate')('weeklyOrdersPage.panelId')
$filter('translate')('weeklyOrdersPage.panelClassification')
$filter('translate')('weeklyOrdersPage.quality')
That should solve the problem.

How can I apply a variable as an element ID with JavaScript?

I saw in the firebug the ID is like this whereas I want the value of existingProductArray[i] to be the ID. What am I doing wrong?
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="existingProductArray[i]" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
Try this
var id = existingProductArray[i];
var html ='<li id="' + id + '">'
+ '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ id
+ '</li>';
But
ID hence the name should be unique you are giving 2 elements the same ID ( that's a bad idea )
Try changing:
+ '<input type="image" id="existingProductArray[i]" src="...>'
to
+ '<input type="image" id="'+existingProductArray[i]+'" src="...>'
So in your line of code it was just using it as text string. You need to break out of the string and do it.
You just need to close the quotes and concatenate it in with +:
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="' + existingProductArray[i] + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
your reference is inside the quotations
var html ='<li id="'+existingProductArray[i]+'">'
+ '<input type="image" id="'+existingProductArray[i]+'" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
I stumbled upon the same problem, I know my problem is not 100% the same as yours but I bet I can help other people out who search for this kind of problem.
I was trying to add a variable as a ID name for a div. I tried several methods mentioned above but none of those seemed to work.
I did the following:
div.id = array[i];
which in your case would have simply been:
id=existingProductArray[i];
No " " or + needed, don't forget to declare the i variable. This might be very obvious for some people with more experience.

How to fetch the id of dynamically generated textboxes?

How is it possible to get the id of the dynamically generated textboxes using jquery?. I need to fire the TextChanged event for the corresponging textbox. There is no method reference for the textboxes in the code behind.How can i refer to any method in the codebehind on firing the event. Somebody please help. I dont know jquery much. The entire script im using is as as follows:
<script type="text/javascript">
$(init);
function init()
{
$('#test').droppable(// Div Control
{
drop: handleDropEvent
});
$('a').each(function(idx, item) {
$(item).draggable({ cursor: 'move', helper: 'clone' })
});
}
$(function() {
$("#draggable").draggable(); //Nothing to do with this div
});
function handleDropEvent(event, ui)
{
var draggable = ui.draggable;
document.getElementById('test').innerHTML += addColumn(draggable.attr('text')) + '<br>';
}
function addColumn(column)
{
var iHtml;
// This code will generate a checkbox and a textbox. I need to fire the event of thus generated textboxes.
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input type="text" runat="server" id="aln' + column + '"> </div>';
return iHtml;
}
</script>
There's two ways: keep the generated element, or generate an ID when you generate your new element.
a) keep the generated element
This requires that you don't use innerHTML, but create the element (with document.createElement, or with jQuery's $), and then you can use the element directly (no need to call it by ID any more). For instance, with jQuery:
var container = $('#container');
var myDiv = $('<div id="myDiv"/>');
var myCheck = $('<input type="checkbox"/>');
myDiv.append(myCheck);
container.append(myDiv);
b) generate the ID
container.innerHTML = '<div id="myDiv"><input type="checkbox" id="myCheck"/></div>';
// and after this you can get them by ID:
var myCheck = $('#myCheck');
I would just add a class to the textbox in your iHtml then use .live() event
replace your iHtml with this
iHtml = '<div id="dv' + column + '" width="100px;" height="20px;" padding: "0.5em;"> ' + '<span title="ToolTipText">' + '<input type="checkbox" id="cb' + column + '" value="' + column + '" /> <label for="cb' + column + '">' + column + '</label></span><input class="myclass" type="text" runat="server" id="aln' + column + '"> </div>';
then add the live event
$('.myclass').live('change', function() {
alert(' Live handler called.');
});
here is a WORKING DEMO

Categories