I have a page with one with one link "COUNTRY", by hitting this link, under it appear some other links, which are group of countries. There is also one of the links called "Individual", by hitting that link appears one autocomplete field, where the user can start typing and choose one country.
I want by choosing the country to change some of the hidden fields values and than to submit the form.
The form submission works, but unfortunately there are no POST fields sent.
Here is the HTML & JS code:
<form method="POST" action="" accept-charset="UTF-8" id="news_search_form">
<input name="_token" type="hidden" value="tAB6ZU6sNafRUNBLiPyhiuCbEDQVGD4waxNbT3Yk">
<div class="row threelinks">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="javascript:;" class="btn_filter_category" data-href="country">
<div class="links_new link_hover">COUNTRY</div>
</a>
<input type="hidden" id="select_country" name="select_country" value="214">
<input type="hidden" id="filter_country" name="filter_country" value="0">
</div>
</div>
<div class="row " style="margin-top: 5px; display: none;" id="country_filters">
<div class="col-md-12">
<div class="owl-carousel col-md-12">
<div class="item">
<div class="top_sub_link">
Top 4
</div>
</div>
<div class="item">
<div class="top_sub_link">
EU
</div>
</div>
<div class="item">
<div class="top_sub_link">
Top 8
</div>
</div>
<div class="item">
<div class="top_sub_link">
Non EU
</div>
</div>
<div class="item">
<div class="top_sub_link">
Individual <i class="fa fa-pencil"></i>
<input type="text" class="form-control input-lg" id="individual_country" name="individual_country" style="font-size: 11px; text-align: center; display: none;"/>
<div id="no-result" style="display: none;">No results found</div>
</div>
</div>
<div class="item">
<div class="top_sub_link">
Reset
</div>
</div>
<div class="owl-nav"></div>
</div>
</div>
</div>
</form>
<script>
var filters = ['country'];
$(document).ready(function() {
$('a.btn_filter_category').on('click', function() {
var filter = $(this).attr('data-href');
show_filter(filter + '_filters');
unselect_filters();
$(this).find('.links_new.link_hover').removeClass('link_hover').addClass('link_hover_selected');
});
$(".filter_link").on('click', function() {
var filter = $(this).attr('data-href');
var value = $(this).attr('data-value');
$('#filter_' + filter).val(value);
$('#select_' + filter).val(0);
$("#news_search_form").submit();
});
$(".individual_link").on('click', function() {
var filter = $(this).attr('data-href');
$(this).remove();
$('#individual_' + filter).show();
});
});
$(function () {
var filter = 'country';
var url = "{{ url('country/search/'.$lang) }}";
$("#individual_" + filter).autocomplete({
source: function(request, response) {
$.ajax({
url: url,
dataType: "json",
type: "GET",
data: {
name: request.term
},
success: function(data){
response( $.map( data, function( item ) {
// alert(item.label);
return {
label: item.name,
value: item.value // EDIT
}
}));
}
})
},
select: function(event, ui) {
$('#filter_' + filter).val(0);
$('#select_' + filter).val(ui.item.value);
$("#news_search_form").submit();
}
});
});
function unselect_filters() {
$('div.links_new').each(function(i, obj) {
$(this).removeClass('link_hover').removeClass('link_hover_selected').addClass('link_hover');
});
}
function show_filter(selected_class) {
var arrayLength = filters.length;
for (var i = 0; i < arrayLength; i++) {
var class_name = filters[i] + '_filters';
if(selected_class != class_name) $('#'+ class_name).hide();
else $('#'+ class_name).show();
}
}
function reset_filter(filter) {
$('#filter_' + filter).val(0);
$('#select_' + filter).val(0);
$("#news_search_form").submit();
}
</script>
i found the solution.
The autocomplete submit form is working fine. Unfortunately there was some redirect after the submit, which was causing and empty POST array.
Related
I have this code:
<div class="container">
<div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form3" class="form-control validate val1" name="val1">
<label data-error="wrong" data-success="right" for="form3">Title</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form2" class="form-control validate val2" name="val2">
<label data-error="wrong" data-success="right" for="form2">Desc</label>
</div>
<div class="md-form mb-4">
<i class="fas fa-envelope prefix grey-text"></i>
<label data-error="wrong" data-success="right" for="form2">
Coordinates click:
<div class="coorX"></div>
x
<div class="coorY"></div>
</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="scalize imgpo">
<img src="img/jacket.png" alt="" class="target ">
<div class="item-point" data-top="130" data-left="300" id="point1">
<div></div>
</div>
<div class="item-point" data-top="180" data-left="462" id="point2">
<div></div>
</div>
<div class="item-point" data-top="380" data-left="215" id="point3">
<div></div>
</div>
<div class="item-point" data-left="357" data-top="458" id="point4">
<div></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.imgpo').click(function(e) {
var posX = $(this).position().left,posY = $(this).position().top;
$('.coorX').html((e.pageX - posX -10));
$('.coorY').html((e.pageY - posY -10));
$(".tooltip").tooltip("hide");
$('.formAdd').click();
});
$('.saveBtn').click(function(e) {
var val1 = $(".val1").val();
var val2 = $(".val2").val();
var values = {
'val1' : val1,
'val2' : val2
};
alert('Save');
$.ajax({
url: "save.php",
type: "post",
data: values ,
success: function (response) {
alert('Save');
},
error: function(jqXHR, textStatus, errorThrown) {
alert('Error');
}
});
});
$('.removeMe').on('click', function() {
var number = $(this).attr('id');
$('#point' + number).remove();
$('.obiect' + number).remove();
});
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
/*
$('.tooltips').tooltip({
html: true,
trigger: 'click',
placement: 'top'
})
*/
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); })
});
</script>
<div class="itemsBox">
<form name="saveForm" action="#" method="post">
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
The above code displays the points in the image. Below the picture I have the possibility to delete points from the website and from the picture. After clicking on the image, a tooltip (Bootstrap) is displayed. After clicking on the background image, a form for adding a point in the picture is displayed. The form has the coordinates of the clicked point. It works fine.
How can you write a new point in the picture?
To add a new HTML code to the point in the image:
<div class = "item-point" data-left = "357" data-top = "458" id = "point4">
<div> </ div>
</ Div>
<div class = "obiect4"> Obiect 4 <div class = "removeMe" id = "4"> X </ div> </ div>
How to do it?
Prview: http://serwer1356363.home.pl/pub/component/index2.html
This will require some modification on $(".saveBtn").click() event, like this:
$('.saveBtn').click(function(e) {
e.preventDefault();
var val1 = $(".val1").val(); // title
var val2 = $(".val2").val(); // description
var cX = $(".coorX").text();
var cY = $(".coorY").text();
var newPoint = "<div class='item-point' data-top='"+cY+"' data-left='"+cX+"' id='point1'>" +
"<div>" +
"<a href='#' class='toggle tooltips' title='<h1><b>"+val1+"</b><br>"+val2+"</h1>' data-placement='top' data-html='true' rel='tooltip'></a>" +
"</div>" +
"</div>";
var nextObjNumber = $(".itemsBox").children("div").length + 1;
var newObject = "<div class='obiect" + nextObjNumber + "'>Obiect " + nextObjNumber +
"<div class='removeMe' id='"+nextObjNumber+"'>X</div>" +
"</div>";
$(".scalize").append(newPoint); // inserting new point
$(".itemsBox").append(newObject); // inserting new object
$('.scalize').scalize({
styleSelector: 'circle',
animationPopoverIn: 'flipInY',
animationPopoverOut: 'flipOutY',
animationSelector: 'pulse2'
});
const $tooltip = $('.tooltips');
$tooltip.tooltip({
html: true,
trigger: 'click',
placement: 'top',
});
$tooltip.on('show.bs.tooltip', () => {
$('.tooltip').not(this).remove();
});
$tooltip.on('click', (ev) => { ev.stopPropagation(); });
$("#modalSubscriptionForm").modal("hide");
$(".val1").val("");
$(".val2").val("");
alert('Saved!');
// var values = {
// 'val1' : val1,
// 'val2' : val2,
// 'coorY' : cY
// 'coorX' : cX
// };
//
// $.ajax({
// url: "save.php",
// type: "post",
// data: values ,
// success: function (response) {
// alert('Save');
// },
// error: function(jqXHR, textStatus, errorThrown) {
// alert('Error');
// }
//
//
// });
});
To fix the object numbering issue at the bottom, change your form like this:
<form name="saveForm" action="#" method="post" style="margin-left: 15px">
<div class="itemsBox" >
<div class="obiect1">Obiect 1 <div class="removeMe" id="1">X</div> </div>
<div class="obiect2">Obiect 2 <div class="removeMe" id="2">X</div> </div>
<div class="obiect3">Obiect 3 <div class="removeMe" id="3">X</div> </div>
<div class="obiect4">Obiect 4 <div class="removeMe" id="4">X</div> </div>
</div>
<input type="submit" value="Save" />
</form>
You can check out the full source over here: https://www.codepile.net/pile/5Pgzxg4Z
I've got a dropdown box which is populated with ajax according to what option i choose from another dropdown. I need to duplicate the dropdown box keeping the same options loaded via ajax, this is what i've done o far. Many thanks for your help
This is the code to get tha value from the first dropbox and then use it for ajax
$('#flatGroup').on('change',function(){
var countryID = $(this).val();
console.log(countryID);
if(countryID){
$.ajax({
type:'POST',
url:'../controllers/ctrl_admin_group_table_app/ctrl_admin_get_building_table.php',
data: {
group_id: countryID
},
success:function(html){
$('#flatTable-1').html(html);
$(".bs-select").selectpicker('refresh');
}
});
}
});
This is the code i'm using to close the second dropbox that receive the option from ajax
// start repeating form tabelle
//Start repeating form group add limit
var maxGroup1 = 5;
//add more fields group
var fieldGroup1= $(".fieldGroup1").clone();
$(".addMore1").click(function() {
var fgc1 = $('body').find('.fieldGroup1').length;
if (fgc1 < maxGroup1) {
var fieldHTML1 = '<div class="form-group fieldGroup1">' + fieldGroup1.html() + '<div class="col-md-1"><label class="control-label"> </label><i class="fa fa-close"></i></div></div>';
fieldHTML1 = fieldHTML1.replace('flatTable-1', 'flatTable-' + (fgc1 + 1));
fieldHTML1 = fieldHTML1.replace('flatMillesimi-1', 'flatMillesimi-' + (fgc1 + 1));
$('body').find('.fieldGroup1:last').after(fieldHTML1);
$('.bs-select').selectpicker({
iconBase: 'fa',
tickIcon: 'fa-check'
});
} else {
swal("Operazione Annullata", "Hai raggiunto il massimo numero di proprietari registrabili", "error");
}
});
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup1").remove();
});
// end repeating form
This is the HTML code
<div class="row">
<div class="col-md-9">
<div class="portlet-body form">
<div class="col-md-9">
<div class="mt-repeater">
<div data-repeater-list="group-b">
<div data-repeater-item class="row">
<div class="form-group fieldGroup1">
<div class="col-md-4">
<div class="form-group">
<label class="control-label">Tabella</label>
<select class="form-control bs-select" id="flatTable-1" name="flatTable[]" title="Seleziona tabella millesimale"></select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label class="control-label">
<i class="fa fa-info-circle red tooltips" data-placement="top" data-original-title="Quota del titolare dell'immobile" ></i>Millessimi<span class="required"> * </span>
</label>
<input type="text" id="flatMillesimi-1" name="flatMillesimi[]" class="form-control" placeholder="Millessimi dell'immobile" >
</div>
</div>
</div> <!-- Fine field group -->
</div>
</div>
<!-- <hr> -->
<a href="javascript:;" data-repeater-create class="btn btn-info mt-repeater-add addMore1">
<i class="fa fa-plus"></i> Aggiungi tabella</a>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
I have a view like this:
<div class="GridContainer">
<div>
<div class="row gridHeader">
<div class="small-9 columns">Member Name</div>
<div class="small-2 columns">Date Registered</div>
</div>
#foreach (var member in Model.Members)
{
<div class="row">
<div class="small-9 columns">#member.MemberName</a></div>
<div class="small-2 columns">#member.DateRegistered</div>
<input type="hidden" asp-for="#member.Id" />
<a id="btnMemberDelete" href="#">Delete</a>
</div>
}
</div>
my javascript:
<script type="text/javascript">
$(document).ready(function () {
$('#btnMemberDelete').click(function () {
var id = $(this).closest("div").find("input:hidden[name='member.Id']").val();
var url = '#Url.Action("DeleteMembers", "Member")' + "?id=" + id;
openMemberDialog(url);
});
});
</script>
The delete button only works for the very first row at the moment. If say I have 4 rows the other 3's delete button won't even register. It won't even open the dialog box. Is there something I'm missing here as the code seems to be correct to me.
Thanks!
Fiddle here
As answerd above you need to have a uniqe ID or use a class. in my solution above I use a class like so:
$(document).ready(function () {
$('.btnMemberDelete').click(function (e) {
e.preventDefault();
var id = $(this).closest("div").find("input:hidden[name='member.Id']").val();
console.log(id)
});
});
Also correct your html:
#foreach (var member in Model.Members)
{
<div class="row">
<div class="small-9 columns">#member.MemberName</a></div> // remove the '</a>' here
<div class="small-2 columns">#member.DateRegistered</div>
<input type="hidden" asp-for="#member.Id" />
<a class="btnMemberDelete" href="#">Delete</a>
</div>
}
You need to give a unique id for each delete button. Or you can give a classname instead of id to your anchor tag.
<div class="GridContainer">
<div>
<div class="row gridHeader">
<div class="small-9 columns">Member Name</div>
<div class="small-2 columns">Date Registered</div>
</div>
#foreach (var member in Model.Members)
{
<div class="row">
<div class="small-9 columns">#member.MemberName</a></div>
<div class="small-2 columns">#member.DateRegistered</div>
<input type="hidden" asp-for="#member.Id" />
<a class="btnMemberDelete" href="#">Delete</a>
</div>
}
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.btnMemberDelete').click(function () {
var id = $(this).closest("div").find("input:hidden[name='member.Id']").val();
var url = '#Url.Action("DeleteMembers", "Member")' + "?id=" + id;
openMemberDialog(url);
});
});
</script>
I have created a form with two listboxes in which it is possible to move the items from one listbox into another.
The view also loads correctly, but I haven't figured out how to send the modified listbox data back to controller.
The view code is the following:
<script>
$(function() {
$(document)
.on("click", "#MoveRight", function() {
$("#SelectLeft :selected").remove().appendTo("#SelectRight");
})
.on("click","#MoveLeft", function() {
$("#SelectRight :selected").remove().appendTo("#SelectLeft");
});
});
#Html.Hidden("RedirectTo", Url.Action("UserManagement", "Admin"));
<h2>User</h2>
<div class="container">
<form role="form">
<div class="container">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label for="SelectLeft">User Access:</label>
<select class="form-control" id="SelectLeft" multiple="multiple" data-bind="options : ownership, selectedOptions:ownership, optionsText:'FirstName'">
</select>
</div>
</div>
<div class="col-md-2">
<div class="btn-group-vertical">
<input class="btn btn-primary" id="MoveLeft" type="button" value=" << " />
<input class="btn btn-primary" id="MoveRight" type="button" value=" >> " />
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="SelectRight">Owners:</label>
<select class="form-control" multiple="multiple" id="SelectRight" multiple="multiple" data-bind="options : availableOwners, selectedOptions:availableOwners, optionsText:'FirstName'">
</select>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
var data=#(Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
var selectedOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.AccessOwners));
var availableOwners = #Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.Owners));
function viewModel() {
this.username=ko.observable(data.Username);
this.password=ko.observable(data.Password);
this.email=ko.observable(data.Email);
this.isActive=ko.observable(data.IsActive);
this.userId = ko.observable(data.UserId);
this.ownership=ko.observableArray(selectedOwners);
this.availableOwners = ko.observableArray(availableOwners);
this.submit = function()
{
$.ajax({
url: '#Url.Action("UserSave", "Admin")',
type: 'POST',
data: ko.toJSON(this),
contentType: 'application/json',
});
window.location.href = url;
return false;
}
this.cancel = function()
{
window.location.href = url;
return false;
}
};
ko.applyBindings(new viewModel());
var url = $("#RedirectTo").val();
I would be very thankful if anyone could suggest the way to pass all the selected options back to controller by populating the data with modified lists when the submit function is executed.
Thanks!
Before form submission save one side items values in an hidden input element. (comma separated values of listbox items.) The value of hidden element is sent to server by submitting the form. In controller you can do the next things.
I have a form, after document.ready() I load data into this form, but form values (device name) was cleared on mobile browsers, after tap on screen.
$.ajax({
type: 'GET',
url: "api.ashx",
data: "operation=device.get&deviceid=" + deviceid,
success: function(response) {
var apiResponse = jQuery.parseJSON(response);
if (apiResponse.result == 'true') {
$("#name").val(apiResponse.name);
if (apiResponse.online == 'true') {
$("#status").html('<span class="label label-success">online</span>');
} else {
$("#status").html('<span class="label label-red">offline</span> Был в сети: ' + apiResponse.lastvisit);
}
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form id="deviceinfoform" action="#" class="form-horizontal">
<div class="form-body">
<div class="form-group">
<label class="col-sm-3 control-label">Device name <span class="require">*</span>
</label>
<div class="col-sm-6 controls">
<input id="name" name="name" required="" type="text" placeholder="Device name" maxlength="100" class="form-control"></input>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Device status</label>
<div class="col-sm-6 controls">
<div id="status" class="form-control">
<span class="label label-success">online</span>
</div>
</div>
</div>
</div>
</form>
Problem is solved. The problem was in bootstrap-responsive-tabs plug-in.
fakewaffle.toggleResponsiveTabContent = function () {
var tabGroups = $('.nav-tabs.responsive');
$.each(tabGroups, function () {
var tabs = $(this).find('li a');
$.each(tabs, function () {
var href = $(this).attr('href').replace(/#/g, ''),
tabId = "#" + href,
panelId = "#collapse-" + href,
tabContent = $(tabId).html(),
panelContent = $(panelId + " div:first-child").html();
//!!!clear all dynamic content
$(tabId).html(panelContent);
$(panelId + " div:first-child").html(tabContent);
});
});
};
Updating to the latest version solved a problem.