I am using pagination with ajax to display my records but at the end I got these error in my console whenever I click on the button for next page.
This is the error which I get
jquery-2.2.3.min.js:4 GET http://localhost:8000/ajax/products?page=2 500 (Internal Server Error)
My controller is:
public function index()
{
$hospitals = Hospital::paginate(3);
return View::make('patientPanel/patientHospital')->with('hospitals',$hospitals);
}
}
My routes are
Route::get('/patientPanel/patientHospital',
'patientHospitalController#index');
Route::get('ajax/patienthospital',function(){
$hospitals = Hospital::paginate(3);
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
});
And my view
<section id="team">
<div class="container">
<div class="row">
#foreach($hospitals as $hospital)
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn content" data-
wow-offset="50" data-wow-delay="1.3s">
<div class="team-wrapper">
<img src="/uploads/{{$hospital->picture }}" class="img-responsive" alt="team img 1" style="height: 270px; width: 500px">
<div class="team-des">
<h4>{{$hospital->name}}</h4>
<span>Designer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
</div>
</div>
</div>
#endforeach
</div>
{{$hospitals->links()}}
</div>
</section>
<script type="text/javascript">
$(document).on('click','.pagination a',function(e){
e.preventDefault();
var page = ($(this).attr('href').split('page='))[1];
getProducts(page);
});
function getProducts(page)
{
$.ajax({
url:'ajax/patientHospital?page?page='+page
}).done(function(data){
$('.content').html(data);
location.hash = page;
});
}
</script>
This is my code please tell me what I have done wrong because of which I am getting this error.
in this a syntax error in my route resturn statement
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
write as
return
View::make('/patientPanel/patientHospital')->with('hospitals',$hospitals)->render();
Related
I am trying to enable view / hide feature in my faq questions, but however at the moment to trying to access to my child answers_body with children I got an error . children is not a function, how can I properly access to answers_body in order to change display:none to display:block
<section class="faqs">
<div class="accordion row">
<div class="__block col-lg-7 mx-auto py-3">
<div class="row justify-content-between align-items-start">
<div class="col-11">
<h3 class="__question">
demo
</h3>
</div>
<div class="col-1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" /></svg>
</div>
</div>
<div class="answers_body"> I want to access to this node in order to display it
<div class="col">
<p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
</p>
</div>
</div>
</div>
</section>
$('.__question').click(function(){
var $parent = $(this);
console.log($patern[0].InnerText)
});
If you are trying to do a toggle effect for your faq, then you can try the following.
$('.__question').click(function() {
var parent = $(this).parents('.accordion.row');
if (parent.find('.answers_body').hasClass('answers-active')) {
parent.find('.answers_body').removeClass('answers-active');
} else {
parent.find('.answers_body').addClass('answers-active');
}
});
Here you need to find the parent that is common to both the element you are clicking and the element you need show. Then using .find() method you can target the element and show. Refer the fiddle
UPDATE
Since you said this is not working, I think the parent class that is used for all faq is wrong. If you can update the code, I can help with that. Else you can use the following code.
$('.__question').click(function() {
var parent = $(this).closest('.row').siblings('.answers_body');
if (parent.hasClass('answers-active')) {
parent.removeClass('answers-active');
} else {
parent.addClass('answers-active');
}
});
I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.
http://www.bootply.com/UMwXaOILHv
Missing the closing " on class="card>
Add event to function() so it's function(event)
If you don't need to link anywhere use a div instead of an a tag and you won't need preventDefault.
$('.mobile-icon').on('click', function(event) {
event.preventDefault();
$(this).closest('.card').find('.card-bottom').slideToggle();
// .closest finds the nearest .card ancestor (it goes up)
// .find then finds .card-bottom within the closest .card
});
.mobile-icon {
background-color: black;
width: 100px; height: 40px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<div class="mobile-icon">click me</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
click me
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
fiddle
https://jsfiddle.net/Hastig/m2zaLfnz/
Background:
At the moment I have a static timeline html/css/jQuery. I want to take it a step further so I made a separate admin page that allows a user to enter the informatiom they want and a picture to appear on the timeline on the correct date (which is saved as date in the database)
I do not know how I can get the timeline to generate so that it displays entries from the database rather that the static timeline loader in the html page. So in other words it pulls the heading, the description the date and the image that was uploaded.
My thinking was using a foreach loop to echo the variables inside the tags that are already there. Such as this:
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="$image" alt=""/>
</a>
<h2>'$date'</h2>
<span><?php echo '$about' ?> </span>
<div class="read_more" data-id="12/05/2012">Read more</div>
Sorry this is probably wrong, I'm not sure how to implement it in php.
Load Function:
$(window).load(function() {
// light
$('.tl1').timeline({
openTriggerClass : '.read_more',
startItem : '15/08/2014',
closeText : 'x',
ajaxFailMessage: 'This ajax fail is made on purpose. You can add your own message here, just remember to escape single quotes if you\'re using them.'
});
$('.tl1').on('ajaxLoaded.timeline', function(e){
var height = e.element.height()-60-e.element.find('h2').height();
e.element.find('.timeline_open_content span').css('max-height', height).mCustomScrollbar({
autoHideScrollbar:true,
theme:"light-thin"
});
});
});
Page that loads Timeline:
<div class="timelineLoader">
<img src="images/timeline/loadingAnimation.gif" />
</div>
<!-- BEGIN TIMELINE -->
<div class="timelineFlat tl1">
<div class="item" data-id="04/05/2014" data-description="Lorem ipsum">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/1.jpg" rel="lightbox[timeline]">
<img src="images/videoConferencingnodevices.jpg" width="410" height"275" alt=""/>
</a>
<h2>MAY, 4</h2>
<span>Example</br>
Example
</span>
<div class="read_more" data-id="04/05/2014">Read more</div>
</div>
<div class="item_open" data-id="04/05/2014" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
<div class="item" data-id="12/05/2012" data-description="Lorem ipsum dolor sit">
<a class="image_rollover_bottom con_borderImage" data-description="ZOOM IN" href="images/flat/default/2.jpg" rel="lightbox[timeline]">
<img src="images/collabcompliant.jpg" alt=""/>
</a>
<h2>MAY, 12</h2>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerc...</span>
<div class="read_more" data-id="12/05/2012">Read more</div>
</div>
<div class="item_open" data-id="12/05/2012" data-access="ajax-content-no-image.html">
<div class="item_open_content">
<img class="ajaxloader" src="images/timeline/loadingAnimation.gif" alt="" />
</div>
</div>
Can anyone help me with how I can achieve this outcome and get the data to generate from the database?
I had a static page with a fixed set of images used in data-filtering. The code that worked is this :
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
<li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
<li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
<li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
</ul>
</div>
<article class="portfolio" data-category="photography">
<section class="thumbImage">
<img src="images/gallery/gallery-02-thumb.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<a class="thumbLink" href="images/gallery/gallery-02.jpg" rel="prettyPhoto[gallery1]" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
</div>
</div>
</section>
</article>
<article class="portfolio" data-category="video">
<section class="thumbImage">
<img src="images/gallery/gallery-03-thumb.jpg" alt="" class="fullwidth">
<div class="thumbTextWrap">
<div class="thumbText">
<h3 class="sectionTitle">Gallery Item</h3>
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<a class="thumbLink" href="http://vimeo.com/24169968" rel="prettyPhoto" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac augue at erat hendrerit dictum."><i class="icon-search"></i></a>
</div>
</div>
</section>
</article>
Now I want to load images dynamically from the folder. So I wrote a PHP and ajax code and correctly got all the proper filenames in result. But I dont understand how to add these result in data filter. This is my current code.
<div class="gallerySelector">
<ul class="gallerySelectorList">
<li class="current"><a data-filter="article.portfolio" href="#">All</a></li>
<li><a data-filter="article.portfolio[data-category~='illustration']" href="#">Events</a></li>
<li><a data-filter="article.portfolio[data-category~='photography']" href="#">Entertainment</a></li>
<li><a data-filter="article.portfolio[data-category~='branding']" href="#">Weddings</a></li>
<li><a data-filter="article.portfolio[data-category~='video']" href="#">Video</a></li>
</ul>
</div>
<section class="portfolio_container">
<script type = "text/javascript">
$.ajax({
type: 'POST',
url: 'getThumbs.php',
data: {'folderName' : 'images/gallery/events/thumbs/'},
success: function(msg){
var result = JSON.parse(msg);
var data_html = "";
for(var i in result) {
var $newItems = '<section class="thumbImage"><img src="'+result[i]+'" alt="" class="fullwidth"></section>';
$("#article.portfolio[data-category~='illustration']").append($newItems).isotope('insert', $newItems);
}
}
});
</script>
</section>
How can I make the data-filter dynamic ?
<script type = "text/javascript">
$.ajax({
type: 'POST',
url: 'getThumbs.php',
success: function(msg){
$('.gallerySelectorList').html(msg).show();
}
}
});
</script>
Done using :
var $newElement = $(subHtml);
$('.portfolio_container').isotope('insert', $newElement);
Reference : http://isotope.metafizzy.co/v1/docs/adding-items.html
I have tried so far and made some pretty long code. This seems okay when one is having less then five or ten divs. But what if these are to be implemented on 20 or more than that....?
Can there be any compact form of the code I have tried to write.
( I am some novice in jquery to build complex function but try to write these sorts. )
Any one can help..?
Fiddle is here : http://jsfiddle.net/Ud574/27/
The Code is as follows.
$(document).ready(function(){
$('.button').click(function() {
$('.content').hide(500)
$('.headOne').addClass("classRight");
$('.content1').show(500)
});
$('.button1').click(function() {
$('.content1').hide(500)
$('.headTwo').addClass("classRight");
$('.content2').show(500)
});
$('.button2').click(function() {
$('.content2').hide(500)
$('.headThree').addClass("classRight");
$('.content3').show(500)
});
$('.button3').click(function() {
$('.content3').hide(500)
$('.headFour').addClass("classRight");
$('.buttonLast').click(function() {
$('.content').show(500)
$('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});
});
<doctype html>
<html>
<head>
<title> div collapse</title>
</head>
<body>
<div class="headOne"> Emplyee personal record</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
<div class="button">Click me</div>
<br />
</div>
<div class="headTwo"> Emplyee personal record</div>
<div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam. <br />
<br />
<div class="button1">Click me</div>
</div>
<div class="headThree"> Emplyee personal record</div>
<div class="content2">Aliquam id lectus pellentesque viverra<div class="button2">Click me</div></div>
<div class="headFour"> Emplyee personal record</div>
<div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
<div class="button3">Click me</div><br />
<br />
<div class="button4">Go To Previous section </div></div>
<div class="buttonLast">Go To Previous section </div>
</body>
</html>
If I understand correctly, you need something similar to the Accordion control.
Have a look at jQuery UI Accordion on the following url: http://jqueryui.com/accordion/
Does this sound reasonable to you?
I played with your code a bit and simplified it a lot, using built-in jQuery functions. Here's the HTML:
<div class="closable"> Employee personal record
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum ullamcorper convallis.
</div></div>
<div class="closable"> Employee personal record
<div class="content">Pellentesque felis elit, tempor vitae dapibus felis eu erat. <br />
</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam eget porta. Maecenas viverra mi id lectus pellentesque viverra</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam a magna ac justo accumsan porttitor.</div></div>
<div class="button4">Go To Previous section </div></div>
Here's the Javascript:
$(document).ready(function(){
$('.content').first().show();
$('.closable').click(function() {
if ($(this).find('div').first().is(':visible')){
$(this).find('div').first().hide();
$(this).next().find('div').first().show();
}else{
$(this).find('div').first().show();
}
});
});
And the CSS:
.content{display:block;}
.content{font-weight: normal; border: 0;display:none;}
.closable{font-weight:bold;border:1px solid #CCC;}
Hope this helps!