the issue I encounter is a Jquery accordion which does not collapse anymore after I have invoked an AJAX request. The testpage (index.php) I created has 2 main items called Header 1 and Header 2. Header 1 had 4 subitems called item 1...4 - Header 2 has also 4 subitems called item 5...8.
When clicking the Header items, the accordion opens up and the sub-items appears, so far so good.
Once the header-item is clicked an AJAX GET request is launched towards a second page which is called get_data.php. On that page, I get all the data I need to fill in into a DIV on my index.php page with the ID responsecontainer. As such I can get data without posting on my initial page.
the issue I encounter is that - once the data is displayed on the index.php page - I'm not able anymore to close the Header items of the accordion
A test can be seen at this location : https://smultocht.be/test/
This is how the accordion looks :
<section class="hero">
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="panel-group accordion" id="group_accordion">
<div class="panel panel-default">
<!-- 1 -->
<div class="panel-heading" style="border-width:0px;border-radius:5px; background-color:#CCC">
<h4 class="panel-title" style="color:#FFF">
<a class="main_item" data-toggle="collapse" data-parent="#accordion" href="#collapse1" id="1">header 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
<li class="list-group-item">Item 4</li>
</ul>
</div>
<!-- 2 -->
<div class="panel-heading" style="border-width:0px;border-radius:5px; background-color:#CCC">
<h4 class="panel-title" style="color:#FFF">
<a class="main_item" data-toggle="collapse" data-parent="#accordion" href="#collapse2" id="2">header 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">Item 5</li>
<li class="list-group-item">Item 6</li>
<li class="list-group-item">Item 7</li>
<li class="list-group-item">Item 8</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-9" style="border-color:#000; border-width:0px; border-style:solid;">
<div class="hero__search" >
<div class="hero__search__form">
<form action="#">
<input id="hello" type="text">
<button type="submit" class="site-btn">Zoek</button>
</form>
</div>
<div class="hero__search__phone" >
<div class="hero__search__phone__icon">
<i class="fa fa-phone"></i>
</div>
<div class="hero__search__phone__text" style="padding-top:5px;">
<h4></h4>
</div>
</div>
</div>
<div class="hero__text" id="responsecontainer" style="border-color:#000; border-width:0px; border-style:solid;">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
The AJAX request looks like this :
<script type="text/javascript">
$('.main_item').on('click', function () {
$id = ($(this).attr('id'));
$.ajax({ //create an ajax request
type: "GET",
url: "gather_data.php?id="+$id,
dataType: "html", //expect html to be returned
success: function(response){
$("#responsecontainer").html(response);
}
});
});
</script>
the get_data.php page looks like this :
<?php
$group_item_nr = $_GET['id'];
?>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<?
$art_result = mysqli_query($_SESSION['db'], "SELECT * FROM artikel_tabel WHERE artikel_actief='1' AND artikel_hoofd_tabel_id = ".$group_item_nr." ORDER BY artikel_benaming ASC");
//Show all articles in responsecontainer on index.page
$num_mysql_rows = mysqli_num_rows($art_result);
$counter = 0;
echo('<div class="set-bg row" style="border-color:#000; border-width:0px; border-style:solid; text-align:center;">');
while ($counter < $num_mysql_rows)
{
$art_array = mysqli_fetch_array($art_result);
echo('
<div class="art_item col-md-2 col-sm-3" id="'.$art_array['artikel_id'].'"
style="padding:2px; margin:5px; text-align:center; border-color:#CCC; border-width:1px; border-style:solid; position: relative;">
<img src="fotos_artikelen/'.$art_array['artikel_foto_url'].'">
<br>'.
utf8_decode($art_array['artikel_benaming']."<br>"."(".$art_array['artikel_hoeveelheid']." ".$art_array['artikel_eenheid']).')
'.$is_reclame_yes_no.'
</div>');
$counter++;
}
echo('</div>');
?>
<body>
</body>
any help will be gratefull appreciated, txs
Related
Hi everyone I'm niubbie in php.I have a problem with tab. I would like the tabs on their click to show a different topic. All this using php and calling the db.
My DB:
giorno
pranzo
cena
lunedi
12:00
20:00
martedi
12:00
20:00
mercoledi
12:00
20:00
giovedi
12:00
20:00
venerdi
12:00
20:00
Days are represented by tabs and when I click on a different day I want it to show lunch and dinner of that particular day.
My code:
<section class="big-section bg-light-gray border-top border-color-medium-gray wow animate__fadeIn">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12 text-center margin-six-bottom">
<h6 class="alt-font text-extra-dark-gray font-weight-500">Orari</h6>
</div>
</div>
<div class="row justify-content-center">
<div class="col-12 col-lg-10 tab-style-05">
<div class="tab-box">
<!-- start tab navigation -->
<ul class="nav nav-tabs margin-7-rem-bottom md-margin-5-rem-bottom xs-margin-15px-lr align-items-center justify-content-center font-weight-500 text-uppercase">
<?php
$sql = "SELECT * FROM orari_ristorante ";
$risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
$i=0;
while ($riga = mysql_fetch_assoc($risultato)){
?>
<?php if($i == 0){?>
<li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
<?php }else{?>
<li class="nav-item alt-font"><a class="nav-link" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
<?php }
$i++;
}?>
</ul>
<!-- end tab navigation -->
</div>
<div class="tab-content">
<!-- start tab content -->
<div class="tab-pane med-text fade in active show" id="tab-nine1">
<div class="panel-group accordion-event accordion-style-04" id="accordion1" data-active-icon="icon-feather-minus" data-inactive-icon="icon-feather-plus">
<!-- start accordion item -->
<div class="panel border-color-black-transparent">
<div class="panel-heading">
<?php
$sql = "SELECT pranzo,cena FROM orari_ristorante LIMIT 1";
$risultato = mysql_query($sql) or die(mysql_error()."<br>Impossibile eseguire l'interrogazione");
while ($riga = mysql_fetch_assoc($risultato)){
?>
<span class="panel-time">Pranzo</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<span class="panel-time">Cena</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<?php
}
?>
</div>
</div>
</div>
</div>
<!-- end tab content -->
</div>
</div>
</div>
</div>
</section>
My problem is that each tab shows all the rows and not the specific one for that day
My Problem
You need to ensure you are using unique ID's for your contents and using them in your href of the tab.
Reading your code it looks like each tab is created with the same ID
<li class="nav-item alt-font"><a class="nav-link active" href="#tab-nine1" data-toggle="tab"><?php echo $riga['giorno'];?></a></li>
I would echo out the unique id from the database eg.
href="#tab-<?echo $riga['id'];?>" (or whatever your unique column header is)
Ensure you also echo this out further down when the tab content is being created.
Based on what you are trying to accomplish, if you limit your results to one, you will always only show the first day in the db. Here's how I would change your second while loop.
<?php
$sql = "SELECT * FROM orari_ristorante";
$risultato = mysqli_query($conn, $sql);
$i = 0;
while ($riga = mysqli_fetch_assoc($risultato)){
if($i == 0){
$css = ""
}else{
$css = "display:none"
}
?>
<div class="giorno_tab <?php echo $riga['giorno'] ;?>" style="<?php echo $css ;?>">;
<span class="panel-time">Pranzo</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['pranzo'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
<span class="panel-time">Cena</span>
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1">
<div class="panel-title">
<span class="text-extra-dark-gray d-inline-block font-weight-500"><?php echo $riga['cena'] ;?></span>
</div>
</a>
<span class='prenota'>PRENOTA</span>
</div>
<?php
$i++;}
?>
</div>
It is not the solution, however you can build on top of that to accomplish what you are trying to do. Hopefully that somewhat helps.
Just to explain, I was adding $riga["giorno"] as an kind of ID in the class, however Revbo's answer would give a clearer code when it comes to an ID
I am developing a music streaming site and I am using jplayer to play songs on my site. I customized jplayer to better suit my site.
I created a database for my site and now want to play songs from database by using jplayer.
since I only know little about php and mysql, I can't figure it out how to do that? some how I am able to play a random song from a msql table with jplayer
but I want to generate links of each mp3 file and echoed them in an html lists so when get clicked loaded into jplayer and playing! simple is that!
getsong.php
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
include_once "ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('root','','amr','localhost');
$song = $db->get_row("SELECT * FROM tracks ORDER BY RAND() LIMIT 1");
$artist = $song->album_id;
$songname = $song->name;
$track_url = $song->track_url;
$separator = '|';
echo $track_url.$separator.$artist.$separator.$songname;
}
?>
jplayer-interface.php
> <script type="text/javascript">
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
var data = $.ajax({
url: "../js/getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
});
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
ended: function (event) {
var data = $.ajax({
url: "../js/getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
});
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
swfPath: "../js/jPlayer",
supplied: "mp3, ogv, m4v, oga",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
audioFullScreen: false,
enableRemoveControls: false,
autoPlay: false,
loopOnPrevious: false,
shuffleOnLoop: true,
displayTime: 'slow',
addTime: 'fast',
removeTime: 'fast',
shuffleTime: 'slow'
});
});
</script>
>
>
>
> <footer class="j-player">
<div id="jp_container_1">
<div class="jp-type-playlist">
<div class="playlist_items jp-playlist"><!--start jp-playlist-->
<ul>
<!-- The method Playlist.displayPlaylist() uses this
unordered list -->
<li> </li>
</ul>
</div><!--end jp-playlist-->
<div class="lyrics-contents jp-lyrics"><!--start jp-lyrics-->
<ul>
<!-- The method Playlist.displayPlaylist() uses this unordered
list -->
<li> </li>
</ul><!--end jp-lyrics-->
</div>
<div id="jplayer_N" class="jp-jplayer hide"></div>
<div class="jp-gui">
<div class="jp-video-play hide">
<a class="jp-video-play-icon">play</a>
</div>
<div class="jp-interface">
<div class="jp-controls">
<div><div id="jquery_jplayer_1" class="jp-jplayer">
</div> <!--#jquery_jplayer_1--></div>
<div class="previous-button"><a class="jp-previous"><i
class="arcd-controller-jump-to-start"></i></a></div>
<div class="play-button">
<a class="jp-play"><i class="flaticon-play62"></i>
</a>
<a class="jp-pause hid"><i class="flaticon-pause35">
</i></a>
</div>
<div class="next-button"><a class="jp-next"><i
class="arcd-controller-next"></i></a></div>
<div class="hide"><a class="jp-stop"><i class="fa fa-
stop"></i></a></div>
<div class="jp-current-time"></div>
<div class="jp-progress hidden-692">
<ul class="jp-details">
<li class="jp-title" id="songname" aria-
label="title"> </li>
<li class="jp-artist" id="artist" aria-
label="artist"> </li>
</ul>
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-duration"></div>
<div class="volume-speaker">
<a class="jp-mute" title="mute"><i class="arcd-
music1432"></i></a>
<a class="jp-unmute hid" title="unmute"><i
class="arcd-mute10"></i></a>
</div>
<div class="jp-volume">
<div class="jp-volume-bar vol-bar-bg">
<div class="jp-volume-bar-value vol-bar-seek">
</div>
</div>
</div>
<div class="shuffle-button">
<a class="jp-shuffle" title="shuffle"><i
class="arcd-shuffle shuffle-on"></i></a>
<a class="jp-shuffle-off hid" title="shuffle off"><i
class="arcd-shuffle shuffle-off"></i></a>
</div>
<div class="repeat-button">
<a class="jp-repeat" title="repeat"><i class="arcd-
loop repeat-on"></i></a>
<a class="jp-repeat-off hid" title="repeat off"><i
class="arcd-loop repeat-off"></i></a>
</div>
<div class="playlist-button jp-toggles">
<a class="show-playlist" title="playlist-on"><i
class="arcd-lyrics1"></i></a>
</div>
<div class="lyrics-button">
<a class="jp-show-lyrics" title="Lyrics"><i
class="arcd-note25"></i></a>
</div>
<div class="hide">
<a class="jp-full-screen" title="full screen"><i
class="fa fa-expand"></i></a>
<a class="jp-restore-screen" title="restore screen">
<i class="fa fa-compress"></i></a>
</div>
</div><!--/ .jp-controls1-->
</div><!--/ .jp-interface-->
</div><!--/ .jp-gui-->
<div class="jp-no-solution hide">
<span>Update Required</span>
To play the media you will need to either update your browser to
a recent version or update your <a
href="http://get.adobe.com/flashplayer/"
target="_blank">Flash plugin</a>.
</div>
</div><!--/ .jp-type-playlist-->
</div><!--/ .jp_container_1-->
</footer>
Any help will be really appreciated!
I have a page with a list of Bootstrap collapsion panels. I create these panels dynamically by first querying the database for content, see the code below:
<div class="panel-group" id="accordion">
<?php
$all_emails = "SELECT * FROM sent_emails";
if($result = mysqli_query($link, $all_emails)) {
while($rows = $result->fetch_object()) {
$db = $rows->timestamp;
$timestamp = strtotime($db);
echo '
<div class="panel panel-default m'.date("m", $timestamp).'">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse'.$rows->ai.'">
#'.$rows->ai.' | Sent to: '.$rows->mail_to.' | Subject: '.$rows->mail_subject.' <span class="pull-right">| '.$rows->timestamp.' </span>
</a>
</h4>
</div>
<div id="collapse'.$rows->ai.'" class="panel-collapse collapse">
<div class="panel-body">
'.$rows->mail_message.'
</div>
</div>
</div>
';
}
mysqli_free_result($result);
}
?>
</div>
This works fine and all, but what I want to accomplish next is adding a filter that only show the panels with a certain class in it. As you can see in the code above I create divs with the classes "panel panel-default m('month') which all have a parent div called "panel-group".
WHen I choose a month from the dropdown button as shown below, I take the value/id of the month into jQuery as input for the filter.
<div class="dropdown1">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
Select month
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" id="select1">
<li value="january" id="m1" role="presentation">January</li>
<li value="february" id="m2" role="presentation">February</li>
<li value="march" id="m3" role="presentation">March</li>
<li value="april" id="m4" role="presentation">April</li>
<li value="may" id="m5" role="presentation">May</li>
<li value="june" id="m6" role="presentation">June</li>
<li value="july" id="m7" role="presentation">July</li>
<li value="august" id="m8" role="presentation">August</li>
<li value="september" id="m9" role="presentation">September</li>
<li value="october" id="m10" role="presentation">October</li>
<li value="november" id="m11" role="presentation">November</li>
<li value="december" id="m12" role="presentation">December</li>
</ul>
</div><!--/.dropdown1 -->
So far I have the following jQuery code. Every child div of "panel-group" that doesn't have the class let's say m10 (=October) must be hidden.
<script>
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group").show();
$(".panel-group .panel.panel-default :not(."+this.id+")").hide();
});
});
I have been trying a lot and have searched all over the internet for an answer that satisfies what I need, but no luck so far :(
Hide all, then show the correct one:
$(function(){
$("#select1").on('click', 'li', function(){
$("#dropdownMenu1").text($(this).text());
$("#dropdownMenu1").val($(this).text());
$(".panel-group .panel").hide();
$(".panel-group .panel.panel-default."+this.id).show();
});
});
I am looking to scrape the HTML response for a Google SERP using Simple HTML Dom I need it split into Google Ads, Google Local Listings and normal SERPS the html is below;
Local SERP
<div style="padding-bottom:8px">
<div class="vsc vscl" data-extra="ludocid=14796923074808088664&lumarker=A" sig="zoG">
<div data-ved="0CDkQkgowAA">
<div data-ved="0CDoQkQowAA"> </div>
</div>
<!--m-->
<div class="g" style="padding-top:2px;line-height:18px">
<div style="width:318px;float:left">
<h3 class="r" style="line-height:normal"><a class="l" href="http://www.beaucare.co.uk/" onmousedown="return rwt(this,'','','','1','AFQjCNH2k6BS0xRb2CTmI-lrSbmEXI1F6Q','','0CDsQoAIwAA','','',event)">Beaucare <em>Dry Cleaners</em></a></h3>
<span><cite class="_Ed">www.beaucare.co.uk</cite></span><br>
<div style="display:inline-block;margin-right:5px"><span style="margin-right:5px" class="rtng">3.8</span><span class="star star-s"><span style="width:56px"></span></span></div>
<span style="white-space:nowrap">6 Google reviews</span></div>
<div style="margin-left:26px;width:22px;float:left"><span style="height:38px;padding:0;width:22px"><a class="l" style="border:none;display:block;overflow:hidden;height:30px;width:16px" href="https://maps.google.co.uk/maps?pws=1&num=100&igu=1&ip=0.0.0.0&safe=images&gl=uk&gll=53.41058,-2.97794&gws_rd=ssl&um=1&ie=UTF-8&q=dry+cleaners+twickenham&fb=1&hq=dry+cleaners&hnear=0x48760c93b240c7c3:0xe4a25f60c77e7ed1,Twickenham,+Greater+London&cid=14796923074808088664&sa=X&ei=4731U6_DFurV0QWM1IHoBw&ved=0CD8QrwswAA"><span class="lumi0 lupin" style="display:block;background:url(/images/mappins_grey.png) no-repeat;background-position:0 -35px;background-size:;height:30px;width:16px"></span></a></span></div>
<div style="width:146px;float:left;color:#808080;line-height:18px"><span>146 Heath Rd</span><br>
<span>Twickenham</span><br>
<nobr><span>020 8891 5797</span></nobr></div>
<!--n--></div>
</div>
</div>
Paid SERP
<li class="ads-ad" data-hveid="34">
<h3><a style="display:none" href="http://www.google.co.uk/aclk?sa=L&ai=C-QrY4731U4TTGYm4jAb3q4HwCsWV_qMF9can5boBtI6yLggAEAEoAlD06tiLAWC7vq6D0ArIAQGpAvwJat3my7s-qgQmT9CoSc8LXNEiEfFMf0izXjjIVgr6InoeWMZFZsdEobDCsi4h-PKAB72KqSaQBwGoB6a-Gw&sig=AOD64_2ShDv4EEWhKvQJU3p6FF4V1mqfyg&rct=j&q=&ved=0CCMQ0Qw&adurl=http://ducanerichmond.co.uk/" id="s0p1"></a><b>Dry Cleaning</b> Services - We <b>Dry Clean</b> all types of material‎</h3>
<div class="ads-visurl"><span class="ads-badge">Ad</span><cite>www.ducanerichmond.co.uk/</cite>‎
<div class="action-menu ab_ctl"><a class="_Su ab_button" href="#" id="am-b-1398152331" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="ab.tdd;keydown:ab.hbke;keypress:ab.mskpe" data-ved="0CCQQ7B0"><span class="mn-dwn-arw"></span></a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:ab.hdke;mouseover:ab.hdhne;mouseout:ab.hdhue" data-ved="0CCUQqR8">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem" data-type="why_this_ad">
<div class="action-menu-button" role="menuitem" tabindex="-1" jsaction="am.itemclk" data-ved="0CCYQgRM">Why this ad?</div>
</li>
</ul>
</div>
</div>
<span class="_ME">020 8332 1111</span></div>
<div class="ads-creative">Leather,Suede,Fur,Silk,& Upholstery</div>
<div class="_Fbb">
<div class="_WE"><span class="_YE"></span></div>
<div class="_WE">Westminster House, Kew Road, Richmond, Surrey‎</div>
</div>
</li>
Standard SERP
<li class="g"><!--m-->
<div class="rc" data-hveid="87">
<h3 class="r">Kings <em>Dry Cleaners</em>, <em>Twickenham</em> | Dry Cleaners - Yell</h3>
<div class="s">
<div>
<div class="f kv _UD" style="white-space:nowrap"><cite class="_Ed">www.yell.com/biz/kings-<b>dry</b>-<b>cleaners</b>-<b>twickenham</b>-4477896/</cite>
<div class="action-menu ab_ctl"><a class="_Su ab_button" href="#" id="am-b4" aria-label="Result details" aria-expanded="false" aria-haspopup="true" role="button" jsaction="ab.tdd;keydown:ab.hbke;keypress:ab.mskpe" data-ved="0CFkQ7B0wBA"><span class="mn-dwn-arw"></span></a>
<div class="action-menu-panel ab_dropdown" role="menu" tabindex="-1" jsaction="keydown:ab.hdke;mouseover:ab.hdhne;mouseout:ab.hdhue" data-ved="0CFoQqR8wBA">
<ul>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="http://webcache.googleusercontent.com/search?q=cache:fKpsx3qZnjcJ:www.yell.com/biz/kings-dry-cleaners-twickenham-4477896/+&cd=5&hl=en&ct=clnk&gl=uk" onmousedown="return rwt(this,'','','','5','AFQjCNF_iMCDBEJfF9L_3mW57Z3Tqp0-xg','','0CFsQIDAE','','',event)">Cached</a></li>
<li class="action-menu-item ab_dropdownitem" role="menuitem"><a class="fl" href="/search?pws=1&igu=1&gl=GB&gll=53.41058,-2.97794&near=liverpool&q=related:www.yell.com/biz/kings-dry-cleaners-twickenham-4477896/+dry+cleaners+twickenham&tbo=1&sa=X&ei=4731U6_DFurV0QWM1IHoBw&ved=0CFwQHzAE">Similar</a></li>
</ul>
</div>
</div>
</div>
<div class="f slp"><span class="csb" style="display:inline-block;position:relative;top:1px;background:url(/images/nav_logo195.png) no-repeat -100px -260px;height:13px;width:65px"><span class="csb" style="background:url(/images/nav_logo195.png) no-repeat -100px -275px;height:13px;width:39px"></span></span> Rating: 3 - ‎2 votes</div>
<span class="st"><span class="f">22 Jul 2014 - </span>Find Kings <em>Dry Cleaners</em> in <em>Twickenham</em> on Yell. Get reviews, opening hours and directions .</span></div>
</div>
</div>
<!--n--></li>
I have tried using the following code
foreach($html->find('li .g') as $e) {
echo $e->innertext . '<br><br>';
}
But this does not show any results, I have also searched for ->find('h3 .r') but I still get no result.
I have 3 columns in my app. Each column has an unordered list. I am using Nestable to drag and drop list items between lists. The mark up is as follows:
<div class="row-fluid span12">
<div class="cf nestable-lists">
<div id="pjax-content">
<div class="span4">
<div class="dd" id="nestable1">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="123">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="456">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable2">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="789">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1011">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
<div class="span4">
<div class="dd" id="nestable3">
<ul class="dd-list">
<li class="dd-item dd3-item" data-id="1213">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
<li class="dd-item dd3-item" data-id="1415">
<div class="dd-handle dd3-handle">Drag</div>
<div class="dd3-content">
// list content
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
This works and I can drag and drop list items between each list. The problem is when I implement PJAX.
I have a few links that use PJAX to change the url i.e. each link will update the data or order of the data in each list based on the URL. The data updates within id="pjax-content" accordingly, so it works. This is a snippet of the server side code (using CI):
if (isset($_SERVER["HTTP_X_PJAX"])) {
echo $data['contents'];
} else {
// construct views when not PJAX
}
$data['contents'] contains the html as a string.
I have the following JS libraries too (I have tried removing some of these and the problem still exists):
<script type="text/javascript" src="jquery-1.9.0.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<script type="text/javascript" src="nestable.js"></script>
<script type="text/javascript" src="nestable-settings.js"></script>
<script type="text/javascript" src="bootstrap-editable.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src='jquery.pjax.js'></script>
<script type="text/javascript">
$(document).pjax('[data-pjax] a, a[data-pjax]', '#pjax-content');
$(document).on('pjax:send', function() {
console.log("before send");
});
$(document).on('pjax:complete', function() {
console.log("done!");
});
</script>
The Problem
When I click on one of the links PJAX works, the data is updated, the page doesn't reload and the console shows before send and done - so all is well. However, the nestable items are no longer selectable so a I can't drag and drop them. When I do a full page refresh it works and I can drag and drop.
I have compared the markup before and after (as that was a previous issue) and everything is the same.
Any suggestions on where I am going wrong? Or how to best debug this?
call nestable after your ajax complete function
$(document).on('pjax:complete', function() {
$('#nestable1,#nestable2,#nestable3').nestable();
});