I have a Bootstrap dropdown list and when the end user select one of the items I want to pass the parameter option indicated on the href attribute to my php file rssnews.inc.php, my dropdown list look like:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="rubChoice">
<li><a href="/rss/core/inc/rssnews.inc.php?option=sport" id="act1" data-item="Sport">Sport</a></li>
<li><a href="/rss/core/inc/rssnews.inc.php?option=politique" id="act2" data-item="Politique">Politique</a></li>
<li><a href="/rss/core/inc/rssnews.inc.php?option=international" id="act3" data-item="International">International</a></li>
<li><a href="/rss/core/inc/rssnews.inc.php?option=divers" id="act4" data-item="Divers">Divers</a></li>
</ul>
</div>
my rssnews.inc.php file look like:
function getFeed()
{
if (isset($_POST['option'])) {
$option = $_POST['option'];
switch ($option) {
case "sport":
$url = 'http://feeds.feedburner.com/GalerieArtciles';
echo 'Du sport'.$url;
break;
case "international":
$url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
echo 'Du international'.$url;
break;
case "politique":
$url = 'http://www.elkhabar.com/feeds/';
echo 'du politique'.$url;
break;
default: $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
break;
}
} else {
echo "there is error";
}
$content = file_get_contents($url);
$data = simplexml_load_string($content);
$articles= array();
foreach( $data->channel->item as $item){
$articles[]=array(
'title' => (string)$item->title,
'description' => (string)$item->description,
'link' => (string)$item->link,
'Date' => (string)$item->pubDate,
);
}
$articalesArr = array();
foreach($articles as $article){
array_push($articalesArr, $article['title']);
}
return json_encode($articles);
}
if(isset($_GET['function']) && $_GET['function'] !=''){
$result = $_GET['function']();
echo json_encode($result);
header("Content-type:application/json");
}
}
To execute this function I have a button with id="start" and when end user click on it make an AJAX call:
<button type="submit" class="btn btn-default btn-success col-xs-3" id="start"> <i class="fa fa-play"></i>Start</button>
the AJAX call:
$('#start').click(function(){
var $item = $('#test');
$.ajax({
type:'GET',
url: '/rss/core/inc/rssnews.inc.php?function=getFeed',
//dataType: 'json',
success: function (data){
var articles = $.parseJSON(data);
$.each (articles, function (key, value) {
$item.append('<div id="item" style="border-bottom:1px dashed #ccc; padding-top:10px; padding-right: 10px;"><ul><li><h4>'+ value.title +'</h4></li> <li>'+ value.description+'</li><li><a href="'+value.link+'">Lire+</a></li></ul>');
console.log('success',data);
});
}
});
});
Once I execute the code, I get this message "there is error". So, How can I transfer successfully a parameter from dropdown list to a php file ? Knowing that the scenario I follow is: 1. End user select a topic with dropdown list 2. the topic choosen correspond to a URL 3. function getFeed() fetch the rss feed 4. when end user click on start button rss is fetched and data displayed on a div element Any Help I appreciate it.
Updated my answer since you edited your question...
This is working now:
rssnews.inc.php
function getFeed()
{
if (isset($_POST['option'])) {
$option = $_POST['option'];
// dont echo strings here since you want to output json at the end
switch ($option) {
case "sport": // this is case sensitive. Your dta-item attributes had capital letter
$url = 'http://feeds.feedburner.com/GalerieArtciles';
//echo 'Du sport'.$url;
break;
case "international":
$url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
//echo 'Du international'.$url;
break;
case "politique":
$url = 'http://www.elkhabar.com/feeds/';
//echo 'du politique'.$url;
break;
default: $url = 'http://feeds.bbci.co.uk/news/rss.xml?edition=int#';
break;
}
} else {
echo "there is error";
}
$content = file_get_contents($url);
$data = simplexml_load_string($content);
$articles= array();
foreach( $data->channel->item as $item){
$articles[]=array(
'title' => (string)$item->title,
'description' => (string)$item->description,
'link' => (string)$item->link,
'Date' => (string)$item->pubDate,
);
}
$articalesArr = array();
foreach($articles as $article){
array_push($articalesArr, $article['title']);
}
return json_encode($articles);
}
if(isset($_GET['function']) && $_GET['function'] !=''){
$result = $_GET['function']();
header("Content-type:application/json"); // this one must be called before echoing
echo json_encode($result);
}
HTML + Javascript code
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1" id="rubChoice">
<li><a role="button" id="act1" data-item="sport">Sport</a></li>
<!-- a link is a link, if you click it, it will open url. So remove href and add role="button" to keep it valid html -->
<li><a role="button" id="act2" data-item="politique">Politique</a></li>
<li><a role="button" id="act3" data-item="international">International</a></li>
<li><a role="button" id="act4" data-item="divers">Divers</a></li>
</ul>
</div>
<div id="test">
</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#rubChoice li').click(function(event){ // more convenient to take the list item as selector
event.preventDefault(); // prevent link opening
var $item = $('#test');
$.ajax({
type:'POST', // change to post
url: './rssnews.inc.php?function=getFeed',
dataType: 'json', // you're expecting json...
data: {"option":$(this).find('a').attr('data-item')},
success: function (data){
var articles = $.parseJSON(data);
$.each (articles, function (key, value) {
$item.append('<div id="item" style="border-bottom:1px dashed #ccc; padding-top:10px; padding-right: 10px;"><ul><li><h4>'+ value.title +'</h4></li> <li>'+ value.description+'</li><li><a href="'+value.link+'">Lire+</a></li></ul>');
console.log('success',data);
});
}
});
});
});
</script>
use GET method instead POST :
if(isset($_GET['option']))
{
$option = $_GET['option'];
...
}