I have a project in PHP using CodeIgniter in an HMVC approach.
Now, I run into a problem where I'm really confused what to do next.
Here's my situation:
I have a view which looks like this:
//logs_v_month.php
<div id="logs" class="tab-pane active">
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url: "<?php echo load_global_assets('system/js/log.js')?>",
dataType: "script",
success: function(e){}
});
});
</script>
Then I have a controller:
//view.php
function display_logs_month(){
$data['logs_v'] = $this->load->view('logs_v_month');
echo json_encode($data);
}
Then I have another view which is the main view.
//logs.php
<div class="tab-content" id="logs_content">
<!--logs loaded via ajax call-->
</div>
<script type="text/javascript">
function view_month(group_id, start_end){
$.ajax({
type : "POST",
dataType: "json",
url : "<?=base_url()?>logs/view/display_logs_month",
data : {"group_id" : group_id},
success : function (data){
$("div#logs").remove();
$("#logs_content").append(data.logs_v);//logs_v
},
error : function(data){
console.log(data);
}
});
}
The logs.php view has an ajax call to load the logs_v_month.php view through the view.php controller.
My question is, how do I access JavaScript functions (which are also loaded via ajax) from the logs_v_month.php from the logs.php view?
I've tried searching for the answer on the web and most answers people give is using the eval() function but many discourages from using that.
Is there a way I can restructure or rearrange my JavaScript so it will be easy for me to access them in this kind of situation? I'm also taking into account Namespacing if this can help the problem.
I just started learning CI and HMVC so I'm fairly new to this.
Thanks!
You need to put the returned scripts into the DOM for the page.
when you get the script data back in the success method of your ajax call, you can create a script element with the code inside it and append it to the DOM, something like:
success:function(data){
var scriptElement = document.createElement('script');
scriptElement.setAttribute('type', 'text/javascript');
scriptElement.textContent = data;
var head = document.getElementsByTagName('head').item(0);
head.appendChild(scriptElement);
}
Now the functions will be accessible to all scripts.
Related
I am developing an application in Yii.. One issue i am facing is, when i am writing ajax functions, the url's will be in php. so i am unable to move the codes to another javascript file.
$.ajax({
url: "<?php echo Yii::app()->createUrl('provider/ajaxdetail');?>",
data: {'type':tagtype},
beforeSend: function() { },
success: function(data) {
}
});
so what is the best method to move php out of the javascript so that i can move the javascript code to another js file. I Thought of putting the url's in a hidden box and then call it in the javascript function. but i hope there will be better methods to do this .
please help
you could create a global variable to store the url, in your html head , so that any js file that needs the url can access it, like:
<html>
...
<head>
..
var MY_APP_URL = '<?php echo Yii::app()->baseUrl; ?>'; //can be like www.somesite.com/
....
//load js files
...
and in the js file you could do:
$.ajax({
url: MY_APP_URL + "controller_name/function_name",
data: {'type':tagtype},
OR you could do:
Yii::app()->clientScript->registerScript('helpers', '
someUrl = '.CJSON::encode(Yii::app()->createUrl('blabla')).';
baseUrl = '.CJSON::encode(Yii::app()->baseUrl).';
');?>
and you can use variables someUrl and baseUrl in your Javascript files
I am trying to refresh a div with jquery load(); but the load displays the correct information but duplicates entire parts of the page that arent in the div
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').load('#uses_form_div');
}
});
return false; });
i think you are having a misunderstanding..
if you want to load an external url into the div block
$('#uses_form_div').load("./a.file");
will do it. see the api docs.
Or if you are trying to load the ajax response of the $.ajax call into the div, it should be
$.ajax({
type: 'POST',
url: $(this).attr('action'),
cache: false,
data: $("#uses_form").serializeArray(),
success: function(data)
{
$('#uses_form_div').html(data); // see here
}
});
UPDATED according to comments below:
if the case of an included page to be refreshed. I have two ways to recommend.
make the included file as a separate url and load it initially. so instead of include you will be loading it via jquery as the page loads by a jquery load call. and when you want to refresh it you can do $('#uses_form_div').load("./a.file");
you can put it as include it self and when you need to update, make an ajx request get the data back. Here you have 2 choice. You can build the dom at server and give html as ajax response and simply $("#uses_form_div").html(data) or get the response as json
and build your dom at client side and load it via same $("#uses_form_div").html(data).
I also had the same problem but finally found the answer
<script type="text/javascript">
function recp() {
setInterval(function()
{
$("#result").load(location.href+ ' #my');
});
}
</script>
<div id="result">
<div id="my"><?php echo date('a:i:s'); ?></div>
</div>
I am using blueimp in my website. blueimp is included at the end of my page(index.php) like:
<?php include "index.html"; ?>
In my php page I am also using a jquery adapter which sends some variables from the same page and two variables from blueimp uploader via:
function save()
{
var variable1= document.getElementById('field1').value;
var variable2= CKEDITOR.instances.field2.getData();
variable2=encodeURIComponent(variable2);
var variable3= document.getElementById('field3').value;
var variables="variable1="+variable1+ "&variable2="+variable2+
"&variable3="+variable3;
jQuery('#mydiv').showLoading();
$.ajax({
type: "POST",
url: "some.php",
data: variables,
error: function(){
alert('Error while loading!');
},
success: function(data){
jQuery('#mydiv').hideLoading();
$('#mydiv').html(data);
}
});
}
Whenever I call this function the variables are not sent to some.php . However if I remove
<?php include "index.html"; ?>
from index.php page, the function save starts to work. I guess something from included blueimp page ,which is index.html, prevents the jquery adapter to function properly.
Is there any clue on this issue?
Thanks in advance.
It sounds like you are having some conflicts between the two libraries. jQuery has this option called noConflict() to allow you to sort of 'pause' jQuery for a bit and allow other libraries to work and then 'resume' normal jQuery functions.
So I have a simple web-app interface that is relying on AJAX to build and control which settings a user can see at any one point in time. Think of them as acting like sub-menus.
<script type="text/javascript">
$(document).ready(function(e) {
$(".option").click(function() {
var method = $(this).attr("id");
var target = "";
switch(method){
case "optManPpl":
target = "/controls/location/manage_people.php";
break;
case "optManLoc":
target = "/controls/location/manage_locations.php"
break;
}
$.ajax({
type: "POST",
data: "user=0",
url: target,
success: function(msg){
$("#controls").html(msg);
}
});
});
});
</script>
<div id="options">
<div id="optManPpl" class="option"> Manage People </div>
<div id="optManLoc" class="option"> Manage Locations </div>
</div>
<div id="controls">
</div>
This page is obviously called and displayed from another ajax call and loaded to the screen. When I click on "optManPpl" or "optManLoc" for the first time, the call goes through great and returns the expected result. However, the second time I click on either of them (2 calls in any combination), the entire page is returned instead of the [target] url.
EDIT: I am "chaining" AJAX calls throughout the application. I am relatively new to working with AJAX in a web-app situation, so I'm not sure if this is the best way, but it is the way I came up with for getting user input from the forms into PHP without having to resubmit the page.
EDIT: the attached image is what the page looks like after the second call. After the FIRST call, the "controls" div tag is instead populated with 4 other div tags.
please put exit after last line in manage_locations.php file.
also you can check out put by following.
$.ajax({
type: "POST",
data: "user=0",
url: target,
success: function(msg){
alert(msg); return false;
$("#controls").html(msg);
}
});
Here you ll see the particular output only. so that you can find the results in an alert.
What is the best way to execute a codenighter controller/method from an external script?
Trying to integrate my existng CI app with a non-CI app and need to get output of CI and show it inside the other app.
I would take a look at either the xmlrpc library or rest (baseed on https://github.com/philsturgeon/codeigniter-restserver).
Another option is you could set up a controller/view method that outputs the info you need in a format that you can work with and use curl to get that page.
ajax.
http://api.jquery.com/jQuery.ajax/
<script src="/js/jquery.js"></script>
<div id="result"></div>
<script>
$.ajax({
url: 'controller/method',
success: function(data) {
$('#result').html(data);
alert('Load was performed.');
}
});
</script>