In my page I have ajax tabs and every tab consists of some javascript functions. I want to load each javascript function only when the tabs are clicked. But the functions are not working in tabs. How can I solve this?
My codes are as follows:
PHP:
echo "<script type='text/javascript'>";
echo "function check(){";
echo "alert('hello');";
echo "}";
echo "</script>";
echo "<div><a href='javascript:check();'>Check</a></div>";
Ajax:
new Ajax.Request(
test.php,
{
method:'post',
onSuccess: function(data){
var tmp=data.responseText;
$$('.tolga').invoke('insert',tmp);
}
});
HTML:
<div class="tolga">
</div>
Related
I'm working on a delete function in a web app where clicking on a button deletes a row in my db. This is pretty straight forward and it works, but I want the user to be able to confirm the delete first before the form is submitted.
Here's the markup for the form as it is now:
echo '<li class="fave-item">';
echo '<div class="tasted-this box-center">';
echo '<form class="delete-fave">';
echo '<input type="hidden" name="user_id" value="'.$faves_result['user_id'].'" />';
echo '<input type="hidden" name="beer_id" value="'.$faves_result['beer_id'].'" />';
echo '<button class="icon delete" data-icon="x" />';
echo '</form>';
echo '</div>';
echo '</li>';
And here's the ajax submit func.:
$('.delete-fave').on('submit', function(){
$.ajax({
type: "POST",
url: "deletefave.php",
data: $(this).serialize(),
success: $.proxy(function(json) {
$(this).closest('li.fave-item').remove();
},this)
});
return false;
});
This is what I want to happen before the submit:
$('button.delete').click(function(){
$(this).parent().addClass('delete-fave');
$(this).addClass('ready');
return false;
});
When I tested this I removed the class from the form to achieve this order of events:
Click 'button.delete' adds class 'delete-fave' to form (making it active)
'button.delete' gets a 'ready' class
Clicking again on button with the 'ready' class submits form.
I haven't been able to merge these functions so I hope you can help me out!
The $('.delete-fave').on('submit'... function is defined BEFORE the class is added to the button.delete parent, so it's not going to work.
To get it to work just redefine the function again AFTER adding the class.
JSFiddle recreating your problem: http://jsfiddle.net/rowlandrose/XAeCh/5/
JSFiddle solving your problem: http://jsfiddle.net/rowlandrose/XAeCh/4/
I am using AjaxForm extension to submit form with ajax as following
var options =
{
url:'<?php echo site_url('user/ajaximage')?>',
dataType: 'json',
success: function(data)
{
if(data.messagecode==1)
{
$(".wrap label").hide();
$("#preview").html("<img src='"+data.content+"'class='preview'>");
$("#errormessagepic").hide();
}
else if(data.messagecode==0)
{
$("#errormessagepic").html(data.content);
$("#preview").html('<img width="100" height="100" src="<?php echo base_url();?>/images/avatar_generic.png" />');
}
//$('#SignupForm').resetForm();
//$("#SignupForm").attr('action','<?php echo site_url('user/individualprofile')?>');
} ,
};
$("#SignupForm").ajaxForm(options);
$("#SignupForm").submit();
but after this ajax submission I want to resend form to another URL other than '' but it does not work. Any help
Ok so you want to post a form using ajax to two different urls. I dont know about your extension but i can tell you how to do this.
1- create a function and run this function when the user clicks on the submit
<-input type="button" name="submit" value="Submit" onclick="post_form()"-/>
2- Create the body of the function, this function will submit data to two urls
function post_form(){
// save the values in text boxes in variable
var val1=$("#text1").val();
var val2=$("#text2").val();
var data={name:val1,age:val2};
var url1="savedata.php";
var url2="updatedata.php";
$.post(url1,data, function(response){
alert(response);
// so when the form is submited to ur1 this callback function runs and here you can submit it to another url
$.post(url1,data,function(response){alert(response)});
});
}
</script>
i am using $.post() to call a controllers function from view(though i know its bad practice) and in that function i am loading a view and its not working.
this is HTML code : <li id='files' class="active" >My Files</a></li>
this is JS Code :
$("#files").click(function()
{
alert('hi2'); //just for checking
var loadUrl = "/Fast-Docs/index.php/Docs/updatefiles";
$.post(
loadUrl,
{un:"<?php echo $username?>"});
});
this is function in controller:
public function updatefiles()
{
$this->load->model('DocsModel');
$un=$this->input->post('un');
$files=$this->DocsModel->getAllFiles($un);
$data['files']=$files;
$this->load->view('files',$data);
}
You need to actually display your code after the ajax call, ie
$.post(
loadUrl,
{un:"<?php echo $username?>"}
});
Becomes
$.post(
loadUrl,
{un:"<?php echo $username?>"},
function(data) {
$("#yourDiv").html(data);
}
});
I have some tabs whose contents are fully functional parts of my website.
For instance, in my admin area, I have tabs [add/delete album][add photo][delete photo]. I'm technically dividing the admin area via tabs.
I'm using ajax to load the content into these tabs. tab content area is a div.
The view that is inside the tab content area also uses ajax to load stuff.
These are ajax calls that operates inside the tab content area.
Everything works fine as long as the view inside the tab content area stays same or only part of it changes. But when certain interactions inside tab content area return a whole new view, tab content area would not show them.
I know what happens is that this new view that is returned is not passed into the tab content area div.
In firebug, I can see that ajax success function response shows the new view that is returned.
But I do not know how to pass that new view to the tab content area.
I would appreciate it if someone could help me out in explaining how this could be solved or how contents inside tabs are managed in CI.
adminTabsview.php
<ul id="adminTabs">
<li ><?php echo anchor('#album_addDelete', 'Album Add/Delete'); ?></li>
</ul>
<div id="adminTabsContent"></div>
$(document).ready(function(){
$('#adminTabs a').on({
click: function (evt){
evt.preventDefault();
var page = this.hash.substr(1);
adminTabsAjaxCall(page);
}
});
});
function adminTabsAjaxCall ($data){
$.ajax({
type: "POST",
url: "index.php/adminsite_controller/"+ $data + "/",
dataType: "html",
data: $data,
statusCode: {removed}
},
success: adminTabContent
});
function adminTabContent (data){
$('#adminTabsContent').html(data);
}
albumsEditDeleteView.php
(this is a view that gets loaded into the tab contentarea div)
<div id="adminTabsContent">
<div id="albumList">
<ul>
<li>
Asdf
<a class="add" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/add_album/301/Asdf/1/28/0">[ add ]</a>
<a class="delete" href="http://localhost/myPHP/photoalbums/index.php/Albums_Controller/delete_album/301/Asdf/1/28/0">[ delete ]</a>
</li>
</ul>
</div>
</div>
$(document).ready(function(){
$('#albumList').on({
click: function (evt){
evt.preventDefault();
var $clickedElement = evt.target.tagName;
if ($clickedElement == 'A' ){
var urlarray = url.split('/');
$chosen.albumid = urlarray[8];
$chosen.albumname = urlarray[9];
$chosen.lft = urlarray[10];
$chosen.rgt = urlarray[11];
$chosen.nodeDepth = urlarray[12];
if ($class == 'add'){
albumajaxcall($chosen);
}
if ($class == 'delete'){
deleteajaxcall($chosen);
}
}
}
});
});
function albumajaxcall($data){
$.ajax({
type: "POST",
url: "index.php/Adminsite_Controller/add_album/",
dataType: "json",
data: $data,
statusCode: {removed}
},
success: adminTabContent
});
}
function adminTabContent(data){
$('#adminTabsContent').html(data);
}
//heres the view file that has to replace the original view inside
//tabcontent area
//addnode_view.php
<?php echo form_open('Albums_Controller/update_albumSet');?>
<input type="text" name="newAlbum" id="newAlbum" value=""/>
<input type="submit" name="submit" value="Submit" />
<?php echo form_close();?>
<?php
//heres the controller function
function add_album(){
$levelData ['albumid'] = $this->input->post('albumid');
<!-- removed-->
$levelData ['main_content'] = 'addnode_view';
$this->load->view('includes/template', $levelData);
}
//And heres the controller method that loads
//the original page (albumsEditDeleteView.php) - this is the original view
//that gets loaded into the tab- I get stuck when this view
//has to be **totally** replaced through links in the view)
function album_addDelete(){
$allNodes ['myAlbumList'] = $this->Albums_Model->get_albumList();
echo $this->load->view('albumsEditDelete_view', $allNodes);
}
thanx in advance.
basically what you need to do is load whatever new view youll be putting in the tab in the controller function(adminsite_controller/whatever function) that is handling your ajax.
this will basically echo out the view file, which will be viewed as the success variable of your ajax function.
so you have something like this then for the success part of your ajax
success:function(msg){adminTabContent(msg);}
and in your controller in codeigniter you'll load a view the standard way, but since this will be only loading a piece of the page you may need to create a new view file thats just the div that will be there. You will do all your data gathering the same way you would if it wasn't ajax.
$data['some_data'] = $this->some_model->some_function();
$this->load->view('someview', $data);
I'm using Jquery colorbox to implement a popup windows. This pop-up is immediately open and it's working. But for the first loading page, just the first loading, the pop-up can't load the content.
jQuery(document).ready(function defaultPopup(){
var direct = '<?php echo $this->getLayout()->createBlock('cms/block')->setBlockId('popup')->toHtml(); ?>'
if(direct){
jQuery('#popup_home').colorbox({open:true,html:direct,overlayClose:false});
return false;
}
});
<div id="popup_home"></div>
You should escape special characters (<>) in your string.
For the web browser the content of your direct variable is an HTML tag without content.
Try this:
jQuery(document).ready(function defaultPopup(){
var direct = '<?php echo $this->getLayout()->createBlock(\'cms/block\')->setBlockId(\'popup\')->toHtml(); ?>'
direct = $('<div/>').text(direct).text() // escaping characters in the initial string
if(direct){
jQuery('#popup_home').colorbox({open:true,html:direct,overlayClose:false});
return false;
}
});
<div id="popup_home"></div>