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.
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: