I'm developing my first application in jqm.
I have a unique index.php containing a lot of blocks of code like this
<div data-role="page" id="scheda7">
<div data-role="header" class="ui-bar-b">
<h1><?php $qry_nomeScheda7 = "select * from nomeScheda where id='7'"; $rs_nomeScheda7 = connetti($qry_nomeScheda7); $valore7 = mysql_fetch_array($rs_nomeScheda7); echo $valore7[nomeScheda];
?></h1>
</div>
<?php include 'scheda7.php'; ?>
<?php include 'footer.php'; ?>
</div>
one for each page of my application.
For each page I have a separate schedaN.php containing its own html and javascript. Now what happens to me is that some page load correctly, while others remain stuck to the loading (the spin wheel keep turn and turning). The pages not loading are not ever the same... Maybe I only move a page up or down in the index and it begin to work or stop to.
So I was guessing: I noticed that pages seems to work while they are less than seven... There's some limit to the number of data role page you can include in a application??
Instead of doing multiple database queries like this one,
<?php $qry_nomeScheda7 = "select * from nomeScheda where id='7'"; $rs_nomeScheda7 = connetti($qry_nomeScheda7); $valore7 = mysql_fetch_array($rs_nomeScheda7); echo $valore7[nomeScheda];?>
I'd suggest to execute only one database query which fetches all the info you need. This should save execution time and probably solve your problem.
Problem solved! There was some html line that was not supposed to be there.
The interesting part is that the page containing the error (a div left unclosed) was correctly loaded, while the next was not. So i learned that when there's no javascript or php error is a good idea to use some validation tool of html.
In this specific case, i used http://validator.w3.org/#validate_by_uri+with_options to validate html and got where the error was. Thank you all and hope this is useful to someone.
Related
I am having trouble with only firefox. My page shows a tree structure that is loaded via ajax as the user clicks on the nodes they want to expand. The problem I'm having with firefox, and only firefox, is that it will expand the nodes on the first page load. But after that firefox caches it weird and the node header, not children, of the ajax request gets carried over to the new page. This is an issue because the node's header that is carried over contains information that determines if the node has retrieved it's children.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="1"/>
...
</div>
It should be as it is on the first page load.
<div class="node topbar"
<input type="hidden" id="foo" name="hasretrievedchildren" value="0"/>
...
</div>
My Javascript checks for a nonzero value on that input to do the AJAX call.
Is this a bfcache issue?
I'm lead to believe it's not because I added
window.onunload = function();
to the js file and in a script tag and neither fixed it which this article
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
says should invalidate the bfcache.
I'm using asp.net MVC 4 and I tried using the MVCdonutcaching to set this page and partial views to not cache. But that didn't work either.
Maybe it's the bfcache, maybe it's not.
I had to face the same problem some time ago. The browser caches were causing some strange behaviour on our forms, and it was affecting the expected results of the page.
Someway to solve itSomething you can do in order to make the program load always the correct value (assuming you are loading it from ) is to initialize the value through your Javascript.
If you use JQuery, you should use:
<script type="text/javascript">
$(document).ready(){
//Assign your items values here
}
<script>
You can also use the onload handler in JS.
Hope this helps.
I was able to solve the problem. Firefox caches all form data even hidden inputs. Since I was using a hidden field to store the flag that enabled the AJAX request it would reload the form data with the flag set. I moved it to a custom attribute and it works exactly as it should.
Have the following markup in my html page to toggle a search bar based on if a search icon is clicked:
<a id="searchIcon" href="/"></a>
<div id="searchWrapOuter" style="display:none;">
<div id="searchWrapInner">
<div id="formContainer">
<form id="searchForm" action="#">
<div>
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
</div>
</form>
</div>
</div>
</div>
Width the following javascipt/jquery:
$(function() {
$(document).on("click", "#searchIcon", function () {
var searchWrapper = $("#searchWrapOuter");
$(searchWrapper).slideToggle();
return false;
});
});
This code works as expected on a page load direct off a Url. When coming into the page off a link which is Ajax loaded, loads the contents of the page into the DOM, and the DOM ready handler only executes for the first page.
I have read about using the
$(document).on('pageinit'), not $(document).ready()/$(function()
I still haven't been able to get this to work when coming in off an ajax link however. What would be the correct way to implement these events to get the code to work coming in from an Ajax link?
Thanks,
Most likely it is because you are using IDs instead of classes. jQuery Mobile doesn't work well with IDs because it caches pages into the DOM so if you open a page, close it, then go back to the page, you might have your page twice inside the DOM (one visible, one hidden/cached). So when you do $("#searchWrapOuter") you don't know which element you are actually dealing with (in your case, probably the hidden one).
The solution is to change your IDs to classes. This is not very intuitive but I found that is the best way to work with jQuery Mobile.
Also note this comment in the doc which might also be relevant to you:
The id attribute of all your elements must be not only unique on a given page, but also unique across the pages in a site. This is because jQuery Mobile's single-page navigation model allows many different "pages" to be present in the DOM at the same time. This also applies when using a multi-page template, since all "pages" on the template are loaded at once.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-anatomy.html
You can manually adjust delay time to 500ms and 1s.
$(searchWrapper).delay(1000).slideToggle();
My issue is that the page id was below the pages tags. So once I moved the page div above it, the javascript was included in the ajax page load. Previous to this
I have a ContentPlaceholder inside of a MasterPageView. All of my other pages come from the same master and I have one page that needs about 70% of the behavior in this master. There is a navigation panel in the master that is spitting out un-necessary html even if left blank by the page. Looks like this:
<div class="span3">
<div class="side_navigation">
<ul>
<asp:ContentPlaceHolder ID="SideNavigation" runat="server" />
</ul>
</div>
</div><%-- /master sub-navigation --%>
I simply want to hide ALL of this markup whenever my placeholder (SideNavigation) has 0 children. I don't want to use javascript. I'd rather do this work on the server and deliver it to the client with less responsibility and markup. I've already tried doing "this.SideNavigation.Controls.Count" but it always ends up being 0. If there was a way I could tie into a loaded event and then test this logic that would be great. I am ok with making a code-behind file for my master, but it would be nice to be able to accomplish my goal in the .master file only.
Let me know what you think.
I would probably recommend using a different master page for the page without the navigation. You can have nested master pages so you don't necessarily need to duplicate code to do this.
However if you do wish to keep it like this, I would personally use a bit of javascript (with jquery) as follows
$(function(){
if($('.span3 .side_navigation ul li').length() == 0){
$('.span3').hide();
}
});
obviously i'd give span3 an ID to make it not hide every span3 but you hopefully get the idea.
A question similar to this has been posted several time, but I cannot find a solution that works. Hopefully, someone can help!
I am using jQuery Mobile 1.1 and jQuery 1.7.2, so I'm on the most recent stable releases. I want to create a dynamic page header. Using this HTML code, it works fine:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
<h1>Title</h1>
</div>
</div>
So I then go to dynamically create the title. I change the HTML to this:
<div data-role="page" id="levela">
<div data-role="header" id="hdr_levela">
</div>
</div>
And added the following jQuery code:
// Set the header
var dirHeader = $('#hdr_levela');
dirHeader.append('<h1>' + title+ '</h1>');
The title appears, but is not styled. I have found several posts about this. In the jQuery Mobile Documentation, it says:
"However, if you generate new markup client-side or load in content via Ajax and inject it into a page, you can trigger the create event to handle the auto-initialization for all the plugins contained within the new markup. This can be triggered on any element (even the page div itself), saving you the task of manually initializing each plugin (listview button, select, etc.).
For example, if a block of HTML markup (say a login form) was loaded in through Ajax, trigger the create event to automatically transform all the widgets it contains (inputs and buttons in this case) into the enhanced versions. The code for this scenario would be:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
So I tried several things. After the above code, I added the following:
dirHeader.trigger("create");
This had no effect. So I tried to put it on the actual append itself:
dirHeader.append('<h1>' + folderName + '</h1>').trigger("create");
This had no effect. I then tried the process on the parent element (in this case, the id of the parent div is "levela"). So I tried this:
$('#levela').trigger("create");
This also had no effect. At this point, I am completely lost. Every solution involves doing one of the things I have tried and is just not working. I must be missing something incredibly basic but I just can't seem to find it.
Thanks in advance for your help!
You can update the content by calling .page:
See this working Fiddle Example!
// Set the header
var title = 'super hyper BuBu',
$dirHeader = $('#hdr_levela');
$dirHeader.append('<h1>' + title+ '</h1>').page();
I just solved a similar problem -- it appears that jQM headers and footers do not have the "create" method, so as far as I can tell, the css classes and roles need to be added manually.
For reference, I posted an example fix on this (old) question: JQuery Mobile trigger('create') command not working
I'm still a beginner at web development. It's not my profession. So go easy.
I started building a rails app today, and realized it would make my application so much better if I could get certain links to display in a separate div instead of a new page, or refreshing the entire page. I'm not quite sure how to search for this, and I keep chasing red herrings with google.
Basically, I have a list in a div on the left side of the page, and when one item from that list is clicked, it should appear in the right div. (Nothing else on the page need be changed)
That's really as simple as it is. Do I need to use Javascript for this? Can I get away with the rails js defaults, or should I be using JQuery?
Is there a way to do this without javascript? I really just need a push in the right direction here, I'm tired of not even knowing how to search for this, or what documentation I should be reading.
Like I said, go easy, and you should just go ahead and err to the side of caution, and assume I know nothing. Seriously. :)
Thanks in advance,
-Kevin
(By the way, I'm developing with Rails 3)
Create your views (along with controllers) to be shown inside the div for each item on the left menu. Lets say we have the following structure now:
Item1 (Clicking on it will fetch:
http://myapp.com/item1)
Item2 (Clicking on it will fetch:
http://myapp.com/item2)
and so on...
make sure you only render the html to be put inside your content div. Should not include <head> <body> etc. tags
In your main page you may have your markup like this >
<div id="leftMenu">
Item 1
Item 2
</div>
<div id="content">
Please click on an item on the left menu to load content here
</div>
Finally, add the following Javascript (you'll need jQuery; trust me it's a good decision).
$("#leftMenu a").click(function () {
$("#content").load($(this).attr("href")); //load html from the url and put it in the #content element
return false; //prevent the default href action
});
You will need JavaScript if you want to avoid reloading the page. You can use link_to for links in your lists, and you'll need to use :remote => true to make it send AJAX requests to the server. The server will need to respond appropriately and supply HTML for your div.
link_to documentation is here: http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to (and admittedly it isn't very useful for AJAX functionality).
The last post in this thread shows one possible solution you could use.