We Keep Coding

Jquery not send values when form is submit

I using this component: https://github.com/xoxco/jQuery-Tags-Input
and I have this code:
<script type="text/javascript">
$(document).ready(function () {
$('#tags_3').tagsInput({
width: 'auto',
'delimiter': [',', ';'],
autocomplete_url: '{{ pageTemplate.pageHeader.webUrl }}/addPhoto/tags',
'onChange': function () {
var text = $('.tagsinput').val();
alert($('#tags_3').tagsInput('items'));
$("#tags_3").val($('#tags_3_tagsinput').val());
}
});
});
</script>
<form method="post" name="contactformXX" class="form validate clearfix validate-form"
action="bla.html" enctype="multipart/form-data">
<textarea id="tags_3" class="form-control kontakt_input tags" rows="4" id="slowa_kluczowe1"
name="keywords" placeholder="Wpisz słowa kluczowe"></textarea>
<button type="submit" class="btn btn-danger kontakt_button margin_50 button_mop_r_poczta">save</button>
</form>
When I click the "save" button, the data from the "keywords" text is not visible in the $ _POST variable in PHP.
How to fix it?
http://serwer1356363.home.pl/pub/test/index.php - here is preview

You should use <input> instead of <textarea>. This plugin only works with <input>s. Also, you should remove the onChange callback – #tags_3_tagsinput is not an input, so it doesn't have a value, so the .val() method returns ''.

Cannot load variable data into Summernote

I want summernote to display the content if it's exists when loading. But I am unable to load value of a variable into Summernote during it's initialization in codeview.
Here's the code:
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
}).summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
}).summernote('code', '<?php echo isset($profiledata["Profile"])?$profiledata["Profile"]:"" ?>');
});
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"> </textarea>
</div>
<button type="submit" class="btn btn-success" id="submitButton">Submit</button>
</form>
I posted the solution that worked for me. However, I welcome any suggestions. Thanks,

You can get the existing content in Summernote by setting it between the textarea tags.
<form>
<div class="form-group">
<label for="summernote"><strong>Paste the HTML code here:</strong></label>
<textarea class="summernote" name="profile" id="profile"><?php echo
((isset($yourcontent)) ? '' . $yourcontent . '' : ''); ?></textarea>
</div>
<button type="submit" class="btn btn-success"
id="submitButton">Submit</button>
</form>

The content is not being displayed in codeview mode. So, I used a hack - Deactivated codeview and displayed the content and re-activated the codeview. Here is the solutions that worked for me. However, I welcome any suggestions. Thanks,
$(document).ready(function() {
$('.summernote').on('summernote.init', function () {
$('.summernote').summernote('codeview.activate');
});
$('#profile').summernote({
height: 300,
placeholder: 'Paste content here...',
codemirror: {
theme: 'monokai'
}
});
codeviewOn = $('#profile').summernote('codeview.isActivated');
if (codeviewOn) {
$('.summernote').summernote('codeview.deactivate');
$('#profile').summernote('code', '<?php echo json_encode($profiledata["Profile"]);?>');
$('.summernote').summernote('codeview.activate');
}
});

