I got a .html Page with jQueryMobile. This page sends a database request to a .php script on my server. Then the script returns the result with html code and jQuery Mobile theme features like data-role="listview" included. But the JQM theme is not shown in my frontend. Only the "normal" html style of ul and li. Anyone of you know how to show the database results in jQuery theme? Thanks in advance!
When dynamically adding new jQuery Mobile its content markup can only be enhanced manually through use of a proper enhancement functions. Every widget has an unique function.
This should do it:
$('#listviewID').listview('refresh');
In case this error is thrown:
cannot call methods on listview prior to initialization
use this:
$('#listviewID').listview().listview('refresh');
There's also another solution. Instead of enhancing single component you can enhance whole content DIV, do it like this:
$('contentDivID').trigger('create');
or it can be done on a whole page like this:
$('pageDivID').trigger('pagecreate');
If you want to find more about this process (with working examples) take a look at this ARTICLE, to make it transparent it is a link to my blog post.
Related
I want to load content from a div with ID maininner from a URL on my own site http://www.salcombeyurts.com/stage/yurt1.html into a div with id yurt1_avail on another url http://www.salcombeyurts.com/stage/availability.html on the same site.
I have tried a test outside the CMS and it works. I am using this JQuery:
<div id="yurt1_avail"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#yurt1_avail').load('yurt1.html #maininner');
});
</script>
Is it possible to do this when using CMS/MySQL and .htaccess rewrites for SEF URLs? Is this only possible on static content html pages?.
If this method wont work, what alternatives do I have? I need to load the content of an availability table on one page onto a summary page that will display 3 different availability tables. I am using Joomla and the availability component I have chosen can only be directly linked to, it has no module option or short-code for embedding into articles or modules.
Maybe iFrames could be used, but how would I CSS then to hide all the rest of the page content? I only need the content from #maininner.
Or is there anything in the HTML5/CSS3 markup that will help me?
The AJAX call is an http request so it will work even if you have URL rewriting.
CASE 1 - If you need the content to be uploaded in the main div (the part of the layout where the content is usually shown) then you will have to completely disable your editor (by default is tinyMCE).
Don't try to just edit the HTML source code by clicking the "HTML" button, it won't work because javascript code is cleaned up by TinyMCE.
CASE 2 - If the content of the AJAX request is to be uploaded somewhere else, e.g. in the sidebar, the you'll have to use a Joomla Module, maybe a code-friendly module such as one of these: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules
jQuery function:
function refresh(ppp){
$("#content").load("process.php"+ppp)
}
PHP process.php:
$vID = $_REQUEST[id];
include page_$vID.php;
The problem is that any code like datatables, jquery stuff doesn't load in the new content. I have to include all .js and .css in this piece of script. And some of the jQuery plugins doesnt work anymore.
What are the best prectices in this case? How do you integrate PHP+jQuery and jQuery's Load()?
lookup $.ajax() might do what you want. http://api.jquery.com/jQuery.ajax/
It's hard to say with the little data you have provided, but my guess is that you are trying to add stuff to the interface that requires some sort of initialization by javascript.
For instance, if you have some content like this:
<input class="datepicker" />
And a plugin that adds a datepicker widget to this input, the widget does not work on dynamically loaded content. This is most likely because you have some code in $(document).ready() that initializes your widgets. This code only runs the first time the page loads however, and not after you load some new dynamically loaded content.
To solve you would have to run the same initialization code found in your document ready code, and run it again after your dynamically loaded content is loaded.
Other than that, I believe JQuery automatically tries to load scripts found in dynamically loaded content, so I'm not sure why that is an issue. Would be helpful to see the actual page content that you are trying to load.
as for dynamically loaded css, see this link: How to apply inline and/or external CSS loaded dynamically with jQuery
I want to make a wordpress site that refreshes only the content/post part and not the header, navigation, footer or the sidebar.
Is this possible? If yes then how?
If you want most of the elements to remain in place you are not refreshing necessarily. What you would want to do is an AJAX request to retrieve the new information for the_content and update the DOM with JavaScript.
You would need a function that intercepts the click event for links, handles the AJAX, and then returns false to prevent navigating away from the page.
What you try to achieve is technically possible, however your wordpress theme must support that. You need to use AJAX for it and your theme needs to provide server endpoints for the type of content that is going to be requested.
This can be done by providing fragment templates inside your theme which only return the fragment in question (e.g. content column, menu). However depending on your site's layout this might not be always possible, e.g. if the layout changes from one page to another.
A possible workaround is to request the new page via AJAX and only replace the parts inside the DOM that are changed.
In any case you need to register an AJAX PHP callback function within wordpressCodex.
Can someone tell me how to write code that pushes the content of a finished webpage down half an inch or so, then loads an ad across the top of the page, like this example:
http://abcnews.go.com/International/hideouts-sacred-spaces-experts-baffled-mysterious-underground-chambers/story?id=14136379
(example may no longer be showing this ad/function)
The entire page loads, then gets pushed down, then the ad loads at the top of the page. My code for this would be at/near the bottom of my clients html.
The ad content will come from a different server.
The same code would ideally work with all/most finished websites instead of being specifically tailored for each one.
Thanks for any and all help.
I suppose you implement your ads in your HTML by using a static code (eg. when you're using Google Ads). When you put this code on top of your page, it'll show the ad on top of your page. Optionally, you can style it a bit so it's centered.
Since you load your ads from a different server, I don't see any reason why the HTML-code behind those ads is dynamic (I don't know if it is?). Your ad-provider will take care of showing the ads in a random-order.
If you'd looked at the source of the page you'd see this this is achieved using JavaScript, not PHP. If you want it to happen (seemingly) after the page loads you need to write some php to inculde the html/JavaScript/images whatever for the ad, then some JavaScript to dispay it once the page has finished loading. Or use AJAX to dynamically modify the DOM.
Check out the jQuery JavaScript framework.
I would prefer to use a front-end code like jquery or normal javascript, and prepend your ad to the body.
OR
If you want to do it with a server-side language. You can add the server variable just after the opening body tag, and populate the html to the variable via server-side code.
See my example:
Gray : body tag
Green : your website
Red : the ad section
If you don't have a wrapper container around your div, add one. And use the methods I mentioned above to prepend the ad to your site.
I would like to build a website where when you go to the next pag,
the page slides to the next.
I can use Jquery.ScrollTo but then i have to load all the pages at ones.
http://demos.flesler.com/jquery/scrollTo/
This is not a good result for the google index I think.
What is the best way to do this? I think about loading the next page with ajax.
you need includes having HTML links for your navigation, ensuring that your site works on browsers that do not have JavaScript turned on, and using real links in your JavaScript or AJAX, such as:
[a href=”ajax.htm?sn=products” onClick=”navigate(‘ajax.html#sn=products′); return false”]products[/a]
Check out the JQuery mobile framework which has this implemented. They use Ajax page loads and CSS3 transitions to slide new pages into view but your page HTML uses normal tags which can be used by a search spider.
http://jquerymobile.com/demos/1.0a2/#docs/pages/docs-pages.html