ajaxLink and multiple instances of jQuery - ajax

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.

Related

Ask about sub view in laravel blade template

I'm want to ask about sub view in laravel blade the specific situation is as follows.
a view of pages
I want when click to component 1(2), The contents of the child blade file in #section('sub-view') will be rendered in the #yield('sub-view'). and this is the code of the parent blade file.
parent blade file
#extends('layouts.default')
#section('content')
<div class="row">
<div class="col-4">
<ul class="list-unstyled">
<li>
Component 1
</li>
<li>
Component 2
</li>
</ul>
</div>
<div class="col-8">
#yield('sub-view')
</div>
</div>
#endsection
And the code of child blade file.
child blade file
#section('sub-view')
<p>This is component 1</p>
#endsection
and my route file
Route file
Route::group(['prefix' => 'projects'], function () {
Route::get('', function () {
return View::make('pages.project.projects');
});
Route::get('comp1', function () {
return view('pages.project.comp1');
});
Route::get('comp2', function () {
return view('pages.project.comp2');
});
});
Can someone just help me solve this problem?
Thank
I think you need to add an
#extends('parent') // or whatever your parent view is called
to your child view file.
For more info:
https://laravel.com/docs/5.7/blade#template-inheritance

Laravel: Pages not loading properly

This might look useless question, but I'm unable to understand the problem here.
The problems are:
1. When I load the page, first this loads:
And then, after uploading the file:
this page loads:
2. yield('content') is not working. Although #include is working fine.
3. I made master.blade.php, to load the first page of the website. Before it, I was working on the welcome page.But, then changed the work of welcome with the master blade, but when the page gets loaded, it doesn't show anything.
Routes:
Route::get('/',function() {
return view('welcome');
});
Route::group(['middleware' => ['web']], function(){
Route::get('upload',function(){
return view('pages.upload');
});
Route::post('/upload','UploadController#upload');
});
views/pages/upload:
#extends('welcome')
#section('content')
<h2>Upload Files Here</h2>
{!! Form::open(array('url' => '/upload','files'=>true))!!}
{!! Form::file('file') !!}
{!! Form::token() !!}
{!! Form::submit('Upload') !!}
{!! Form::close() !!}
#endsection
views/welcome:
<!DOCTYPE html>
<html lang="en">
<head>
#include('partials._head')
</head>
<body>
#include('partials._nav')
<div class="container">
#include('partials._messages')
#yield('content')
#include('partials._footer')
</div>
#include('partials._javascript')
UploadController/Controllers:
if($request->hasFile('file')){
$file = $request ->file('file');
$fileName = $file->getClientOriginalName();
$destinationPath = config('app.fileDesinationPath').'/'.$fileName;
$uploads = Storage::put($destinationPath,file_get_contents($file- >getRealPath()));
}
return redirect()->to('/upload');
When it's working fine when I used include, to include the upload page in welcome, but the result is like shown in the pictures.Also, When I tried to use the master blade, and exclude the use of the welcome page, by erasing the content of the welcome page, the blank page gets loaded.
What changes do I have to make to make use of master instead of the welcome page? Why are two pages getting loaded? also, why isn't yield('content') not working?
Also, the file which I'm uploading is not getting saved in the public/uploads folder.
Please can anyone help?

How Can I check if Page is single page of Custom Post Type in Wordpress

On the Homepage I have called the content of Custpm Post Type with Ajax with this code
jQuery(document).ready(function($){
$.ajaxSetup({cache:false});
$(".sector_item a").click(function(){
var post_link = $(this).attr("href");
$(".sector_item_content").html("<div class='load' style='position:relative;margin-top:50px;padding-bottom:50px;'><img src='<?php bloginfo("template_url"); ?>/images/ajax-loader.gif'></div>");
$(".sector_item_content").load(post_link);
return false;
});
});
But In the single Page of this same Post Type I need to have another design with content so how I can detect the single page. I tried with Wordpess is_single() function but it doesnt work it displayed anyway in ajax.How Can I fix this?
Here is my single template.php
<?php if(is_singular('sector' )){
echo 'Single page' ;
}else{
while (have_posts() ) : the_post(); ?>
<div class="container single_page_inner">
<div class="row clearfix">
<div class="col-md-10 column" style="float:none;margin:auto;">
<div class="sector_single_title">
<?php the_title();?>
</div>
<div class="single_sector_contentmain"> <?php the_content();?></div>
<div class="single_sector_more">
<img src="<?php bloginfo(template_url);?>/images/single_secormoreline.png"/>
<div class="single_sector_button">
<span class="single_sec_leftline"></span>
<span class="single_sec_rightline"></span>
Click Here To Read More
<div class="more_line"></div>
</div>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
If you want to be able to do different things when your single.php files is loaded from Ajax, you need to tell it somehow when it is getting an Ajax request.
One approach would be to add a parameter to your call, like this:
var post_link = $(this).attr("href") + '?isajax=1';
Then in your single.php file, test for this parameter:
<?php if(!empty($_GET['isajax'])){
// This is Ajax - display in Ajax format
} else {
// This is not Ajax - display in standard single.php format
}
use this:
is_singular('YOUR_POST_TYPE' );
CODEX

ajaxLink in layout has conflict with ajaxLink in view of actions

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>

Wordpress ajax loop refresh on click

I display a random post loop on a page. I'd like to put a "refresh" link to refresh the content of the loop via ajax.
Is this possible?
This is my loop:
<ul id="content-inner" class="thumb-grid clearfix">
<?php query_posts('posts_per_page=20&orderby=rand'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo $my_image_url = get('thumbnail'); ?>" alt="" />
<span class="title"><?php the_title(); ?></span>
<span class="feat"><?php $articletags = strip_tags(get_the_tag_list('',', ',''));echo $articletags;?></span>
</a>
</li>
<?php endwhile;?>
<?php endif; ?>
<?php wp_reset_query(); ?>
</ul>
Thanks
Put the random post code in a div (if you haven't already), and refresh the contents of that div with JQuery...
Something like this should work (but I haven't had time to test)...
In the Head of your page reference JQuery, then use JQuery.Ready to load the first random post (for initial page load):
<head>
<script> /*...reference JQuery...*/ </script>
<script>
jQuery(document).ready(function($) {
$("#randomdiv").html("<?php getRandomPost() ?>");
});
</script>
</head>
<body>
....
<div id="randomdiv">[placeholder text]</div>
<a id="refresh" href="#">click</a>
<!-- Then for the REFRESH:
make sure this script occurs AFTER your div (above) -->
<script>
$(function() {
$("#refresh").click(function(evt) {
$("#randomdiv").html("<?php getRandomPost() ?>");
evt.preventDefault();
})
})
</script>
</body>
So put your entire loop code in a function called getRandomPost() (or something) and place it in your wordpress "functions.php" file..., then just call "$("#randomdiv").html("");" in the head of your page for initial load, then in the body as I've shown for the refresh...

Resources