php - Strange Ajax Behaviour

Question

I'm making small project, basically CRUD type project on Codeigniter. I'm using Messi Jquery Modal Library, loading controller with Messi.load ajax.

Problem.

// Edit Operator
$('.edit_details').on('click', function() {
var edit_id = $(this).attr('id');

$.getScript("<?php echo $this->config->base_url() ?>media/js/jquery-1.10.2.min.js");
Messi.load('<?php echo $this->config->base_url() ?>index.php/option/detail/' + edit_id);
$.getScript("<?php echo $this->config->base_url() ?>media/js/validation.js");
});

when i load modal box with ajax, i also load jquery library and some jquery function for the modal content, for example validation.js

controller

// check operator
public function detail($id)
{
    $this->load->model('Option_Model', 'option');

    $data['result'] = $this->option->checkOperator($id);
    $data['states'] = $this->option->getStates();

    $this->load->view('option', $data);
}

everything works perfectly except that ajax loading problem. i almost finished project and suddenly found out, simetimes jquery does not work properly.

for example:

when i load one of that Messi modal boxes, i also use $.getscript and load ip.address.js jquery plugin, because I load some view that needs Ip Address validation. sometimes works, sometimes not. I searched everything i could, tried what i could but cannot understand the problem reason, why it works some times, and some times it does not.

I also have many ajax jquery functions in those modal boxes and they work fine, but functions, that load from $.getscript have problems sometimes.

Edited: here is ip address declaration in my modal box.

var ipAddress = (function(){
    $('.ip').ipAddress();
});
ipAddress();

Magic first two Attempts did not work, third one worked.

Answer 1

Your scripts are being loaded asynchronously, so you cannot guarantee the order they are loaded.

I'm also confused about why you're loading jquery using a jquery function $.getScript()...

But disregarding that, you should load scripts after their dependencies have been loaded:

$.getScript('/path/to/dependency', function(data, textStatus, jqxhr) {
    $.getScript('/load/dependant/script/here');
});

http://api.jquery.com/jQuery.getScript/

You should also look at Deferred objects that jQuery has that makes loading several dependencies easy:

http://api.jquery.com/category/deferred-object/