I'm new to the Zend framework and am trying to prevent my application from loading all of the necessary data at once and to wait until a button press. However, I want to be able to toggle between the pages instead of loading a new page. For instance, right now I have
<li>Families</li
This will toggle to the proper page and show the heading that I want it to. However, it will not get the data. I added a second button
<li>Families</li>
This button gets the data, but it redirects to the index tab, not to the #families tab. So I get the proper behavior if I click the second button (which get's the data), then the first button (which moves to the proper tab). How can I combine these into one?
I think you want to doing something like this ?
https://jsfiddle.net/mmfansler/2eTSL/
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
With Javascript :
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
Related
I have a site where I have an availability calendar and I need to show it within a tab table, I have it working to show on both the content and then the tab table! How can I remove it from the content but still show it within the table? I have tried hiding it within the 'Manage Display' section of the content type but it removes it from both
<ul class="nav nav-tabs">
<li class="active">Description</li>
<li>Availability</li>
<li>Pricing Information</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home"><?php if(isset($node->field_cottage_description['und'][0]['value']))
{
print $node->field_cottage_description['und'][0]['value'];
}
?> </div>
<div class="tab-pane" id="profile">
<?php
print $content['field_availability']['#children'] ;
?></div>
<div class="tab-pane" id="messages"><?php if(isset($node->field_price_guide['und'][0]['value']))
{
print $node->field_price_guide['und'][0]['value'];
}
?></div>
</div>
I hope someone can help with my issue! If it's blatantly obvious then don't be afraid to let me know.
The only way to hide it but also keep it able to run is you just close it within the task manager...
if that dont work them you may have to turn it off and back on..
if that dont work them i think you may have to script it to be able to do what you are needing
This may seem like a duplicate question but I have googled and search stackoverflow how an a anchor tag would act like as a submit that would fit on the website that I am trying to do.
I have this code on my right panel navigation:
<div class="content clearfix">
<div class="left_column">
<div class="product_menu">
<? if($_SESSION['logged_in'] == 1) {
$customer_panel = '
<div class="customer_nav">
<h1 class="customer_nav_name">Hello ' . $_SESSION['fname'] . ',</h1>
<ul class="clearfix">
<li>View Profile</li>
<li>Update Information</li>
<li>
<!-- this is where i would like the signout button to act as a submit
i have left it plane to start from scratch -->
Sign Out
</li>
</ul>
</div>';
echo $customer_panel;
}?>
<h2><span>Product Categories</span></h2>
<ul id="prod_nav" class="clearfix">
<li class="top"><span>Processed Meat</span></li>
<li class="top"><span>Ready Made</span></li>
<li class="top"><span>Siomai & Siopao</span></li>
<li class="top"><span>English Pork Snacks</span></li>
</ul>
</div>
And here is my usual code when i use a submit button and not an anchor tag to make a POST method:
if(isset($_POST['signout'])) { // logout button
// Clear and destroy sessions and redirect user to home page url.
$_SESSION = array();
session_destroy();
// Redirect to where the site home page is located -- Eg: localhost
header('Location: http://localhost/');
}
I have read many of this questions but I don't know jQuery or how to achieve this using javascript.
I also tried using this solution:
<form id="signout" action="index.php" method="post">
Sign Out
<input type="hidden" name="signout" value="signout"/>
</form>
that I kinda found from here at stackoverflow.
The problem about this is that if I include the onclick="" , the whole page does not show. but if i remove it, the page comes back to normal. - it doesn't work inside an <li> element.
It might sound basic, but it would help me and other new starters to understand how to make it possible. Thank you very much. :)
Try this,
STEP 1 :
Put the following scripts in your html file.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(function() {
$('.signout-btn').click(function() {
$('#signout').submit();
});
})
</script>
STEP 2 :
Add an attribute class="signout-btn" to anchor tags, which you want to trigger the form submission.
Im trying to make a left side navigation that slides down with sub categories when you click on one of the links.
I've got it to work for the top link only but the others dont work.
In my header file I have some jquery script like this:
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle("slow");
});
});
</script>
in my HTML/PHP i have this code:
<div id="left-prod-nav">
<ul>
<li class="top">Product Categories</li>
<?for($i = 0; $i < $count; $i++)
{?>
<div id="flip"><li><img src="images/arrowright_off.gif" style="padding:0px; margin:0px;float:right;"><?=$result[$i]['categoryName']?></li> </div>
<div id="panel">Hello world!</div>
<?}?>
</ul>
<div class="clear"> </div>
</div>
so the navigation is there...and when I click on the top one, the others slide down so you can see the sub categories for the one I clicked.
however if I click any of the others nothing happens.
has anyone had this problem before or know how to solve it looking at my code?
Thanks
I can assume you are trying to accomplish something like this: http://jsfiddle.net/QQRy8/
$(".flip").click(function(){
$(this).next(".panel").slideToggle("slow");
});
I changed your jQuery to use classes, you should change your PHP to give each div a class name instead of an ID (ID's must be unique!)
This answer is based off this HTML:
<div class="flip">
<li>
cool
</li>
</div>
<div class="panel" style="display: none;">Hello world!</div>
I'm using a form with multiple submits to detect which button is clicked, but the list does not appear properly in a jQuery Mobile menu. I want it to appear nicely like in the JQM docs (click the "Menu" button), but it instead appears like in this picture. (In case it isn't obvious, the black boxes were me editing the names out.) What do I need to do to get it to collapse the submit buttons into a nice list like in the docs?
Navigate to different section
<div data-role="popup" id="navmenu">
<form name="navmenuform" action="X.php" method="post">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<?php foreach ($array as $category) { ?>
<li><input type="submit" name="nav<?php echo $category[0]; ?>" value="Section <?php echo $category[0] . ": " . $category[1]; ?>"></li>
<?php } ?>
</ul>
</form>
</div>
The short answer is don't put submit buttons (at least visible) in listview items.
The problem is that buttons and lisview item's content area have their styling padding, margin, border, etc. Instead of fighting with styling you can just leverage what jQM gives you.
IMHO the simplest way to achieve what you want, if you can live with GET instead of POST, is to ditch the form and populate list items with anchors that href to appropriate urls with parameters and use rel="external" like this:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li><a rel="external" href="X.php?nav1=Section 1:1">Section 1:1</a></li>
<li><a rel="external" href="X.php?nav2=Section 1:2">Section 1:2</a></li>
<li><a rel="external" href="X.php?nav3=Section 1:3">Section 1:3</a></li>
<li><a rel="external" href="X.php?nav4=Section 1:4">Section 1:4</a></li>
</ul>
</div>
If you want to be able to POST your form you can utilize a hidden input and a bit of JS code.
Given that you'll produce the following markup:
<div data-role="popup" id="navmenu" style="min-width:210px;">
<form name="navmenuform" action="X.php" method="post" data-ajax="false">
<ul data-role="listview" data-inset="true">
<li data-role="divider">Navigate to:</li>
<li>Section 1:1</li>
<li>Section 1:2</li>
<li>Section 1:3</li>
<li>Section 1:4</li>
</ul>
<input id="param" type="hidden" name="" value="">
</form>
</div>
Don't forget to put data-ajax="false" on your form tag, otherwise jQM by default will try to submit the form via ajax.
You then use click event on a list item, change name and value in your hidden input and submit the form:
$(document).on("pageinit", "#page1", function(){
$("#navmenu ul li a").click(function(e){
//Prevent default behavior since we need to submit the form instead of following the link
e.preventDefault();
//Change name and value attributes in out hidden input
$("#param").attr("name", $(this).attr("href")).val($(this).text());
//Submit the form
$("form[name=navmenuform]").submit();
});
});
Here is jsFiddle
I have some HTML menus, which I show completely when a user clicks on the head of these menus. I would like to hide these elements when the user clicks outside the menus' area as well as clicking on myaccount section again.
Here is the code,
<li onclick="san()">
<div id="topnav"><a id="displayText" href="#" class="signin">My Acount</a></div>
<div id="topnav1" style="display:none;"><a id="displayText1" href="#">My Acount</a></div>
</li>
<div id="signin_menu" style="display:none;">
<div class="droptop"></div>
<div class="maindropsign">
<div class="header_box">My Acount</div>
<div class="txt_drop">My Profile</div>
<div class="txt_drop">My Backer History</div>
<div class="txt_drop">Edit Settings</div>
<div class="txt_drop_log">Log Out</div>
</div>
<div class="dropbut"></div>
</div>
<script language="javascript">
function san()
{
if(document.getElementById('signin_menu').style.display=='')
{
document.getElementById('signin_menu').style.display='none';
document.getElementById('topnav1').style.display='none';
document.getElementById('topnav').style.display='';
}
else
{
document.getElementById('signin_menu').style.display='';
document.getElementById('topnav1').style.display='';
document.getElementById('topnav').style.display='none';
}
}
</script>
Please help me to do this.
You have to remember the state of the menu first, like set var open = true when its open. Then make a function that 'toggles' and bind that to the onClick event of your menu-head. Then either bind a closeMenu function on an onClick event directly to your whole document or on an onMouseOut from your menu (you can even build a delay here).