When form validation fails unable to receive ajax data in codeIgniter - php

Question

This is my very first project in codeIgniter. Here I am trying to validate a form using form_submit() method of Validator controller class ...I am generating two drop-down field in my form using jquery’s ajax method by calling get_cities() method and get_sub_category () method of Validator controller. Worth to mention that I am using an external dropdown.js file which I have linked with my form view. Here is the dropdown.js file
$(document).ready(function () {
$('#city_h').hide();
$('#sub_category_h').hide();
//function to dynamically populate CITY according to STATE
$('#state').change(function () {
var state_id = $('#state').val();
var state_id = state_id.trim();
if (state_id/* != ""*/) {
//Need to handle form submission more efficiently
/**
* For the time being, i am checking if the user has submitted the form or not
* By the following if else block but in future i will try to handle it from CONTROLLER
*/
if ($(location).attr('href') == "http://localhost/ci_practice/") {
var post_url = "index.php/validator/get_cities/" + state_id;
} else {
var post_url = "get_cities/" + state_id;
}
//Need to handle form submission more efficiently
$.ajax({
type: "POST",
url: post_url,
success: function (cities) //we're calling the response json array 'cities'
{
$('#city').empty();
$('#city_h').show();
$.each(cities, function (ci_id, ci_name)
{
var opt = $('<option />'); // here we're creating a new select option for each group
opt.val(ci_id);
opt.text(ci_name);
$('#city').append(opt);
});
} //end success
}); //end AJAX
} else {
$('#city').empty();
$('#city_h').hide();
}//end if
}); //end change
//function to dynamically populate SUBCATEGORY according to CATEGORY
$('#category').change(function () {
var category_id = $('#category').val();
var category_id = category_id.trim();
if (category_id/* != ""*/) {
//Need to handle form submission more efficiently
/**
* For the time being, i am checking if the user has submitted the form or not
* By the following if else block but in future i will try to handle it from CONTROLLER
*/
if ($(location).attr('href') == "http://localhost/ci_practice/") {
var post_url = "index.php/validator/get_sub_category/" + category_id;
} else {
var post_url = "get_sub_category/" + category_id;
}
//Need to handle form submission more efficiently
$.ajax({
type: "POST",
url: post_url,
success: function (subcategories) //we're calling the response json array 'cities'
{
$('#sub_category').empty();
$('#sub_category_h').show();
$.each(subcategories, function (sc_id, sc_name)
{
var opt = $('<option />'); // here we're creating a new select option for each group
opt.val(sc_id);
opt.text(sc_name);
$('#sub_category').append(opt);
});
} //end success
}); //end AJAX
} else {
$('#sub_category').empty();
$('#sub_category_h').hide();
}//end if
}); //end change
});
here is the Validator controller........
public function form_submit(){
//all form validation code goes here
}
public function get_cities($state){
//this method is called from dropdown.js file to populate subcategory dropdown
//but when url changes... this function become unaccessible by dropdown.js
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->form_model->get_cities_by_state($state)));
}
public function get_sub_category($category){
//this method is called from dropdown.js file to populate subcategory dropdown
//but when url changes... this function become unaccessible by dropdown.js
header('Content-Type: application/x-json; charset=utf-8');
echo(json_encode($this->form_model->get_subcategory_by_category($category)));
}
}`
So when I submit form to fail validation it goes to the url (http://localhost/ci_practice/index.php/validator/form_submit) and then jquery’s ajax method is unable to access get_cities() method and get_sub_category() method of Validator controller so I can’t repopulate my dropdown list. How to handle this problem? For the time being I am going with this solution
/**
* For the time being, i am checking if the user has submitted the form or not
* By the following if else block but this is not a portable solution
*/
if($(location).attr('href')=="http://localhost/ci_practice/"){
var post_url = "index.php/validator/get_cities/"+state_id;
} else{
var post_url ="get_cities/"+state_id;
}
in my external javascript file but I think this is not a portable solution.

Answer 1

Problme solved......... just needed to use the full url in var post_url in external dropdown.js file like localhost/ci_practice/index.php/validator/get_sub_category instead of relative url like (index.php/validator/get_cities/)