Jquery mobile dynamic fields not applying styles? - javascript

Hi i have creates a html page that creates dynamic fields and when i add them to the listview, it doesnt apply the jquery mobile themes.
here is my javascript:
//Dynamically load data fields for items
$(document).on('pagebeforeshow', '#claimPagefields', function(){
//trigger a create event
$('#claimPagefield').trigger('create');
loadFields();
});
Here is my HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<link href="src/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="src/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="src/jquery.mobile.iscrollview-pull.css" />
<script src="src/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="src/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="src/iscroll.js"></script>
<script src="src/jquery.mobile.iscrollview.js"></script>
<script src="src/script/itemFields.js"></script>
<link rel="stylesheet" href="src/jquery.ui.datepicker.mobile.css" />
<script src="src/jquery.ui.datepicker.js"></script>
<script src="src/jquery.ui.datepicker.mobile.js"></script>
</head>
<body>
<div data-role="page" id="claimPagefields">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="claimTypelistfields" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">Title</h2>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save</li>
</ul>
</div>
</div>
</div>
</body>
</html>
It doesnt apply the theme on the input fields itself which typically look like this when i am adding it
listItem = '<li id="reasons">' +
'<h3>Reasons:</h3>' +
'<div data-role="fieldcontain">' +
'<input type="text" name="reasons" id="textFieldReasons" value="" />' +
'</div>' +
'</li>';
$('#claimTypelistfields').append(listItem);
$('#claimTypelistfields').listview('refresh');
If i manually add this snippet of code to the above input field manually
style="width:100%"
It works and resizes the width only but i am trying to see if there is way to apply it once instead of having to apply the themes all manually for each field!
Thanks

This is because:
$('#claimTypelistfields').listview('refresh');
will enhance only listview widget and only it. Every non-listview widget added to a listview will not be enhanced.
Basically you will make it work if you use this line:
$('#claimPagefield').trigger('pagecreate');
after the content has been added.
One more thing, in your current code, this line:
$('#claimPagefield').trigger('create');
will not do anything, mainly because you are calling it before new content is appended and second thing, because #claimPagefield is a page id you must use pagecreate instead of create. Create works only on content div.

I finally found the solution.
this code below did the trick as you need to first refrsh and then call teh create trigger all in one line
$('#claimProfileListView').listview('refresh').trigger("create");

Related

Lightbox Not Working Onto (Any)Browser

