Develop Reference

How does jQuery().change work with ajax?

I have an input field which I add to html using ajax here:
function WritePrices(categories) {
var strResult = "from: <input class=\"price\" type=\"text\" id=\"minCost\" value=\"" + categories.MinPrice + "\" />";
strResult += "from: <input class=\"price\" type=\"text\" id=\"maxCost\" value=\"" + categories.MaxPrice + "\" />";
$("#price-range").html(strResult);
}
And then I want to catch a moment when this input is changed by the user. That's why in the script I also have change method
jQuery("input#minCost").change(function () {
//...
});
But this method doesn't "hear" any changes to my input field. It hears changes only when my input field is created in html(not during in the script). what should I change to make jQuery seen changes to my input field?

You must assign event just after the creation. Please find working snippet below:
function WritePrices(categories) {
var strResult = "from: <input class=\"price\" type=\"text\" id=\"minCost\" value=\"" + categories.MinPrice + "\" />";
strResult += "from: <input class=\"price\" type=\"text\" id=\"maxCost\" value=\"" + categories.MaxPrice + "\" />";
$("#price-range").html(strResult);
jQuery("input#minCost").change(function () {
alert("working");
});
}
var categories = {};
categories.MinPrice = 0.0;
categories.MaxPrice= 10;
WritePrices(categories);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="price-range"></div>

You need to use document change pattern
$(document).on('change','input#minCost',function(){
...
});

How to change database values with dynamically created buttons in PHP

I am dynamically creating html content with PHP and I am creating a button and when that button is clicked It should invoke a PHP script that will update the values of a column of a specific row in the database
Here is my code:
<?php
session_start();
if(!isset($_SESSION['id'])){
header("Location: login.php");
}else{
require_once("mysqli_connect.php");
$query = "SELECT * FROM markeri WHERE odobreno ='F'";
$response = #mysqli_query($dbc,$query);
if($response){
echo "<hr>";
while($row = mysqli_fetch_assoc($response)){
echo "<div align='center' id='markeri'><h3>Naziv: " . $row['naziv'] . "</h3>";
echo "<h3>Ulica: " . $row['ulica'] . "</h3>";
echo "<h3>Opis:</h3>" . "<p>" . $row['opis'] . "</p>";
echo "<h4>Email: " . $row['email'] . "</h4>";
echo "<img src='" . $row['link_slike'] . "' width='300px' /></br>";
echo "<form action='update.php' method='POST'>";
echo "<textarea rows='10' cols='30' maxlength='500' placeholder='Komentar' name='" . $row['marker_id'] . "'></textarea></br>";
echo "<input type='button' value='Odobri' name='" . $row['marker_id'] . "b" . "' /></form><hr>";
}
}
}
?>
I tried something like making the name of the textarea equal to the marker_id in my database and making the name of the button the value of marker_id + the string "b" but I don't know how to call them on my update.php script. Usually when it is a normal case and when there is no dynamic content I know how to do it with $_POST['name'];
EDIT:
I used AJAX to dynamically create the HTML as you told me but I've encountered another problem
<script>
function page_loaded(){
jQuery.ajax({
method: "GET",
url: "get_data_dashboard.php",
success: function(data){
var markers = JSON.parse(data);
for(var i = 0; i < markers.length; i++){
var m = markers[i];
var markerHTML = "<div class='marker'>" +
"<span id='naziv'>Naziv zahtjeva: " + m.naziv + "</span></br>" +
"<span id='ulica'>Ulica: " + m.ulica + "</span></br>" +
"<p id='opis'>Opis:</br>" + m.opis + "</p></br>" +
"<span id='email'>Email: " + m.email + "</span></br>" +
"<img id='slika' src='" + m.link_slike + "' />" + "</br>" +
"<textarea rows='5' cols='30' maxlength='500' id='t" + m.marker_id + "' placeholder='Komentar'>" + "</textarea></br>"
+ "<div class='buttons'><a href='odobri_prijavu.php?id=" + m.marker_id + "'>Odobri</a>" +
"<a href='izbrisi_prijavu.php?id=" + m.marker_id + "'>Izbriši</a>" + "</div>" +
"</div><hr>";
$('#content').append(markerHTML);
}
}
})
}
$(document).ready(page_loaded());
</script>
I tried to use buttons but I couldn't figure how to add event handlers to dynamically created buttons that will post a request via AJAX to some php script with the proper id as the value and the value of the textarea. So I used the anchor tag and I was able to send the id, but I can't send the value of the textarea because I don't know how to reference it and even if I referenced it, it will be NULL because its value is set to the anchor tag at the very beginning and I want to type in text in the textarea.

