Develop Reference

Javascript is not showing desired Values

I am trying to manipulate gravity forms with the Custom fields to show the stores(along with assigning email to hidden field) in my form based on the state using the JSON and JavaScript.Same code is working for other website, but not yielding any result when i select state in the form. Please help me in navigating this issue.
I tried searching for similar answer but i didn't have any luck(also I am new so I am not very familiar with JSON).
Let me know if my way of posting question is right or there any edits need to be done?
PHP CODE:
add_action('wp_ajax_state_list_book_appointment','state_list_book_appointment');
add_action('wp_ajax_nopriv_state_list_book_appointment','state_list_book_appointment');
function state_list_book_appointment()
{
$states = get_field('state_options', 'option');
$output = [];
foreach ($states as $state) {
if ($state['booking_Appointment']) {
$output[] = [
'state_name' => $state['store'] . ' (' . $state['state'] . ')',
'state_email' => $state['store_email']
];
}
}
echo json_encode($output);
die();
}
JAVASCRIPT:
$(document).ready(function() {
if ($('#input_1_4').length > 0) {
var store_lists_book_appointment;
$('#input_1_4').on('change', function () {
current_state = $(this).val();
output = '';
state_string = '(' + current_state + ')';
console.log(state_string);
$("#input_1_6").val($("#input_1_6 option:first").val());
$.each($('#input_1_6 option'), function (idx, val) {
// assume state is in option format of ([state])
idx_of_state = $(val).val().indexOf(state_string);
if (idx == 0 || idx_of_state > 0) {
$(val).show();
} else {
$(val).hide();
}
});
});
$.ajax({
type:"GET",
url: my_ajax_object.ajaxurl,
data:{action: 'state_list_book_appointment'},
beforeSend: function(){
$('#catvalue').html('<i class="fa fa-spinner fa-1x" style="color:#000;text-align:center;"></i>');
},
dataType: 'json',
success: function (data) {
//console.log (data);
store_lists = JSON.parse(data);
//console.log(store_lists);
//store_lists_women = JSON.parse(data).women;
output = '<option>-- Please select --</option>';
$.each(store_lists, function (index, value) {
output += '<option style="display:none" value="' + value.state_name + '" data-email="' + value.state_email + '">' + value.state_name + '</option>';
});
$('#input_1_6').html(output);
}
});
$('#input_1_6').on('change', function () {
selected_email = $('#input_1_6 option:selected').data('email');
$('#input_1_10').val(selected_email);
});
// This function is to prevent Chrome frontend validation. It stop working actual submit function of the form
$('#gform_submit_button_1').on('click', function(){
$('#gform_1').submit();
});
}
});

slide down once click on a tag does not slide

I have bunch of anchor tags that are created dynamically. I basically want to invoke a function and display content of that executed function just under that anchor tag using jquery slideDown. Every <a> tag withid="id" and every <a> tag has a <div id="slidedown">.
I am using jquery.slideto.min.js.
The below code does not even slide down at all.
$(function() {
$.ajax({
dataType: 'json'
url: '/lists',
success: function (data) {
if (data != null) {
var html = '<ul>';
$.each(data.apis, function (i, item) {
html += '<li class="res">';
html += '<div class="hed"><h2><a id="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div id="slidedown"></div>';
html += '</li>';
});
html += '</ul>';
$('#exDiv').empty();
$('#exDiv').append(html);
}
},
error: function () {
alert('Error');
},
contentType: 'application/json'
});
$(document).on('click','#id', function(e) {
e.preventDefault();
var link = this.href;
$('#slidedown').slideto();
});
});
I see Uncaught TypeError: Cannot read property 'version' of undefined on my console once I click on any of the <a> tags.

Not sure if that will solve the problem but $('slidedown') is not a valid selector, should be $('#slidedown') because you have div with identifier slidedown : <div id="slidedown">.

The main issue you have is that you are generating duplicate id attributes, which is invalid. Change them to classes instead. Then you can traverse the DOM in the click() handler to find the related .slidedown element using next(). Try this:
$.ajax({
dataType: 'json'
url: '/lists',
success: function (data) {
if (data != null) {
var html = '<ul>';
$.each(data.apis, function (i, item) {
html += '<li class="res">';
html += '<div class="hed"><h2><a class="id" href="/api/' + item + '.json">' + item + '</a></h2></div><div class="slidedown"></div>';
html += '</li>';
});
html += '</ul>';
$('#exDiv').empty().append(html);
}
},
error: function () {
alert('Error');
},
contentType: 'application/json'
});
$(document).on('click','.id', function(e) {
e.preventDefault();
var link = this.href; // you can remove this if it's not used.
$(this).next('.slidedown').slideto();
});

AJAX - Javascript is breaking whenever the AJAX script is called