I watched a tutorial on a simple lightbox, and I am trying to figure out why it is not working for me. I am using http://lokeshdhakar.com/ version of the lightbox.
I do not know what the issue is. When I type it through the text editor I am using it just opens up the image in a new window. But just now in the code.io , it opened it up as the proper lightbox. I am so confused on what is happening.
Here is my code.
<head>
<meta charset="utf-8">
<title> Fine Art</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles5.css" rel="stylesheet" type="text/css">
<link href="css/lightbox.css" rel="stylesheet" type="text/css">
<link href="fineart.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?
family=Roboto:400,100,400italic,500,900,300,500italic,900italic"
rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/lightbox.min.js"></script>
</head>
<body>
<h1 class="fineart"> B & W Photo </h1>
<div id="page"><!--beginning of sidebar-->
<div id="sidebar">
<div><img id="logo" src="img/logo.png"/>
</div>
<div>
<ul class="sb">
<li > Home </li>
<li > About </li>
<li > Works </li>
<li > Resume </li>
</ul>
</div>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</div><!--end of sidebar-->
<div class="container-a4">
<ul class="caption-style-4">
<li>
<img src="http://i68.tinypic.com/2re64y0.jpg" alt="blur">
<div class="caption">
<div class="blur"></div>
<div class="caption-text">
<h1><a href="http://i63.tinypic.com/9lhaj9.jpg" data-
lightbox="photos">Blur</a></h1>
<p> Photo Series </p>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
(here's the rest)
http://codepen.io/kasiariele/pen/jbjVgr
Like I said, I'm not sure why its working in the site editor, but when I save and refresh onto the browser it opens the image on a new page instead of the lightbox. Please help!
You need to order your javascript libraries correctly.
You are loading lightbox.min.js before loading jquery.min.js (which is a dependency for how you are using lightbox).
Here is a direct quote from the lightbox website.
If you already use jQuery on your page, make sure it is loaded before lightbox.js. jQuery 1.7 or greater is required.
You should also load all of your scripts together right before your </body> closing tag, like so:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="js/lightbox.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>

name conflict between popbox.css and bootstrap.css

I noticed that there is a problem if both popbox.css and bootstrap.css are used. Does anybody know a solution for that?
Here is a fiddle from somebody to show how popbox works.
http://jsfiddle.net/kbwood/sV4bY/
If you load the bootstrap library additional to the popbox libraries
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
it will not work anymore.
Here is a not working example. Remove the bootstrap.min.css file to make it work
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
The problem is due to the collapse class you have applied to the div. In Bootstrap, these are hidden by default as it's part of the accordion feature. Either remove the class from that div or use a different name for it.
Example: http://jsfiddle.net/tpjjsqg6/

<head> JS scripts are not executing

I'm using JQuery Mobile, and now I would like to navigate through pages with the minimum of loading amount of scripts everytime a page is being loaded, I mean that I would like to import only ONCE all the general scripts of all the pages (JQuery.js, jquery_mobile.js, main.js etc...) and
So I have an index.html with the following code :
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<title>Hybrid App</title>
<link rel="stylesheet" href="jqueryMobile/jquery.mobile-1.4.4.css" />
<link rel="stylesheet" href="jqueryMobile/jquery.mobile.icons-1.4.4.css" />
<link rel="stylesheet" href="css/jquery.mmenu.css" />
<link rel="stylesheet" href="css/main.css" />
<script>window.$ = window.jQuery = WLJQ;</script>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="jqueryMobile/jquery.mobile-1.4.4.js"></script>
<script type="text/javascript" src="js/jquery.mmenu.min.js"></script>
<script type="text/javascript" src="js/initOptions.js"></script>
<script type="text/javascript" src="sharedResources/customersObject.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/messages.js"></script>
</head>
<body style="display: none;">
<div data-role="page" id="page">
<link rel="stylesheet" href="css/pages/splash-view.css" />
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="splash-wrapper">
<div class="splash-content">
Login
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/splash-view.js"></script>
</div>
</body>
so when clicking on the link I go to an external HTML file located in : pages/faqs-view.html with the following code :
<div data-role="page" id="page" data-url="pages/faqs-view.html">
<link rel="stylesheet" href="css/pages/faqs-view.css">
<div data-role="header" id="header" data-position="fixed"></div>
<div data-role="content" id="pageContent">
<div id="faqs-wrapper">
<div class="faqs-content">
<div data-role="collapsible-set" data-corners="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d" id="faq-set">
</div>
</div>
</div>
</div>
<div data-role="footer" id="footer" data-position="fixed"></div>
<nav id="menu">
<p class="employee-name">Welcome, Ali</p>
<ul data-role="listview" data-inset="true">
<!-- list of items in the slide sidebar menu (called drawer menu in Andorid -->
</ul>
</nav>
<script src="js/pages/faqs-view.js"></script>
The problem is that when loading the faqs-view.html page, I can see that none of the scripts included in the <head> are being executed, I have tried to put them after the <body> tag, but it's the same, BUT the CSS files are being interpreted.
How can I achieve that ? Thank you.
Worklight-based applications are Single Page Applications. This means you should never navigate away from the index.html. Doing so will cause the app to lose its context to the Worklight framework, thus it will begin to fail.
If you'd like to add multi-page navigation to the application, you can do so using the API provided by 3rd-party frameworks. Here you are using jQuery Mobile.
You've changed the loading order of scripts. You shouldn't.
Use the Worklight Studio wizard in order to create an app template with jQuery Mobile (new project > new hybrid application (click on "configure javascript libraries" > select the library you would like to add))
Keep initOptions.js, main.js and messages.js where they are by default, at the bottom
The index.html you get is your template with jQuery Mobile
If you want to replace the bundled jQuery, you need to comment out (slide #6) the following script tag: <script>window.$ = window.jQuery = WLJQ;</script>. Worklight is bundled with jQuery 1.9.x.
For a bare-bones example of multi-page navigation in a Worklight-based application, using jQuery Mobile, take a look at this project.
As you navigate between pages, you only replace the contents of the data-role="page". The scripts have already been loaded. You can load additional scripts per where required when loading a specific page.
They are executed in the order you put them on the page.
window.$ = window.jQuery = WLJQ;
Cannot be executed before jQuery is included.
Edit:
When you load a new page without the header it's clear that it won't be excecuted because it is not there.
When you replace html in your page you should look at the "on" function for events.

Javascript doesnt run when navigating through listview , jquery mobile

I am developing a jquery mobile website and i have some problems running javascript code.
I have a home page , index.html , which is basically a listview to navigate to various html pages. I use the single-page structure for my pages , that means every 1 html file contains 1 page. Now from the home page , i navigate to another page where i am using a persistent NavBar with a horizontal button with 2 options. One is photos and the other is multimedia.
For the photos i am using the Javascript FB API , to download the photos from a FB Page and then with the PhotoSwipe Plugin i present them to the user.
The problem..
If i run the photos.html page , it will work well and load the albums. There are 2 things that my javascript does. 1) Use FB API to get albums, photos , cover photos etc.. 2) Dynamically create a listview with this albums and their photos. In this case both work great!
However when i am in my index.html and i navigate through the listview to the photos.html (photos is the default chosen button from the persisent NavBar) the Javascript code doesnt work. Like is not called at all..
The index.html looks like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
</head>
<body>
<div data-role="page" id="home" data-theme="a">
<!--
<div data-role="header">
<h1>Application Title</h1>
</div>
-->
<div data-role="content">
<h2 id="banner">Joven Mobile</h2>
<div class="main_menu">
<ul data-inset="true" data-role="listview">
<li><img src="themes/icons/news.png" alt="Information" class="ui-li-icon">Esen</li>
<li><img src="themes/icons/research.png" alt="Information" class="ui-li-icon">Laen</li>
<li><img src="themes/icons/staff.png" alt="Information" class="ui-li-icon">Multimedia</li>
<li><img src="themes/icons/students.png" alt="Information" class="ui-li-icon">Sanen</li>
</ul>
</div>
</div>
<!--
<div data-role="footer">
<h4>Page Footer</h4>
</div>
-->
</div>
</body>
</html>
The photos.html looks like :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" rel="stylesheet" type="text/css"/>-->
<link rel="stylesheet" href="themes/EspacioJoven.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<link rel="stylesheet" href="themes/custom.css" />
<!-- Needed from PhotoSwipe Plugin -->
<link href="photoSwipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
<link href="photoSwipe/photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="photoSwipe/klass.min.js"></script>
<script type="text/javascript" src="photoSwipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type='text/javascript' src='photoSwipe/photoSwipeCall.js'></script>
<!-- Needed from PhotoSwipe Plugin -->
</head>
<body>
<div data-role="page" id="photos" data-theme="a" data-add-back-btn="true" data-back-btn-text="Back">
<div data-role="header" data-id="fixedNav" data-position="fixed">
<h1>Application Title</h1>
Back
<div data-role="navbar">
<ul>
<li>Photos</li>
<li>Videos</li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true" class="albums">
<!-- Here the albums are created through javascript (createAlbums.js) -->
</ul>
<button type="button" id="loadMoreAlbums">More Albums...</button>
</div><!-- /content -->
</div><!-- /page -->
<div id="fb-root"></div>
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</body>
</html>
As you see i call my javascript in the end. Any ideas why its never called? If i refresh the page , that means run the photos.html , it will load normally.
Actually i also look at the "elements" table from the debugger. When im in the index.html page the html elements seem all correct. When i do the transition though to the photos.html page , by looking at the elements table i see that they dont change! The title does change but the rest stays the same which is incredible?! How on earth can that happen? It looks like is the same page , with the same css and javascript sources , but should be different! As you see i use photoSwipe javascript , css etc! Only if i reload the page the elements are correct. Please any ideas? I have no idea what is happening here.
Also for some reason i get a 304 Status , Not Modified through the transition , from one page to another.
The reason for this is because when you navigate to a page in jQuery Mobile it by defaults will try and pull the JQM page (data-role="page" (if there is no data-role='page' then it will pull the body)) via ajax and attaches it to the current page's DOM, the thing is it will only pull the JQM page (or body if there isn't any) and ignore everything (aside from the title) outside of it meaning your JavaScript is not going to get called.
When you refresh the page then a normal HTTP call is made and the entire page is loaded so your code is executed.
In order to have your JavaScript called you need to either have the relevant script's on your first page or you can have it withing your JQM page wrapper and it will then be pulled along with it.
<div data-role="page" id="photos" data-theme="a"
data-add-back-btn="true" data-back-btn-text="Back">
....
<script type='text/javascript' src='javascript/createAlbums3.js'></script>
</div><!-- /page -->
Have a look at the following Q&A from the official docs for more details.

