i use of ajaxLink in my view code, the ajaxLink that is in action views work nice but when i put ajaxLink in layout it don`t work.
i saw the executed code and understood there isn`t javascript code for layout ajaxLink!!
i think there is a conflict !!
ajax link code :
<?php echo $this->ajaxLink("change password",
$this->url(array("module"=>"admin" , "controller" => "user" , "ajax" => "on" ,"action" => "changepass"), "" ,false , false),
array('update' => '#container',
'method' => 'GET',
'beforeSend' => 'showLoadingImage();',
'complete' => 'hideLoadingImage();')); ?>
this code creating automatically for every link but this code didn`t create for ajaxlink in layout! :
$('a.ajaxLink1').click(function() { showLoadingImage();$.get('/donyaye_fan_zend/public/admin/link/index/ajax/on', {}, function(data, textStatus) { $('#container').html(data); hideLoadingImage(); }, 'html');return false; });
what`s wrong?
In your layout file (layout.phtml) place line : <?php echo $this->jQuery(); ?> just before </body> tag, not between <head>...</head> tags.
The layout file should look like this:
<head>
...
</head>
<body>
<div id="some_div>
...
</div>
<?php echo $this->jQuery(); ?> // <-- add this line here not in <head> section
</body>
Related
In one of my project in wordpress, I tried to create a custom theme options with different fields. but I face an issue when I tried to load a form using ajax with text editor . The rendered editor comes with style and javascript issues, ie the text color becomes white and editor buttons were not visible, also the text and visual toggle not working. I think I need to run some javascript or I miss some js file which could be called in the rendered html, I am attaching the screenshot with this message ang my rendering html code is as follow, This form is renered as inner html in admin area
<form id="bgntheme_option_form" action="#" method="post">
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array( 'textarea_name' => 'bgntheme_home_header' );
wp_editor( $content, $editor_id, $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
</ul>
</form>
You have to add the following snippet to your ajax success method:
tinymce.execCommand('mceRemoveEditor', true, 'your_editor_id' );
tinymce.execCommand('mceAddEditor', true, 'your_editor_id' );
please replace your_editor_id with id of editor.
UPDATE
You can try this:
1) HTML
<ul>
<li class="li-first">
<div class="option-field">Home Page Header</div>
<div class="option-value">
<?php
$settings = array('media_buttons' => false, 'textarea_name' => 'bgntheme_home_header' );
wp_editor( '', 'my_editor', $settings );
?>
<p class="field-info">Header textarea for homepage.</p>
</div>
<div class="clear-both"></div>
</li>
<li class="update-form">
<button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>
</li>
2) JS
success : function( response ) {
jQuery('#content-wrapper-inner').html(response);
jQuery('#content-wrapper-inner').fadeIn("slow",function() {
tinymce.execCommand('mceRemoveEditor', true, 'my_editor' );
tinymce.execCommand('mceAddEditor', true, 'my_editor' );
});
}
I had your problem and I solved it.
In your call back function in your javascript file add this code:
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
hear is an example :
$.ajax({
url: data.ajax_url,
type: 'post',
datatype: 'json',
success : function (response) {
$('.row').append(String(response));
quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
}
});
I am working in Zend-Framework. I have a layout something like this:
<html>
<head>
<script>
function myBeforeSendCallbackJsFunc() {$('#content-loading').show();}
function myCompleteCallbackJsFunc() {$('#content-loading').hide();}
</script>
</head>
<body>
<div id="menu">
<?php
echo $this->ajaxLink("<li>MENU 1</li>", '/controllertest/actionindex', array('update' => '#content', 'beforeSend' => 'myBeforeSendCallbackJsFunc();', 'complete' => 'myCompleteCallbackJsFunc()'), array('format' => 'ajax'));
?>
</div>
<div id="content">
</div>
<?php echo $this->jQuery()->enable()->uiEnable(); ?>
</body>
</html>
In this case the ajaxLink function works perfectly.
I fire the MENU 1 and '#content' gets the '/controllertest/actionindex' content.
But if exists ajaxLink functions inside the'/controllertest/actionindex' it only works if I include again:
<?php echo $this->jQuery()->enable()->uiEnable(); ?>
Why?
When calling the AjaxLink helper repeatedly in some inclusions via ajax I was generating multiple instances of the ajax function created by this helper.
When called asynchronously, the AjaxLink creates confusion.
The solution: don't use AjaxLink, and create a global and unique ajax function.
I have a portfolio page with quicksand, which is working perfectly.
To add some more fun, I added prettyPhoto to it, working perfectly too.
But now I added a hover effect to the images. It is working, but when I sort with the filter, the hover effect has gone. I don't even see it working in Firebug.
Loading .js files -> jquery, quicksand, prettyphoto and then the hover function.
The php file (wordpress) looks like this:
<script type='text/javascript'>
$(document).ready(function(){
$("img").hover(
function() {
$(this).stop().animate({"opacity": "0.8"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
}
);
});
</script>
The rest of the php file:
<!-- #content BEGIN -->
<div id="contentport" class="clearfix">
<ul class="filter clearfix">
<li><strong>Filter:</strong></li>
<li class="active">All</li>
xxxx php magic xxxx
<ul class="filterable-grid clearfix">
xxxx php magic xxxx
<li data-id="id-<?php echo $count; ?>" data-type="<?php foreach ($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)). ' '; } ?>">
<?php
// Check if wordpress supports featured images, and if so output the thumbnail
if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) :
?>
<?php // Output the featured image ?>
<a rel="prettyPhoto[gallery]" href="<?php echo $large_image ?>"><?php the_post_thumbnail('portfolio'); ?></a>
<?php endif; ?>
<?php // Output the title of each portfolio item ?>
<p><?php echo get_the_title(); ?></p>
</li>
xxxx php magic xxxx
</ul>
xxxx php magic xxxx
</div>
I hope you have everything you need, I already looked at those links, but I really don't know what to do ...
hover effect with quicksand plugin
jquery live hover
How to apply jQuery quicksand (sort) without losing a jQuery based portfolio hover?
jQuery quicksand plugin with .click method
Thanks in advance !
Almost solved, for the jQuery, this code works. But the magnifying glass still doesn't work.
(function($){})(window.jQuery);
$(document).ready(function(){
$('#contentport > ul > li').live('mouseenter', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport > ul > li').live('mouseleave', function(){
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
I'm not sure if this will help with your magnifying glass issue, but after suffering with some false starts on this problem myself (namely QuickSand killing my rollover functions), I found the solution for me was to specify the selector inside the .on() function call:
$(document).ready(function(){
$('#contentport').on('mouseenter', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '0.8'}, {duration:500});
});
$('#contentport').on('mouseleave', 'ul li', function() {
$(this).find('img.attachment-portfolio').stop(true, true).animate({'opacity': '1'}, {duration:500});
});
});
That seemed to solve the issue for me where simply using $('#contentport ul li').on('mouseenter', function() {... didn't work with the cloned elements.
Fingers crossed that's helpful.
I'm a newbie to ajax and trying to integrate it in to my CodeIgniter app. Basically, when the form is successful I would like the original template to be hidden and the new one shown? It currently displays both, how could I amend my code? Thanks in advance!
I have tried adding a redirect to my controller with no such luck :(
view:
$('#submit').click(function(){
$.post("<?php echo base_url(); ?>part-two",
$("form").serialize(),
function(result){
$("#error_message").html(result);
}, "html"
);
});
controller:
if($this->form_validation->run() == FALSE){
echo validation_errors();
} else {
echo "success";
$data['content'] = "part_two";
$this->load->view('template', $data);
}
OK, I think that I know what you want...
View html markup:
<div class="container">
<form id="form">
...
</form>
<div class="error_message">
</div>
</div>
Script:
$('#submit').click(function(){
$.post("<?php echo base_url(); ?>part-two",
$("form").serialize(),
function(result){
// clear the content and assing the result
$("#form").remove();
$("#error_message").html(result);
}, "html"
);
});
I cant help you so much. Would you please use firebug to see received data of post request ?
Since both are displaying so i think post request is okay. Problem is in your view file.
I have this fairly basic code within a $(document).ready listener:
$('#contact-us-button').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
$('.get-a-quote').fancybox({
padding: 20,
beforeLoad: function () {
$("#slideshow").data('nivoslider').stop();
},
afterClose: function () {
$("#slideshow").data('nivoslider').start();
}
});
Whereas the HTML:
<a id="contact-us-button" href="impianto/get-a-quote-form.php"></a>
[...]
<div class="product">
<h1>Ferrari California</h1>
<a href="dettaglio.php?id=7">
<img src="images/showcase/ferrari-california-showcase.jpg" />
</a>
<a class="get-a-quote" href="impianto/get-a-quote-form.php?id=7"></a>
</div>
Fancybox binds correctly but shows that message in place of my form. There are no conflicts among class names and IDs. Any ideas? Please note that Fancybox 1.3.4 behaves correctly with about the same code (different options).
Try adding the fancybox.ajax class to your links like
<a id="contact-us-button" class="fancybox.ajax" href="impianto/get-a-quote-form.php"></a>
and
<a class="get-a-quote fancybox.ajax" href="impianto/get-a-quote-form.php?id=7"></a>
Try using the property 'type' : 'iframe' if you want it to show another web page's content inside it like a window to the other page.
Something like this in your < head > tag:
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox({
'type' : 'iframe'
});
});
</script>
Also it might be obvious but if not... With this specific javascript enabling "fancybox" class links as popup links, your link to fire a popup would have class set as matching the class name in the javascript above, something like:
Link