JQuery Mobile content only shown on reload - javascript

I have an index.html containing the following:
index.html
<html>
<head>...</head>
<body>
<div data-role="page" id="pageone">
<div data-role="header">
<div data-role="navbar">
<ul>
<li>Page two
</li>
<li>Page three
</li>
</ul>
</div>
</div>
<div data-role="page" id="pagetwo">
</div>
<div data-role="page" id="pagethree">
<div id="headerPageThree" data-role="header">
<div data-role="main">
<div id="anyDiv"></div>
</div>
</div>
</div>
<body>
<html>
As you see, the navbar in index.html links between pagetwo and pagethree.
Furthermore I have an main.js
main.js
$(document).ready(function () {
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
Let's say I open index.html with Chrome. URL is
file:///C:/Users/index.html
Then I click on "Page three" in the navbar. URL is then
file:///C:/Users/index.html#pagethree
The problem is, that the styling of items like the selectmenu looks absolutely strange. It's transparent for example. I add more things than shown in the main.js example and some of them aren't even displayed. Meaning there is nothing where they should be.
But the most curious thing is, that if I press F5 on the page where URL is
file:///C:/Users/index.html#pagethree
, then everything is perfect. I don't get this.
What is the difference between pressing F5 on index.html and pressing F5 on index.html#pagethree?
Can anybody help?
Thanks a lot.

The theme must be set on the element, as it isn't being applied from the parent page. I am not completely sure why though...
This can be done by adding the data-theme attribute when you create the select element:
$(document).ready(function () {
$('<select>').attr(
{'name': 'fuu','id': 'load-fuu',
'data-native-menu':'false',
'data-theme': 'a'
}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('#load-fuu').selectmenu();
});
Lastly, if you would like, a codepen example.
Edit: the point made about the option needing a value for selection is valid (though it will still theme properly after we add data-theme)

Instead of the regular jQuery document.ready, use the jQuery Mobile events like pagecreate;
$(document).on("pagecreate","#pagethree", function(){
$('<select>').attr({'name': 'fuu','id': 'load-fuu',
'data-native-menu': 'false'}).appendTo('#headerPageThree');
$('<option>').attr({'value': '1'}).html('Load').appendTo('#load-fuu');
$('select').selectmenu();
});
If you want your option to be selectable, give it a value attribute.
DEMO

Related

FAQ page shows answers automatically

I'm trying to create a drop down FAQ page with jQuery and for some reason the answers are showing when I load the page.
I have my jQuery script on my page
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
And my javascript page:
<script src="js/threecatsdesign.js"></script>
My full javascript is this:
$(document).ready(function() {
$("#categories h3").click(
function() {
$(this).toggleClass("minus");
if ($(this).attr("class") != "minus") {
$(this).next().hide();
}
else {
$(this).next().show();
}
$("#image").attr("src", "");
// needed for IE so a placeholder isn't displayed for the image
$("#image").attr("style", "display:none;"); }
); // end click
}); // end ready
My HTML is this code:
<main id="categories">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
<h3>If you hold contests on the site, how do I enter?</h3>
<div>
<ul id="java_images">
<li>Go to our page called contests in the nav bar and you will need to fill out the form in order to enter.</li>
</ul>
</div><p>
<h3>I have a tutorial I would like to suggest or put up my own. How do I do that?</h3>
<div>
<ul id="net_images">
<li>Please go fill out our contact form and you will be contaced with 24 hours or less on how to proceed.</li>
</ul>
</div>
You need to add some css to hide the questions to begin with.
<style>
.faq-question div {
display:none;
}
</style>
I suggest putting this in a different file, but inline styles like this work for a quick and dirty solution.
You also should wrap each question and answer in a tag like this
<div class="faq-question">
<h3>What is this site about?</h3>
<div>
<ul id="web_images">
<li>We are a website that holds Photoshop lessons called tutorials. Please read our about me page for more information.</li>
</ul>
</div>
</div>
And change your JS to reflect the change in elements.
$(".faq-question").click(

Changing listview dividers on the fly

I`m learning JQM and have a lot of questions. Not asking if not trying to do many things.
I have a listview element. When page is loaded it sets listview with autodivider alphabetically by name. When you click on the "category" navigation button it sets elements according to its category, grouping. All is fine there.
My problem is when trying to go back clicking on the "names" navigation button nothing changes. Please help.
Here is simplified sample: http://jsfiddle.net/smatisen/v382r874/
<div data-role="page" id="home">
<div data-role="header">
<h1>Test</h1>
<div data-role="navbar">
<ul>
<li>Name</li>
<li>Category</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" class="todo-listview">
<li data-category="cat 1"><h2>Test Name 1</h2></li>
<li data-category="cat 2"><h2>Test Name 2</h2></li>
<li data-category="cat 1"><h2>Test Name 3</h2></li>
</ul>
</div>
</div>
In your jsFiddle code, when you click on the "Name" navigator button, the function that you have written called "showRecordsByName" is called. The code of that looks as follows:
function showRecordsByName()
{
$('.todo-listview').listview({
autodividers: true
});
$('.todo-listview').listview("refresh");
}
And ... that's all it does. It refreshes the listview with class ".todo-listview" but since the content of the list has not changed in any way, it remains exactly as it was before this code was executed.
Thank you for using jsFiddle, it makes examination much easier.
I found solution by adding hide and show elements on button click events and clonin listview with different class name. Not sure if this is elegant, but it is working. http://jsfiddle.net/smatisen/v382r874/2/
$(document).on('click', '#setTableOrder', function(event) {
console.log("DEBUG - SetTableOrder clicked");
$('.byNamelistview').closest('.ui-listview').hide();
$('.todo-listview').closest('.ui-listview').show();
showRecordsByCat();
});
All you need to do is modify the autodividersSelector on the show records by name function to get the first letter of the text:
function showRecordsByName(){
$('.todo-listview').listview({
autodividers: true,
autodividersSelector: function (li) {
var out = li.text().charAt(0);
return out;
}
});
$('.todo-listview').listview("refresh");
}
Updated FIDDLE

How to run javascript code on menu click

I'm creating a squarespace website in which I have a navigation bar.
I would like to add a javascript code as a link in the navigation bar.
The javascript code is the following:
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?4549118"></script>
<script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>
I have the following html code: (I got it with FireBug)
<nav id="main-navigation">
<ul class="cf">
<li class=" active-link">
page1
</li>
<li class="">
page2
</li>
</ul>
</nav>
I cannot edit the code above but I'm able to inject header code.
So, how can I add the javascript code as a third link in the navigation bar?
Thanks a lot!
edit
So I've added the following code
<script>
window.onload=function(){
$('nav ul').append('<li><a onClick="test()" href="javascript:void(0);">Link 3</a></li>');
}
</script>
but I need the original javascript code within the append. I need the actual code to be the link. How do I do that? If you see the javascript in Firefox you'll understand what I mean. I need the actual link it generates in the navigation bar.
Thanks!
window.onload=function(){
$('nav ul').append('<li><a onClick="yourFunction()" href="javascript:void(0);">Link 3</a></li>');
}
Since you specify you don't have direct access to the html. Only the header.
This will add your menu item with a link, that upon click, executes the function yourFunction(). It will add this item as soon as the page loads.
Note: You need jQuery for the above. But it is also possible with raw Js.

YUI menu change page content not whole page

I have divided html page into :
<body>
<div class="menu_container">
<!-- added menu here -->
</div>
<div class="content">
<!-- body content here -->
</div>
</body>
I want to change the content of "content" div when I select menu item.
ie depending on menu item selection div content should change, like what happens in Tabviews.
How can I do so?
The latest versions of YUI include the concept of Pjax which uses History and Ajax to update the page. It's really easy to set up and it'll keep your URLs working. Check out the User Guide: http://yuilibrary.com/yui/docs/pjax/.
You only need to add the yui3-pjax class to each menu that updates the page, apply the Menu plugin, plug the Pjax plugin and have your server return the right HTML content.
<div id="menu-1" class="yui3-menu">
<div class="yui3-menu-content">
<ul>
<li class="yui3-menuitem">
<a class="yui3-menuitem-content yui3-pjax" href="/some-page.html">Some page</a>
</li>
</ul>
</div>
</div>
<div id="content">
<!-- here goes the page content -->
</div>
<script type="text/javascript">
YUI().use('node-menunav', 'pjax-plugin', function (Y) {
Y.one('#menu-1').plug(Y.Plugin.NodeMenuNav);
Y.one('#content').plug(Y.Plugin.Pjax);
});
</script>
This should do the trick:
Y.one('.menu_container').on('click', function(e) {
Y.one('.content').setHTML("<h1>Hello, <em>World</em>!</h1>");
});
Depending on the selector used instead of menu_container, you can update the content accordingly.
EDIT: In fact, delegate is probably better for your needs:
Y.one('.menu_container').delegate('click', onClick, '.menu-item');
http://jsfiddle.net/olan/w2jfh/

Content is being loaded successfully via ajax. but not showing

I am playing around with djax when I click an anchor tag the url changes and when I view the page source it also changes but the page itself did not change its contents even if I view the page source it has change up any ideas why?
Here's a snippet of the markup
<body>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</body>
When I click that the url changes but the result is not showing but when I view the page source it displays the proper markup(or should I say the markup of thankyou.jsp)
here is the code that Is js code
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});
I've had the exact same problem as you and discovered your question while I was looking for an answer. It may be too late for you but according to your markup I believe you ran into the same problem as me which is actually on the issue-list of the plugins Github site (at least right now).
You need to place your updateable div inside a wrapping div. For some reason exchanging content seems not to work for direct children of body. See https://github.com/beezee/djax/issues/22
So your HTML should look like this
<body>
<div id="djaxWrap>
<div id="resultContent" class='updatable'></div>
<ul>
<li><a id="thankyou" href="views/thankyou.jsp?menuId=2"
targets="resultContent">Thank You Message</a></li>
</ul>
</div>
</body>
While jQuery remains the same
jQuery(document).ready(function($) {
$('body').djax('.updatable');
});

Categories