jquery mobile didn't append div to content

I have a script which should append some element to the Content div, but it didn't work.
As you see the content of the "messageBox" is arrives from a php file which select the mysql table and the data from it.
Here is the JS file's content:
function getWallMsg(){
$.getJSON('SELECT_uzenofal.php?callback=?',function(data) {
data.forEach(function(e){
$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
});
});
}
$(document).ready(function(){
drawNavbar();
getWallMsg();
});
And the html:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" >
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<!-- Home -->
<div data-role="page" id="fal">
<!-- header -->
<div data-role="header">
<h3>
Üzenőfal
</h3>
</div>
<!-- content -->
<div data-role="content" id="posts">
</div>
<!-- footer -->
<div class="nav" data-role="footer" data-position="fixed" data-theme="a"></div>
</div>
</body>
What should I do?
This should be changed:
$(document).ready(function(){
drawNavbar();
getWallMsg();
});
to this:
$(document).on('pagebeforeshow', '#fal', function(){
drawNavbar();
getWallMsg();
});
Basically document ready should not be used with jQuery Mobile, to find out more about this take a look at this ARTICLE, to be transparent it is my personal blog. Or find it HERE.
Basically you are trying to append it on document ready when page content is not loaded into the DOM. Instead proper jQuery Mobile page event, like pagebeforeshow, should be used.
EDIT :
You were adding an incorrect id to the pagebeforeshow even. It should work now.
could not comment so posting as answer.
$('#posts').append($('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>'));
have you tried changing above to
$('#posts').append('<div class="messageBox">'+'<img src="img/profilok/'+e.kep+'"/>'+'<p class="name">'+e.nev+'</p>'+'<p>'+e.uzenet+'</p>'+'<p class="time">'+e.ido+'</p>'+'</div>');

Categories