I am using jQuery Mobile and CodeIgniter. In my index page,
http://localhost:8888/hwezemail2/index.php/welcome/student/index
I have a link to another page.
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But when I click the link, it will go to the following and does not display.
http://localhost:8888/hwezemail2/index.php/welcome/student/index#/hwezemail2/
index.php/welcome/student/myhomework/56
Then I refresh the page once the url becomes
http://localhost:8888/hwezemail2/index.php/welcome/student/myhomework/56
But it does not display the content. So I refresh it again then it shows the content.
Once it shows, then I don't have any problem. It is only the first time.
My PHP code it the following.
echo '<a href="'. base_url().'index.php/welcome/student/myhomework/'
.$userid.'" data-role="button" data-inline="true" data-transition="pop"
data-icon="star" data-mini="true" data-theme="c">Missed Homework</a>';
I added data-ajax="false" to the link and the problem was solved.
Related
The bootstrap collapsing navbar links adds "http://" to my link path and it makes the link not work in several browsers. (sit is on surge.sh)
Ok, I'm using react-bootstrap and react-router on my site.
I am deploying to surge.sh for testing purposes.
If I put a normal react-router link like this on the page:
<Link to="/contact" className="link">Contact</Link>
, the link works fine. I check the URL at the top of Safari and it reads:
binginlay.surge.sh
In my bootstrap navbar code I have links like this for he dropdown:
<Navbar collapseOnSelect expand="xl" bg="{background-color}" variant="dark" id="mobile">
<Navbar.Toggle aria-controls="responsive-navbar-nav" id="menuButtonIcon" />
<div id="mobileTitle">
<div>Bingham Inlay Arts</div>
</div>
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="dropdownLinks">
<Nav.Link href="/" id="galleryLink">Gallery</Nav.Link>
<Nav.Link href="/custom" id="customLink">Custom</Nav.Link>
<Nav.Link href="/videos" id="videosLink">Videos</Nav.Link>
<Nav.Link href="/techniques" id="tecniquesLink">Tecniques</Nav.Link>
<Nav.Link href="/bio" id="bioLink">Biography</Nav.Link>
<Nav.Link href="/contact" id="contactLink">Contact</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
The navbar hamburger icon shows up. When clicked, the dropdown menu appears. All the links are shown. Clicking a link give a surge.sh error 'Page not found'.
I check the URL at the top of Safari and it reads:
http://binginlay.surge.sh
The only difference between the link working and not is having the 'http://" added in front of the href link I provided.
How do I get bootstrap to not put 'http://' in front of my links?
Or, is there a workaround anyone can think of?
Thanks in advance
I have a set of individual pages. The footer of each page has a button reading "Sign in" which, when tapped, leads the user to the login page. If the login is successful, the user is moved to a different page; if not, they are returned to the login page.
I want to be able to change the "Sign in" label to "Sign out" and its href to the logout page when a successful login occurs. But I don't seem to be able to reference the element.
The html in the footer element is:
<a class="inout ui-link ui-btn" rel="external" href="login.php">
<span class="ui-btn-inner">
<span class="ui-btn-text">Log in</span>
</span>
</a>
Running a simple jq command such as
$('a.inout').attr('href','logout.php');
when the user arrives at the "successful login" page fails to connect.
I'm missing something - I'd appreciate some illumination.
Thanks/B
You can make the call in the jQM pagebeforeshow event handler, so as each new page is loaded, the footer button will be updated:
$(document).on("pagebeforeshow", "#pageid", function(){
$('a.inout').prop('href','logout.php');
});
I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the panel does not inherit the styles from the default theme (c) nor will it if a theme is defined using data-theme=a. The panel will load an unstyled list view unless I navigate the to #app-menu in the url then the styles appear. Does anyone know why this might be?
<script id="panel-init">
$(function () {
$("body > [data-role='panel']").panel();
});
</script>
<div data-role="panel" id="app-menu" data-display="push" data-position="left">
<ul data-role="listview">
<li data-role="list-divider">Menu</li>
<li data-icon="home" data-bind="click: navTo.bind($data, 'location-map', 'flip', false)">current party</li>
</ul>
</div>
Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.
jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Demo
I'm not allowed to comment but in the demo #Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.
With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors
Anchor
adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.
I need to show loader before the page is opened. If I remove data-ajax="false" is works. But I need to have data-ajax attribute.
<a href="..." data-ajax="false" class="show-page-loading-msg">
Home
</a>
Use $.mobile.loading()
Demo
$.mobile.loading("show");
And
$.mobile.loading("hide");
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});