I have a jQuery Mobile site with a listview statistics. The user may click an "action" button that delivers a pop-up. Depending on their answer in the popup, the number/statistic in the listview may change. The database query is successful, but the page doesn't update automatically; I have to manually refresh it to see the change. I'm using .post() to query the database (code at the end).
I've seen this question asked multiples times on here, often with the same solution. In the successful callback or popup "afterclose", use:
$('#somelist').listview('refresh');
Or
$("#page").tigger("create");
Unfortunately, neither of those solutions seem to work for me. This has become a very frustrating problem for me, so I'm hoping someone out there can help!
Here's an abbreviated version of my code:
<div id="testdiv">
<ul data-role="listview" data-inset="true" data-theme="a" data-count-theme="a">
<li data-role="list-divider">Combat Round: <?php echo $round; ?><span class="combat_result"></span></li>
<?php
for ($i = 0; $i < $numrows; $i++) {
?>
<li class="combatant" id="combatant_<?php echo $i; ?>"><h3 class="ui-li-heading"><span class="player_name"><?php echo $member[$i]['player_name']; ?></span></h3><span class='ui-li-count'><?php echo $member[$i]['player_total_init']; ?></span>
<p class="ul-li-desc"><strong>Actions Remaining: </strong><span class="remaining"><?php echo $member[$i]['player_actions_remain']; ?></span></p>
</li>
<?php
}
?>
</ul>
</div> <!-- testdiv -->
My database query via JS:
$(document).on('click', '#commit_save', function(e) {
e.preventDefault();
var combatid=$("#save_data_holder").data("combat_id");
var combat_desc=$("#combat_desc").val();
$.post("commit_save.php", {
combatid: combatid,
combat_desc: combat_desc
}, function(data) {
$(".save_result").html(data);
$('#combat_list').listview("refresh");
$("#home").trigger("create");
});
});
And my pop-up JS:
$("#enter_num_actions").popup({
beforeposition: function( event, ui ) {
$("#data_holder").data({"combatant_name": combatant_name, "combat_id": combat_id});
},
afterclose: function( event, ui ) {
$("#testdiv").listview().trigger("create");
}
});
Again, everything works fine except that I have to perform a manual refresh to get the value in the listview to update. If anyone has a suggestion, I appreciate it.
Thanks in advance!
Assuming from your abbreviated php code that your post response contains an entire unordered list including the <ul></ul> tags (btw your abbreviated code does not contain </ul>, perhaps you truncated that when abbreviating) and not just the list tags <li></li> you will need to trigger a create event on the parent div of the received listview.
$("#parentDIV").listview().trigger("create");
This codes creates a new listview for the child html unordered list containing attribute data-role="listview" within that parent div.
I believe $('#somelist').listview('refresh'); is used for when you are ONLY injecting <li></li> tags into an already existing <ul> and then afterwards refreshing that pre-existing list with the new <li> contents.
I found similar results to use refresh etc when I had similar problems in an app and they were not working because jquery mobile did not consider the new html unordered list as a listview yet, so it could not refresh the 'listview'. Notice the reference to listview as opposed to html unordered list that contains an attribute data-role="listview", jquery mobile appears to not consider the unordered list as a listview until you 'create' it.
Manually refreshing a page with a list containing data-role="listview" marks it up as a listview just as any other jquery mobile attributes are processed on page load, thats why it works when you were refreshing it.
Related
I have a JSON object which store data about a website RSS feed:
var varNameSpace = <?php echo json_encode($article); ?>;
and I'm on the way to develop a Ticker, I need to display all objects elements on <li> tags and add the effect of scrolling dynamically.
Before I have used a javascript function to do that scrolling my javascript function look like:
<script>
var boutton=document.getElementById("start");
function startTicker(){
$("#news li:first").slideUp(function(){
$(this).appendTo($("#news")).slideDown();
});
}
boutton.onclick=setInterval(startTicker, 3000);
</script>
my HTML page look like:
<div>
<?php
foreach(getFeed() as $article){
?>
<ul id="news">
<li><h3><?php echo $article['title']; ?></h3></li>
</ul>
<p>
<?php echo $article['description']; ?>
</p>
<?php
}
?>
</div>
Once I execute this page, it was just the first element of the list which scroll the other list elements was considered as a unique element.
So, how can i scroll over all the list elements ?
I haven't tested your code, but I suspect the li:first has something to do with only selecting the first element.
No need to reinvent the wheel with this though, there are some great plugins out there that can achieve what you're asking for with minimal effort.
One such example that I've used before is http://richhollis.github.io/vticker/
It was quite easy to implement, and as you're already using jQuery won't require you to load any additional libraries.
On the other hand, if you're set on writing your own, this CodePen by Noel Killebrew looks like it would be a good starting point https://codepen.io/noelietrex/pen/ZGGoZM
Really struggling to think of a solution to this problem. I have thought anchor links might help (using the #example on the end of a link to scroll to a position on the page) but not sure how best to implement them.
So on the homepage of my site I have a list of links, that correlate to tabs on another page.
The links on the homepage:
(What is e-Bate, What are rebates etc.)
Links
When you click one of the tabs on the other page, it activates a script which shows a certain div below:
Tabs
This is how the tabs are shown:
HTML:
<div class="page-links">
<ul>
<li>What is e-Bate?</li>
<li>What are rebates?</li>
<li>e-Bate features</li>
<li>How e-Bate works</li>
<li>Case studies</li>
</ul>
</div>
<div class="page-contents">
<div id="whatebate" class="hideshowdiv">
<?php echo CFS()->get('whatisebate'); ?>
</div>
<div id="whatrebate" class="hideshowdiv">
<?php echo CFS()->get('what_are_rebates'); ?>
</div>
<div id="ebatefeat" class="hideshowdiv">
<?php echo CFS()->get('e_bate_features'); ?>
</div>
<div id="howebate" class="hideshowdiv">
<?php echo CFS()->get('how_e_bate_works'); ?>
</div>
<div id="casestud" class="hideshowdiv">
<?php echo CFS()->get('case_studies'); ?>
</div>
</div>
jQuery:
jQuery(document).ready(function() {
jQuery(".page-contents div.hideshowdiv").hide();
// Show chosen div, and hide all others
jQuery("a").click(function (e)
{
//e.preventDefault();
jQuery("#" + jQuery(this).attr("class")).fadeIn().siblings('div.hideshowdiv').hide();
});
});
So when one of the links is clicked on the homepage, for instance, the 'What is e-Bate?' link, I want it to go to the other page, and click the corresponding tab, showing the content for that section. Is this possible? Thanks in advance.
This is very possible and you had half the equation with the anchors. Now you just need to write a small function to parse out the URL and check for a certain tag.
So something like this:
$(function(){
if (location.href.indexOf("#example") != -1) {
//This is where you put your function to show the tab
}
if (location.href.indexOf("#anotherexample") != -1) {
//This is where you put your function to show the tab
}
})
Well, if you can use PHP, then it is indeed pretty easy:
First, you need to create a PHP file, obvious with an input parameter, preference, two GET variables, the first one being the link of the page you want to visit and the second one can be, well that depends on how you want it to be, it can be a div id, or a div class or pretty much id of anything you want to click on the second site (You MUST KNOW which button/link you want to click on the second site)
Then first in your php code, store these two things into variables, Let us take $Path and $DivToClick,
Now, use this PHP function:
file_get_contents(path,include_path,context,start,max_length)
Here, the path is an required field, rest is all optional.. and then after that, echo a JQuery code which will do something like this
function ClickTheButton ()
{
$('#divId').click ();
}
Now, let me explain what we are doing here... First, you are sending link to a php script that get all the contents of that webpage and display it on my screen, and then when you are echo-ing the JQuery code, you are telling browser, that yes, this is the part of the page, execute it and simulate the action of click on this page, and thus the click action is simulated and things are done as per your need...
Hope this helps... :)
I have a web application that uses tabbed navigation from a UI kit: http://www.getuikit.com/docs/tab.html.
Each tab will load different content, which is broken down into several php scripts, one per tab.
One (not very efficient, but so for successful) option is to load up all of the tabs content when the page first loads, so to use the standard example:
<!-- This is the container of the toggling elements -->
<ul data-uk-switcher="{connect:'#my-id'}">
<li><a id="1" class="load-tab" href="">Tab 1</a></li>
<li><a id="2" class="load-tab" href="">Tab 2</a></li>
</ul>
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li><?php require('script1.php'); ?></li>
<li><?php require('script2.php'); ?></li>
</ul>
I want to avoid this though, because the scripts are quite hefty so want to load them on demand for better user experience.
So what I've done is instead add holding divs and target them with a jQuery load():
<!-- This is the container of the content items -->
<ul id="my-id" class="uk-switcher">
<li><div id="1"></div></li>
<li><div id="2"></div></li>
</ul>
jq:
$(document).on("click", "a.load-tab", function(){
//get the value of the tab clicked in the nav
var tab = $(this).attr('id');
//determine the filename to load based on tab clicked
if (tab == '1'){ var filename = 'script1.php'; }
if (tab == '2'){ var filename = 'script2.php'; }
//load it
$( "#"+tab+ ).load( filename );
});
This works fine ... ish.
Question is this: With the initial (non jquery) method, each script could use the main page's core files that have already been included, e.g. header.php, functions.php etc etc. But when the content is loaded from jquery it seems each script needs to be included in the scipt1.php file and loaded again, which results in duplicate content being created in the DOM.
EDIT
script1.php currently is structured something like:
<?php
require('header.php');
require('connect.php');
require('setUser.php');
require('setParams.php');
require('functions.php');
?>
<div id="header">
//header content
</div>
<table>
//table content
</table>
The page that the navigation sits within, let's just call it index.php for now, already must have those php files included, so you can see the duplication issue.
What can be done to avoid this? Thought of a few options like iframes but seems like it might be a hack.
Your issue is essentially inside 'script1.php' you have something that requires 'connect.php' / data that is populated. But you are doubling up on DOM elements when you pull that in.
Two solutions to that issue are: 1 - create slimmer versions of your lib php files that don't include any DOM elements, only the data required to populate script1.php's data, or
script1.php contains
<?php
require('header.php');
require('connect.php');
require('setUser.php');
require('setParams.php');
require('functions.php');
?>
<div id="header">
//header content
</div>
//Everything inside #content is what you want to pull in
<div id="content">
<table>
//table content
</table>
</div>
And then call
$("#1").load("script1.php #content");
This will only load the HTML that is inside the #content div.
I'm using jQuery-UI tabs - five in total. Tab 1 has a form for entry which submits into MySQL (via AJAX). Tab 2 pulls data from MySQL, based on what was entered via Tab 1. When I click from Tab 1 to Tab 2, I want the 2nd tab to refresh. I cannot use an external files as advertised on the jQuery-UI API due to some conflicts with other code. I'm using the following:
Here's my JS:
$(function() {
$("#tabs3").tabs();
$("#tabs3").on('click','li',function(event,ui) {
$("#tabs3").tabs("load", "active");
});
});
Here's my HTML:
<div id="tabs3">
<ul class="no-print">
<li>Enter Report</li>
<li>My Reports</li>
</ul>
<div id="tabs-1">
<form name="form" id="form" method="post" action="scripts.php" novalidate>
// form inputs
</form>
</div>
<div id="tabs-2">
<h4>My Reports</h4>
<?php
// PHP scripts that spits out the output
</div>
What can I do to make it so when I click from one tab to the next, it refreshes the content? I'm not opposed to each tab refreshing, but I would like to choose which ones get refreshed and which ones don't if that's not difficult.
Well if you arn't using a source to load the tab you will need to manually refresh whatever content you need to refresh maybe retrieving the tab page via ajax?
However, you want to approach that part is up to you. But all this can be done inside of the jquery ui tabs callback "beforeActivate". Then in the parameters you can determine what tab it is and proceed with refreshing the content at that point.
$(function() {
$( "#tabs" ).tabs({
beforeActivate: function( event, ui ) {}
});
});
ref: http://api.jqueryui.com/tabs/#event-beforeActivate
And a simple fiddle
http://jsfiddle.net/zjrag3x0/
I am writing a simple Wordpress child theme.
There is a portfolio feature which uses flexslider to display the thumbnail from the most recent posts and, when clicking on them, it uses ajax to open up the post content in a div on the page.
I have written a category page based on this, which pulls out all the post categories and displays the thumbnail for the most recent post. However, when I click on the thumbnail, I need the page to go to a new page and not open up in the content div.
The problem is, I am reusing code which looks a bit like this:
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<div class="flexslider">
<ul class="slides">
<li>
<a href="http://the-url-here">
<img src="<?php echo $thumb[0]; ?>" />
</a>
</li>
</ul>
</div>
<?php endwhile; ?>
But there is custom js within the parent theme global footer as follows which handles the opening up of the content, rather than redirecting to the location specified in the tag as usual.
$(".flexslider ul.slides li a").live('click', function(e){ e.preventDefault();
/*Set Function Variables */
$this = $(this);
$selectedthing = $this;
$postId = $($this).attr('data-url');
// and so on...
return false;
});
So, I need to disable the javascript attached to .flexslider ul.slides li a on that one single page template only, preferably without having to change the classes, as I think thatwould open up another can of worms around the css. Remember the theme loads the javascript in the footer, so I assume any changes Imake in the page template will be overridden in the footer.
Any ideas on the best way to approach this?
Just remove click live listener in your child theme. Add this javascript only for that specific page template.
$(".flexslider ul.slides li a").die('click');