I have a code in wordpress which generates a horizontal menu. The code is
<? php wp_nav_menu (array ('theme_location' => 'header-menu'));?>
I would like to have a drop down instead, and tried the following code but its not working.
<select name="blog-dropdown" onChange='document.location.href=this.options[this.selectedIndex].value;'>
<option value="">Navigering</option><?php wp_nav_menu( array( 'theme_location' => 'header-menu' ) ); ?></select>
What is wrong? I get an empty drop down list.
i was able to meet the similar requirement by using this WordPress function wp_dropdown_pages($args);
the drop down options contain the page id as value so i used them to redirect user through jquery. my jquery code looks as follows:
$("nav select").change(function() {
var pageID = $(this).find("option:selected").val();
window.location = siteurl + '?p=' + pageID;
});
here siteurl contains my home page URL(which is WordPress blog URL)
u can keep some div like below in the footer.php
<div id="wordpress_blog_url" style="display:none;"><?php bloginfo('template_url'); ?></div>
and then
var siteurl = $('#WordPress').html();
It's empty in your browser but inspect the code (or read the html source).
The wp_nav_menu function create an ul>li>a tags.
http://codex.wordpress.org/Function_Reference/wp_nav_menu.
The option tag needs something like this :
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
Related
I'm using Yii2, activeForm and the Yii2 pjax widget to handle an search form with result list.
But for layout reason, I have to split this package to two parts: the search form, which should be located in the header of the page and the result listing, which should be placed in the middle of the page.
This means it's not possible to do something like that (pseudocode):
Pjax::begin
$form=>activeForm::begin..
ActiveForm::end();
ListView::widget...
Pjax::end()
What I need is placing the activeForm in the layout header, placing the ListView wiget in the center of the page and telling pjax: read the input from the form, load data from Server and replace the clist view.
Is that possible using the build-in functionality of the widgets?
I didn't get it working, maybe I misunderstood the basic concept?
Using gridview (or widget which use searchModel) you could use a separated model for modelSearch in header and show the resul in the gridview palced where you prefer
in this way you need only a pjax block
<?= $this->render('_search', ['model' => $searchModel]); ?>
<?php Pjax::begin(); ?>
<?= GridView::widget([
...
]); ?>
<?php Pjax::end(); ?>
for other soluzione not based on gridview and when you need multiple seprataed pjax block
You could try using named pjax block using a value for id
<?php \yii\widgets\Pjax::begin(['id'=>'pjax-block1']); ?>
....
....
<?php \yii\widgets\Pjax::end(); ?>
<?php \yii\widgets\Pjax::begin(['id'=>'pjax-block2']); ?>
....
....
<?php \yii\widgets\Pjax::end(); ?>
and if you need you could manage specific refresh using jquery
$.pjax.reload({container: '#pjax-block1', async: false});
$.pjax.reload({container: '#pjax-block2', async: false});
If I am on a page and click the respective link in the navigation bar, how can I prevent the link from reloading the page (i.e. do nothing) when I am currently at that location? I still want the link to function, but only do nothing when I am already on that page.
This is by far not the "best" way to do it I'm sure, but can be accomplished with Javascript/JQuery as I've done in the past when required in a mobile web application.
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))) {
$(this).click(function(event) {
event.preventDefault();
});
}
});
If PHP is an option you could try something like this:
\\Run this at top of page
<?php
function getPageName()
{
$filename = $_SERVER["SCRIPT_NAME"];
$breakfile = Explode('/', $filename);
$pfile = $breakfile[count($breakfile) - 1];
return $pfile;
}
?>
\\Modify HTML links to something like this
<?php if(getPageName() == 'FILENAME.html'){ ?>
\\Nav Link Here
<a href="#" >NAV TITLE</a>
<?php }else{ ?>
<a href="FILENAME.html" >NAV TITLE</a>
<?php } ?>
Good day folks,
I am having an issue with Yii2, dunno whats goin on after searching online haven't found an answer.
Updated Question with more details
Here is a summary I am trying to change div content of my view via an ajax call to a controller action – the controller action I am calling does nothing but renders another view file which contains a Jui Tab.
The problem is it loads the home page + my Content at a lower part not processed.
If I visit the URL of the action that the ajax request calls, it displays properly with no issues – When I try to append it to my div on another view, this problem occurs.
Here are screenshots of my view
Page Displaying correctly on visiting URL
https://www.dropbox.com/s/77ovpl6fnznjs1p/Page%20displaying%20correctly%20on%20visiting%20URL.png?dl=0
Updating div with the rendered view displays content in a wrong manner
https://www.dropbox.com/s/6nld4wk1p9pkhz9/Screenshot%20of%20the%20update%20view.png?dl=0
A- Initial View Code
Here is my first view code – Contains a div that you click to fireup the ajax call and another div called content which gets the response
brense.PHP
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?> <div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>
B- Ajax (JS File) `$('#brense').click(function(){
alert('click Received');
$.ajax({
url:'index.php?r=assignments/get-me2',
Type:'GET',
success:function(data){
alert("bombo");
$('#content').append('<div>Appended Content</div>');
$('#content').html(data);
}
});
});
`
C- Controller Action – Called by Ajax
public function actionGetMe2(){
return $this->renderAjax('tab');
}
D- Tab’s View that should be loaded inside the div content
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?>
<div>
<?php echo Tabs::widget(
['items'=>[
['label'=>'One','content'=>'Content 1'],
['label'=>'Two ','content'=>'Content 2'],
],
]
);
?>
</div>
Ok, here is the problem. Yii and Yii2 have an automatic numbering of elements. It has elements that are called w0, w1, w2. In a normal page you have w0 1 time, Yii takes care of that. Because you bring in code with Ajax, the page is actually a new page, so it has it's own w0 element. if you take a look at the code that it has it calls
$('#w0').tabs();
Now that works fine when you look at the page alone, but it will not work ok at all on your page because after inserting the content on the page you have 2 w0 elements. It basically calls the tab on the first one of them (in my test it was the nav bar) and that messes it up. The solution is to give the tabs an id.
So your tab.php file should be:
<?php
use yii\helpers\Html;
use yii\jui\Tabs;
?>
<div>
<?php echo Tabs::widget(
[
'id' => 'tabs',
'items'=>[
['label'=>'One','content'=>'Content 1'],
['label'=>'Two ','content'=>'Content 2'],
],
]
);
?>
</div>
This should solve your problem, but you migth have other problems too. Like loading jquery and jquery ui 2 times, 1 with the main page the other with your ajax. Now STOP using renderAjax you should use renderPartial.
Your code should be: in the main view file:
<?php
use yii\jui\JuiAsset;
JuiAsset::register($this);
?>
<div style="background: blue; cursor: pointer; width:100px;" id="brense">Click ME</div><div id="content">Content</div>
<?php
$script = <<<EOD
$('#brense').click(function(){
alert('click Received');
$.ajax({
url:'index.php?r=site/get-me2',
Type:'GET',
dataType: 'html',
success:function(data){
$('#content').html(data);
$('#tabs').tabs();
}
});
});
EOD;
$this->registerJs($script);
I am registering jquerui ui asset at the top, if you already have it loaded it will not load it again. I have a function that brings over the ajax, and that function also calls $('#tabs').tabs(); to actually create the jquery ui tabs.
Your controller
public function actionGetMe2(){
return $this->renderPartial('tab');
}
Based on cool StackOverflow code, I successfully created a series of dynamically-loaded <SELECT> drop-downs. However, when processing the form (e.g., if there's an error in the submitted information) I need to automatically select the appropriate <OPTION> in the dynamically loaded <SELECT> blocks. I tried a solution that works with static <SELECT> blocks, but it didn't work on my dynamically-loaded block. (I'm hiding/showing <SELECT> blocks as they are needed.) Here's the code:
<?php do things at the beginning of the page ?>
<script>
$(function() {
$('#container_A1').hide();
$"#category_A0").change(function() {
$("#category_A1").load("http://domain.com/loader/"+$("#category_A0").val());
$("#container_A1").show();
});
});
</script>
<?php create the HTML page... ?>
<script><?php
if( isset($_POST['category_A0']) && $_POST['category_A0'] != '' &&
isset($_POST['category_A1']) && $_POST['category_A1'] != ''){ ?>
$(function() {
$("#category_A1").load("http://domain.com/loader/"+$("#category_A0").val());
$("#container_A1").show();
$("#category_A1").val("<?php echo $_POST['category_A1']; ?>"); // NOT WORKING
});
<?php
}
?>
</script>
Everything works fine except the last JQuery line that tries to set the value of the category_A1 <SELECT> block to the option defined in $_POST['category_A1']. That doesn't work. Is the .load() function not complete when the subsequent .val() function is called?
Thanks!
.load is an asynchronous function. jQuery will continue on to the lines while .load is running, so the second $("#category_A1").val("<?php echo $_POST['category_A1']; ?>"); will always be overriden by the result of $("#category_A1").load("http://domain.com/loader/"+$("#category_A0").val());
I'm looking for some pointers. I have one select list with a list of topics;
<select class="editor-select" id="TopicDescription" style="width: 99%">
<option value="test1">test01</option>
<option selected="selected" value="test2" >test02</option>
</select>
and another list of sub topics:
<select class="editor-select" id="SubTopicDescription" style="width: 99%">
<option value="sub1">sub01</option>
<option value="sub2">sub02</option>
</select>
When the first list value changes I would like to be able to refresh the second select list. The problem is I've no idea how to do this. I would like to use AJAX but is it possible? Any suggestions (starting point) for me would be much appreciated.
You will need to create a controller action that will take in a value from the first list and supply a list of options for the second list. Then you can make an ajax call using a Javascript framework such as JQuery:
$('#TopicDescription').change(function() {
// make AJAX call to update the second select list
$.ajax({
url: "path/to/your/action",
data: $('#TopicDescription').val(),
success: function(data){
// do something to your other dropdown
// for example if your getting the data back to fill it with from your post method
$('#SubTopicDescription').html(data); // you get the point
}
});
});
I asked a similar question and it got closed because it was a a duplicate of this apparently. Here is what I asked Using PHP/SQL - How can I click an item in a list to display another list of items assoicated to the clicked item I use a list of links rather than a drop down select.
Anyways I got it working with some help.
I have 2 tables. the "list" table (which has ID and listName fields) and a "listitems" table (which has id,itemName, and parent fields). When you click a list the items that have that list as a parent are displayed in another list next to it.
Here you go. It has deprecated functions and is sloppy but it wil do for now while I learn more. I'm still a beginner but if I get around to cleaning it up I will edit this.
<?php
require ('./includes/connection.inc.php');
/* AJAX request */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest')
{
$query = sprintf('SELECT * FROM listitems WHERE parent=%d',
mysql_real_escape_string($_REQUEST['parent']));
$listitems = mysql_query($query)
or die(mysql_error());
printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
while($info = mysql_fetch_array( $listitems ))
{
echo $info['itemName']."<br />";
}
exit;
}
/* Normal request */
?>
<div id="lists">
<h3>Lists</h3>
<?php
$lists = mysql_query("SELECT * FROM lists")
or die(mysql_error());
while($info = mysql_fetch_array( $lists ))
{
echo ''.$info['listName'].'<br />';
}
?>
</div>
<div id='listitems'>
<?php
$query = sprintf('SELECT * FROM listitems WHERE parent=%d',
mysql_real_escape_string($_REQUEST['parent']));
$listitems = mysql_query($query)
or die(mysql_error());
printf('<h3>List %d Items</h3>', $_REQUEST['parent']);
while($info = mysql_fetch_array( $listitems ))
{
echo $info['itemName']."<br />";
}
?>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>jQuery(function($)){
$('#lists').delegate('a', 'click', function(e){
e.preventDefault();
$('#listitems').load($(this).attr('href'))
});
}
</script>