I hired a developer to help with some work, he was mostly PHP focused and attempted this javascript. The following AJAX script breaks the page whenever it reloads the HTML into the DOM. It called a function via Codenigniter to reload the view within the page. Once this happens, all of the javascript no longer works.
I can't seem to find a solution that helps solve this issue. Please help.
Note: Ideally I would of rather the code only loaded the data and not refresh the HTML, but for now this will need to do as I am up against a timeline.
The code:
$(document).ready(function () {
// Ajax Form Submit
$('body').on('click', '.submitForm', function () {
var formid = $(this).parents('form').attr('id');
var validationResult = $('#' + formid).validationEngine('validate');
if (!validationResult) {
return false;
}
var url = $('#' + formid).attr('action');
var formdata = $('#' + formid).serialize();
if ($('#' + formid).find('.submitForm').hasClass('loading')) {
$(this).hide();
$('#' + formid).find('.loader').show();
}
$.ajax({
type: "POST",
cache: false,
url: url,
data: formdata,
dataType: 'json',
success: function (data) {
if ($('#' + formid).find('.submitForm').hasClass('loading')) {
$('#' + formid).find('.submitForm').css('display', 'inline');
$('#' + formid).find('.loader').hide();
}
if (data.type == 'add') {
if (data.html) {
var newhtml = "<tr>" + data.html + "</tr>";
$('.tab-pane.active table').append(newhtml);
}
$('#' + formid).find('.message').html(data.msg).show();
$('#' + formid).trigger('reset');
setInterval(function () {
$('#' + formid).find('.message').hide();
}, 5000);
} else {
if (data.error) {
$('#' + formid + ' .message').show().html(data.error);
} else {
$('#' + formid + ' .message').show().html(data.msg);
if (data.reload_loc) {
window.setTimeout(function () {
window.location.href = data.reload_loc;
}, 4 * 1000);
}
}
}
}
});
});
// Generic Save Form Data
$('body').on('click', '#saveFormdata', function () {
var formid = $(this).parents('form').attr('id');
var validationResult = $('#' + formid).validationEngine('validate');
if (!validationResult) {
return false;
}
$('#' + formid).submit();
});
});

You just do something like this:
function bindEvent()
{
$('body').on('click', '.submitForm', function () { //Your code });
$('body').on('click', '#saveFormdata', function () { //Your code});
}
function unblindEvent()
{
$('body').off('click', '.submitForm'); //Something like this, please read Jquery.off
$('body').off('click', '#saveFormdata');
}
Before you replace these element, call unblindEvent(). And after you replace these elements call bindEvent().

How can I set loading image during post data jquery ajax and change alert msg to div error?

I want to show a div if the comment field is empty out instead of showing an alert. How can I do this? My other question is, the data is displayed after some seconds. During that loading period is possible to to add a loading image?
<script type="text/javascript">
$(function () {
// on post comment click
$('.bt-add-com').click(function () {
var theCom = $('.the-new-com');
var theName = $('#name-com');
var theMail = $('#mail-com');
if (!theCom.val()) {
alert('You need to write a comment!');
} else {
$.ajax({
type: "POST",
url: "ajax/add-comment.php",
data: 'act=add-com&id_post=' + <? php echo $id_post; ?> +'&name=' + theName.val() + '&email=' + theMail.val() + '&comment=' + theCom.val(),
success: function (html) {
theCom.val('');
theMail.val('');
theName.val('');
$('.new-com-cnt').hide('fast', function () {
$('.new-com-bt').show('fast');
$('.new-com-bt').after(html);
})
}
});
}
});
});
</script>

Array and while loop: make unique clickable

I have an array (via ajax) that looks like this:
data[i].id: gives the id of user i
data[i].name: gives the name of user i
I want to output the array like this:
X Leonardo Da Vinci
X Albert Einstein
X William Shakespeare
...
The X is an image (x.gif) that must be clickable. On click, it must go to functiontwo(), passing the parameter data[i].id. Functiontwo will open a jquery dialog with the question "Delete id data[i].id"?
I know this can't be too hard to do, but I can't seem to figure it out...
This is what I have so far:
function functionone() {
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
success : function(data){
var message = "";
var i = 0;
while (i < (data.length - 1))
{
var myvar = data[i].id;
message = message + "<div class=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";
$('#somediv').html(message).fadeIn('fast');
$("." + data[i].id + "").click(function () {
functiontwo(myvar);
});
i++;
}
}
});
}
function functiontwo(id) {
...}
I know why this isn't working. Var i gets populated again and again in the while loop. When the while loop stops, i is just a number (in this case the array length), and the jquery becomes (for example):
$("." + data[4].id + "").click(function () {
functiontwo(myvar);
});
, making only the last X clickable.
How can I fix this?
Thanks a lot!!!
EDIT:
This is my 2nd function:
function functiontwo(id) {
$("#dialogdelete").dialog("open");
$('#submitbutton').click(function () {
$('#submitbutton').hide();
$('.loading').show();
$.ajax({
type : 'POST',
url : 'delete.php',
dataType : 'json',
data: {
id : id
},
success : function(data){
var mess = data;
$('.loading').hide();
$('#message').html(mess).fadeIn('fast');
}
});
//cancel the submit button default behaviours
return false;
});
}
In delete.php there's nothing special, I used $_POST['id'].

As I pointed out in my comment. The problem is the .click part. Either use bind, or use a class for all the elements, and a click-event like this $('.classnamehere').live('click',function () { // stuff });

function functionone() {
$.ajax({
type : 'POST',
url : 'post.php',
dataType : 'json',
success : function(data){
var message = "";
var i = 0;
while (i < (data.length - 1))
{
var myvar = data[i].id;
message = message + "<div class=\"clickable\" id=" + data[i].id + "><img src=x.gif></div>" + data[i].name + "<br />";
$('#somediv').html(message).fadeIn('fast');
i++;
}
}
});
}
$('.clickable').live('click',function () {
alert($(this).attr('id') + ' this is your ID');
});

The usual trick is create a separate function to create the event handler. The separate function will receive i as a parameter and the generated event will be able to keep this variable for itself
make_event_handler(name){
return function(){
functiontwo(name);
};
}
...
$("." + data[i].id + "").click( make_event_handler(myvar) );