jqueryui dialog inside php while loop not opening as expected

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.
i tried this but still not working.
if i use next() method then no dialog is opening as you can read in link above.
i think i should use data attribute but i don't know how to use it.
Here is my jqueryui dialog div content inside a php while loop:
while ($rows8 = $sql8->fetch_assoc()){
echo "<div id='view-reply'>
<span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span>
<div style='display: none;' class='post_reply_report_win'>
<h4><span>Report to Admin</span><hr/></h4>
<form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>
</div>
}
and i am displaying it like this:
$(document).ready(function(){
$(".post_reply_report_win").dialog({
modal : true,
draggable : false,
resizable : false,
autoOpen : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
$("#view-reply .report_link a").click(function() {
$(".post_reply_report_win").dialog("open");
return false;
});
});

Your click listener simple opens them all as they do all have the class!
$(".post_reply_report_win").dialog("open");
You need to have unique identifiers for opening the dialog. Assignment can be done by class.
So I would go like this:
Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';
$i would start at 1 and $i++ at the end in your loop.
your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that.
that id is the one you pass to your .open call of the dialog.
$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open");

The id should be unique. id='view-reply' is inside while loop and it is repeating.
Try below code:
$(".report_link a").click(function() {
$(this).parent('.report_link').next('.post_reply_report_win').dialog("open");
return false;
});

i have solved it myself after a long research.
i am posting my solution here just to help others that are also searching for the solution :)
So here is the solution:
php:
while ($rows8 = $sql8->fetch_assoc()){
echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span>
<div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' >
<h4><span>Report Abuse</span><hr/></h4>
<form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>";
}
javascript:
$(document).ready(function(){
$(".post_reply_report_link a").click(function() {
var myID = $(this).attr("data-myid");
$(".post_reply_report_win_"+myID).dialog({
modal : true,
draggable : false,
resizable : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
});

is there a difference between putting a javascript in the head or in the body?

I'm very new to javascript and can't figure if there is a difference between those 2 pieces of code using a "selectize" input.
both work but I can't figure if one is better or if they are truly the same.
which one is preferable, if any ?
are there "rules" or best-practice as to where put javascripts in the html document ?
apologies if this is very trivial :)
tl;dr
1st code has the $('#location').selectize({ .... }) inside the <body> tag
2nd code has the same $('#location').selectize({ .... }) but in the <head> tag and enclosed in
$(document).ready(function () {
$('#location').selectize({
....
})
)}
<html lang="en">
<head>
<title>title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
<div class="form-group">
<label for="location">location</label>
<input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
id="location" class="form-control selectized" tabindex="-1" style="display: none;">
<div class="selectize-control form-control single">
<div class="selectize-input items full has-options has-items">
<div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
France
</div>
<input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
<div class="selectize-dropdown single form-control" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
<input type="submit" value="Update" name="submit" id="submit">
</div>
</form>
<script>
$('#location').selectize({
valueField: 'formatted_address',
labelField: 'formatted_address',
searchField: 'formatted_address',
maxItems: 1,
delimiter: ';',
create: false,
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: "googleloc",
type: 'GET',
dataType: 'json',
data: {
search: query,
},
error: function () {
callback();
},
success: function (res) {
callback(res.results);
googresults = res.results;
}
});
},
onChange: function (value) {
if (!value.length) return;
for (var key in googresults) {
if (googresults[key].formatted_address == value) {
var lat = googresults[key].geometry.location.lat;
var lng = googresults[key].geometry.location.lng;
for (var component in googresults[key].address_components) {
if (googresults[key].address_components[component].types[0] == "country") {
var cc = googresults[key].address_components[component].short_name;
}
}
}
}
$('#latitude').val(lat);
$('#longitude').val(lng);
$('#country_code').val(cc);
}
});
</script>
</body>
</html>
and version 2 which has the selectized item in the head
<html lang="en">
<head>
<title>title</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/css/selectize.bootstrap3.css"
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.12.1/js/standalone/selectize.js"></script>
<script>
$(document).ready(function () {
$('#location').selectize({
valueField: 'formatted_address',
labelField: 'formatted_address',
searchField: 'formatted_address',
maxItems: 1,
delimiter: ';',
create: false,
load: function (query, callback) {
if (!query.length) return callback();
$.ajax({
url: "googleloc",
type: 'GET',
dataType: 'json',
data: {
search: query,
},
error: function () {
callback();
},
success: function (res) {
callback(res.results);
googresults = res.results;
}
});
},
onChange: function (value) {
if (!value.length) return;
for (var key in googresults) {
if (googresults[key].formatted_address == value) {
var lat = googresults[key].geometry.location.lat;
var lng = googresults[key].geometry.location.lng;
for (var component in googresults[key].address_components) {
if (googresults[key].address_components[component].types[0] == "country") {
var cc = googresults[key].address_components[component].short_name;
}
}
}
}
$('#latitude').val(lat);
$('#longitude').val(lng);
$('#country_code').val(cc);
}
});
});
</script>
</head>
<body>
<form role="form" class="form-vertical" method="POST" action="/profile">
<div class="form-group">
<label for="location">location</label>
<input type="text" value="Lorien, 58120 Corancy, France" placeholder="" name="location"
id="location" class="form-control selectized" tabindex="-1" style="display: none;">
<div class="selectize-control form-control single">
<div class="selectize-input items full has-options has-items">
<div class="item" data-value="Lorien, 58120 Corancy, France">Lorien, 58120 Corancy,
France
</div>
<input type="text" autocomplete="off" tabindex="" style="width: 4px;"></div>
<div class="selectize-dropdown single form-control" style="display: none;">
<div class="selectize-dropdown-content"></div>
</div>
</div>
<input type="submit" value="Update" name="submit" id="submit">
</div>
</form>
</body>
</html>

It is always better to put javascript at the bottom just before </body>. That way it doesn't block rendering (good for performance). Also, at that point you know the DOM (the tree of HTML elements) is ready for you.
$(document).ready(function () {}) is jQuery's way of waiting until the DOM is ready. If you put your javascript in the <head> you have to use this technique, because obviously all the actual HTML you want to work with comes after it and needs to be parsed. The callback (the function passed to .ready()) gets called once the DOM is ready.

Well, in the beginning of the jQuery revolution this question was not very hot. jQuery on top and the script whenever you wished to.
With the explosive growth of the thousands plugins developed for any possible purpose, you see webpages with many of those plugins which has to be loaded.
Placing all of this stuff, which is not directly needed in order to display your site, in the <head> tag will slow down the time the site is loading, and this because too many requests has to be done in order to load the plugins.
So that sad is a common rule of thumb to place in the head just the 'css' and the 'js' needed to run your initial HTML and at the end of the page BEFORE the closing 'body' tag all the other scripts.
At the end of all of this you can have the additional script tag where some custom code can be placed e.g.
$(document).ready(function(){
//stuff here
})

You should put javascript code for fast page load. Browser render code top to bottom. If you put your javascript code to bottom, page elements will be loaded first and then load javascript codes.

If you put JS in the head and don't have a listener to detect the DOM loading then you may not be able to manipulate DOM objects. It's usually best to keep scripts at the bottom of the body this will prevent any of those errors and allow you to add stuff to all DOM elements.
e.g. Putting the following script in the head will result in an error
<script>
document.getElementById('myElement').setAttribute('data-myValue','myValue')
</script>

How to add before send function to current return ajax function?

i have a main form on my main page, the form get an email address from the user and check if the email exist.
My target is to show the results on the same page with bootstrap collapse.
I am using this code in the javascript side:
$(".emailCheckForm").bind("submit", function () {
return $.ajax({
type: "POST",
width: "auto",
height: "auto",
padding: 10,
cache: !1,
url: "_/php/checkemail.php",
data: $(this).serializeArray(),
success: function (t) {
$(".res").append(t).collapse();
},beforeSend: function(){
$( "#message" ).empty();
}
}), !1
}),
my html code:
<form action="" method="post" class="col-md-8 centered emailCheckForm">
<div class="input-group">
<input type="email" name="email" class="form-control checkFrame" placeholder="you#youremail.com">
<div class="input-group-btn">
<input type="submit" value="answer me!" class="btn btn-default checkFrame" tabindex="-1" />
</div>
</div><!-- /.input-group -->
</form>
<div class="res"></div>
Now this working but the problem is that if i want to check another email i get the same results until i will refresh the page.
So i want to implement a before send function that will remove\empty the div results.
I cant make this happen because that every time that i insert the beforsesend function the post not working, any suggestions to make proccess like that in the right way?

How about this one. On every successful callback it will clean up results from previous request and re-populate latest:
...
success: function (t) {
$(".res").empty().append(t).collapse();
}
...