try this
$(".btn_class_nm").click(function(){
$.ajax({
type: "POST",
url: "http://domain.com/phpscript_filenm.php",
data: {
val1:"val1",
val2:"val1",
},
success: function(msg){
alert( "record updated"); //Anything you want
}
});
});

First of all give a Class Name to the Button as it is being generated dynamically and the number of them can vary based on the number of records the query returns. Something like this:-
echo "<input type='button' class='btn btn-primary btn-xs btn-block active view_data' value='Odobri' name='" . $row['marker_id'] . "b" . "' /></form><hr>";
Note that I have add view_data in the class definition. This will help is trapping the onclick event through jquery.
the jquery will be something like
$('.view_data').click(function(){
var yourvariable = JSON.stringify($(this).val()); //Gets Clicked button value
$.ajax({
url:"workstatus.php",
method:"post",
data:{yourvariable:yourvariable, anymoreyourvariables:anymoreyourvariables, , },
success:function(data){
$('#htmldivID').html(data);//If you want result there.
alert( "record updated"); //Anything you want
}
});
I hope this helps you.

Jquery form inputs not being serialized

So what I'm doing is after an AJAX call, I need to dynamically create a table row containing two hidden inputs, one regular input, and two buttons that have the same functionality as the buttons already on the page when it loads. My problem is that the form I try to serialize is empty, and I'm not sure why.
Here's how I'm generating my html:
function addNewPlayerRow(player, tid) {
var html = "<tr> <form role='form' name='editplayerform'>";
html += "<td>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</td></form>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
And here's the onclick function for buttons of the deleteplayerbutton class.
function deletePlayerSender(button) {
var form = $(button).parent().prev().prev();
console.log($(form));
console.log($(form).serialize());
}
When I click the button, the console logs and empty serialization form. Anyone know why?

A simple test like:
console.log($(button).parent().prev().prev().tagName);
should reveal which element you are targeting, which at first look seems to me the <tr> element and not the form. Furthermore, as other suggested you should revisit your html structure. Note that you forgot the closing </td> before the closing </tr>

The button has a reference to the form it belongs to:
<button type="submit" onclick="deletePlayerSender(this)">Remove</button> //add the type submit, which mimics the behaviour of input
var form = $(button).get(0).form; //access the DOM element using get(0)
//alternatively
var $form = $(button).parents('form'); //parents() in plural. Return the form element as jQuery element
console.log(form, $form);
console.log($(form).serialize());
console.log($form.serialize());

check https://jsfiddle.net/dk7qbfpd/. I did some corrections to your code and now is working.
there are some changes in both methods, add and delete
function addNewPlayerRow(player, tid)
{
var html = "<tr><td><form role='form' name='editplayerform" + player._id + "' id='editplayerform" + player._id + "' >";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(" + player._id + ");'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(" + player._id + ");'>Remove</button>";
html += "</td></tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(playerId)
{
var form = $("#editplayerform" + playerId);
console.log($(form).serialize());
}

You can't put html where you want,
Form element can't be placed between Table blocks which means it can only
wrap a table, or be placed within td.
Also try replace
.parent().prev().prev()
with
$(button).parent().parent().find('form')
that will support structure changes
Working code below:
function addNewPlayerRow(player, tid) {
var html = "<tr>";
html += "<td><form role='form' name='editplayerform'>";
html += "<input type='hidden' name='tournamentidform' value='" + tid + "'/>";
html += "<input type='hidden' name='playerid' value='" + player._id + "'>";
html += "<input type='input' class='form-control' name='playername' value='" + player.player_name + "'/>";
html += "</form></td>";
html += "<td>";
html += "<button type='button' class='btn btn-sm btn-success saveplayerbutton' onclick='savePlayerSender(this)'>Save Name</button>";
html += "<button type='button' class='btn btn-sm btn-danger deleteplayerbutton' onclick='deletePlayerSender(this)'>Remove</button>";
html += "</tr>";
$(html).hide().appendTo("#playersbody").fadeIn(300);
}
function deletePlayerSender(button) {
var form = $(button).parent().parent().find('form');
console.log($(form));
console.log($(form).serialize());
}

Thanks for all the help, everyone! I managed to fix it by putting the form inside the <td> and then finding the form starting at the button by doing this:
var form = $(button).parent().prev().children("form");

JavaScript function onclick runs automatically

i have this code in while loop in JavaScript. As you can see i am adding every loop to with ID page, another divs. Every div has onclick handler which can execute MyFunction with variable. My problem is that, my script onlick runs automatically when my page is loaded. But i need to run MyFunction only if i click on the div.
Code:
document.getElementById("page").innerHTML += "<div style='width:100px; float:left;' onclick='" + MyFunction(variable) + "'>" + AnotherVariable + "</div>";
Thank you

You're a bit off ... try ...
document.getElementById("page").innerHTML += "<div style='width:100px; float:left;' onclick='MyFunction(" + variable + ")'>" + AnotherVariable + "</div>";
.. if you don't want the function to run.
In particular, look here:
"<div ... onclick='MyFunction(" + variable + ")'>"
UPDATE 1:
"Variable is string." Then, here's the modification:
document.getElementById("page").innerHTML += "<div style='width:100px; float:left;' onclick='MyFunction(\"" + variable + "\")'>" + AnotherVariable + "</div>";

Javascript 'dynamic' form concatenating string onto form action

I have the following script constructing a form like so:
var sHTML = "";
sHTML += "<form id='formScore' method='post' action='q_process3.aspx’>";
sHTML += " ";
sHTML += "<input type='hidden' id='Title' name='Title' value= " + title + ">";
sHTML += "<input type='hidden' id='Result' name='Result' value= " + resultstatus + ">";
sHTML += "<input type='hidden' id='ScorePctg' name='ScorePctg' value= " + scorepctg + ">";
sHTML += "<input type='hidden' id='ScorePoints' name='ScorePoints' value= " + scorepoints + ">";
sHTML += "<input type='hidden' id='PassingPctg' name='PassingPctg' value= " + passingpctg + ">";
sHTML += "<input type='hidden' id='PassingPoints' name='PassingPoints' value= " + passingpoints + ">";
sHTML += "<br><input type='submit'><br>";
sHTML += "<form>";
document.getElementById("divEmail").innerHTML = sHTML;
document.getElementById("formScore").submit();
When this submits however, the action/url it points to is:
q_process3.aspx’%3E%20%3Cinput%20type=
So it looks like it is immediately concatenating the 1st input tag onto the the action property of the form element in the string. What am I doing wrong? Or overlooking? I know it's something simple.

In your code typo error
sHTML += "<form id='formScore' method='post' action='q_process3.aspx’>";
^ ^
sHTML += "<form>"; // ought to be </form>
Whether there is reason to submit form immediately?
document.getElementById("formScore").submit();

If I take your code and run it in jsFiddle, I get a long, mangled form action.
If I replace your action's ending smart quote with a plain old tick quote (I'm not sure of the correct namings), the form action is set properly.
Change your form tag string to:
sHTML += "<form id='formScore' method='post' action='q_process3.aspx'>";
That should do it.