Problems posting data forms created by javascript - 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

Related

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.

Adding html content from javascript, and changing it in html on button click

I'm working at a twitch.tv online stream , and i'm tryin' :
To prepend an html code from javascript in HTML
To put the content called from javascript , in a div with id="followerInfo" , and change the content every time when i press the buttons (depends on type of data called by that buttons)
. When I press the button all , it must show me all the tv streams , same for online - online streams and also with offline btn
. and the most important , to understand what am I doing here, not only to copy paste a code...
I'm stuck here .. I'm a self-taught (tryin' to be programmer) and implicitly a newbie in this field, but I want to learn that's why I'm asking you for a little help , if you can also explain me a little bit how to do it.
<div class="row second text-center">
<div class="col-md-4 btn btn-info" id="all">
All
</div> <!-- Online -->
<div class="col-md-4 btn btn-success" id="online">
Online
</div> <!-- Online -->
<div class="col-md-4 btn btn-danger" id="offline">
Offline
</div> <!-- Offline -->
</div>
<div id="followerInfo" style="margin-top:50px;">
</div>
for button All
$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");
for button offline
$("#followerInfo").prepend("<div class='row'>" + "<div class='col-md-4'>" + "<a href='" + ur_l + "' target='_blank'><img src='" + logo + "'></a>" + "</div>" + "<div class='col-md-4'>" + name + "</div>" + "<div class='col-md-4'>" + status + "</div></div>");
for button online
$("#followerInfo").prepend("<div class='row'>" +
"<div class='col-md-4'>" + "<a href='" + ur_l +
"' target='_blank'><img src='" + logo + "'></a>" +
"</div>" +
"<div class='col-md-4'>" + name + "</div>" +
"<div class='col-md-4'>" + status + "</div></div>");
If it will help you to understand better my code , here is the codepen link
http://codepen.io/queky18/pen/BzbpwV
$('.second div').on('click', function(e) {
e.preventDefault();
var status = $(this).attr('id'), // get the id of the status button clicked on.
followerRow = $('#followerInfo .row'),
statusColumn = $('#followerInfo .col-md-4:last-child');
statusColumn.each(function(){// check the text in the last column of each row
if (status == "all") { // for the show all button.
followerRow.show();
} else {
if ($(this).text().toLowerCase() != status) { // convert text to lowercase and compare with status
$(this).parent().hide(); // gets the parent div of the last column, which would be the row and hide it.
} else {
$(this).parent().show(); // otherwise we show the row.
}
}
});
});
This should work with your current code, but as mentioned, it's probably worth the time to go through and re-factor your code if you start to see duplication.
See an updated version here - http://codepen.io/anon/pen/PzLALa

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

Loading popups with $.get - Jquery Mobile

I'm trying to load some data from a server. I have some links that when I click on them, I want them to open the right corresponding popup with that data in them. But the popups just appears as formatted text on the page. If you look at the code they are containing <p> tags. The result of the loadPopups function is that it just prints the <p> tags to the page. No popup behaviour.
Here is my code to get the popup data
function loadPopups() {
$.get("load.php", function(data) {
data = $.parseJSON(data);
var str = '';
for( laxa in data.laxor) {
var laxaArray = data.laxor[laxa];
str += '' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'rubrik') + '">' +
'<p>' + laxaArray.rubrik + '<p>' +
'</div>' +
'<div data-role="popup" id="' + (laxaArray.laxa_id + 'beskrivning') + '">' +
'<p>' + laxaArray.beskrivning + '<p>' +
'</div>' +
'';
}
//alert('Data loaded');
$("#popup_containor").html(str).page();
});
}
this then gets added to this <div>
<div id="popup_containor">
</div>
When I try to display the popup by using the same id that is specified in the for loop for each popup like this
<p>Hej<p>
Nothin happens. The popups are simply displayed as if there where no <div data-role="popup">
Any help is appreciated
Thanks
Why won't you separate the logic?
Get whatever values you want first from server.
let's say var a= 'string 1 from server', b='string 2' and so on.
Create functional popup in your page with no data.
Done
<div data-role="popup" id="134rubrik" data-overlay-theme="b">
<p id="serverdata"> </p>
</div>
Than fill your popup using JS or jQuery:
document.getElementById('serverdata').value= a;

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.

Categories