Search jQuery

jQuery Forum

jQuery Mobile

sunspot07

button text updating

in jQuery Mobile • 3 months ago

jquery mobile 1.2, jquery 1.7.2...

I have an <a> tag that is essentially a phone number, and this is in the data-role="content" div of the page

<div style="float:left;"><a data-theme="c" data-role="button" href="tel:" id="nvphone"></a></div>

that gets set by a call to JavaScript, lets say GetPhoneNumber().

I am using

$(document).on('pageinit', function()
{
var navph = GetPhoneNumber);
$('#nvphone').changeButtonText(navph);
});
// found this funciotn online.....
(function($) {
/*
* Changes the displayed text for a jquery mobile button.
* Encapsulates the idiosyncracies of how jquery re-arranges the DOM
* to display a button for either an <a> link or <input type="button">
*/
$.fn.changeButtonText = function(newText) {
return this.each(function() {
$this = $(this);
if( $this.is('a') ) {
$('span.ui-btn-text',$this).text(newText);
return;
}
if( $this.is('input') ) {
$this.val(newText);
// go up the tree
var ctx = $this.closest('.ui-btn');
$('span.ui-btn-text',ctx).text(newText);
return;
}
});
};
})(jQuery);

When the page gets loaded, the button displays the expected phone number. There are other buttons on the page that load THE SAME page, but change the content. But, for each of those pages, the text of the button becomes empty. If I manually refresh the page, the button text gets set and displayed correctly.

I need for the JavaScript function to be called each time a page is loaded, and I need to make sure the text on the button gets display. Is there a way to force a refresh/reload after the javascript call so that the page gets displayed correctly?

Thx in advance

Replies(10)

bagman

Re: button text updating

3 months ago

First off, you need to correct the syntax errors in your code such as GetPhoneNumber);

I'm surprised the page even loads at all and doesn't end up with a JavaScript error on the page trying to parse your invalid syntax.

Have you used your browser developer tools to debug the code and inspect your DOM? From the little bit of code you provided, I would guess that your JavaScript is getting called each time the page is loaded but isn't changing the element that you think it should be changing.

You're using an ID as the target for your button. So, it's likely changing the text on the button on the wrong page loaded in the DOM because you end up with duplicate IDs. If you're using an ID as a selector you either need to guarantee that it's unique or limit the scope of your selector so that it's only selecting the element you actually intend (which is easier said than done if not impossible depending on the browser).

As long as you're using an ID that has a possibility of duplicates you'll get inconsistent results depending on the browser. ID values should be unique and there's no guarantee of how the browser will handle such a selector. Use a different selector and make sure the scope of your selector is on the page that your event handler is being fired on.

$(document).on('pageinit', function() {
var phoneNumber = GetPhoneNumber();
$('your-selector', $(this)).changeButtonText(phoneNumber);
});

sunspot07

Re: button text updating

3 months ago

Thanks!.

I saw the typo on the post after I loaded it. I had to change the name in the post of the function I am actually using and erased the opening paren . Yes, the JavaScript is getting called each time, I have just been unable to decipher what IS actually getting changed, even after inspection in firebug and chrome dev tools. I'll look into the ID duplication.

watusiware

Re: button text updating

3 months ago

If you're using an ID as a selector you either need to guarantee that it's unique or limit the scope of your selector

Limiting the scope of the selector doesn't help. If you have duplicate IDs, you are going to have trouble.

Bear in mind that JQM loads multiple pages into the same document. If you have the same ID in more than one page, those are duplicate IDs.

Browsers allow for ONE element in the document with a given ID. Period. The basic DOM method is called getElementByID() for a reason. It's not getElementsByID().

When you ask the browser to look-up an element by ID, it only returns one element. Which one should it give you?

bagman

Re: button text updating

3 months ago

Limiting the scope of the selector doesn't help. If you have duplicate IDs, you are going to have trouble.

Ummm, well I did say "which is easier said than done if not impossible depending on the browser" if you read the reply.

I know you like to be critical of people's responses on this forum but I clearly stated that one would get inconsistent results across browser, so what's the problem?

sunspot07

Re: button text updating

3 months ago

Being not well versed in JQM, and trying to fix code I inherited, I'm confused about the page loading. The mobile site redirects everything through index.php, which in turn loads a php class/page to determine the next page to load ('pages' being separate php files). The index.php page that is loaded is very simple:

<?php
session_start();
define( 'ABSPATH', str_replace("\\", "/", dirname(__FILE__)));
include './include/config.php';
include './include/page_mobile.php';
require_once( './include/functions.php');
$pgmobile = new page_mobile();
if($pgmobile->page(0) == 'something' && $pgmobile->page_count() == 2)
$pgmobile->get_something();
else
$pgmobile->get_page();
include "header.php";
include $pgmobile->page_to_load();
include "footer.php";
?>

The page_to_load function simply makes some checks and then returns a string like 'mynextpage.php'.

It is within the header.php and footer.php that the buttons where the phone number needs to be displayed is defined. I thought (incorrectly?) that index.php is loaded each time and is 'the' page, so the id's within that page would be unique. There is a separate id for the header button and footer button, and one other location in a separate page/file. The actual real code is:

var navraw;
$(document).on('pageinit', function()
{
navraw = NavisConvertTagToPhoneNumberBasic(ReadNavisTagCookie());
var navph = FormatPhone(navraw, "(###) ###-####");
$('#nvphone').attr('href', 'tel:' + navraw);
$('#nvfphone').attr('href', 'tel:' + navraw);
$('#nvmphone').attr('href', 'tel:' + navraw);
$('#nvphone').changeButtonText(navph);
$('#nvfphone').changeButtonText(navph);
$('#nvmphone').changeButtonText(navph);
});
(function($) {
/*
* Changes the displayed text for a jquery mobile button.
* Encapsulates the idiosyncracies of how jquery re-arranges the DOM
* to display a button for either an <a> link or <input type="button">
*/
$.fn.changeButtonText = function(newText) {
return this.each(function() {
$this = $(this);
if( $this.is('a') ) {
$('span.ui-btn-text',$this).text(newText);
return;
}
if( $this.is('input') ) {
$this.val(newText);
// go up the tree
var ctx = $this.closest('.ui-btn');
$('span.ui-btn-text',ctx).text(newText);
return;
}
});
};
})(jQuery);

This code is within a phone.js file that is included from footer.php, just before the <body> tag closes.

Like I mentioned, I *KNOW* I do not understand [yet] the intricacies of JQM and its page navigation. I'll learn, but right now I have to get this issues solved - client is waiting...

Thanks again in advance.

watusiware

Re: button text updating

3 months ago

We really can't help you much until you read this:

http://jquerymobile.com/demos/1.2.0/docs/pages/page-navmodel.html

The first page loaded is loaded once, and remains in the document.

You are confusing pages with documents. The document can contain many pages.

I thought (incorrectly?) that index.php is loaded each time and is 'the' page, so the id's within that page would be unique.

That is, indeed, an erroneous though. It is loaded once. When you navigate to another page, it is loaded into the same document.

You can't solve your clients problem until you first learn. It's like getting into a car for a cross-country drive, and then you'll take driving lessons and get a driver's license later.

---
bagman: I didn't mean to be critical. I just didn't want anyone to be lulled into thinking that they could get away with multiple IDs. You seemed to offer a sliver of hope where there is no hope. ;)

It doesn't help that the JQM docs are riddled with examples of using IDs. Of course, they have insured that the IDs are unique. But they don't bother to point that out.

bagman

Re: button text updating

3 months ago

I didn't mean to be critical. I just didn't want anyone to be lulled into thinking that they could get away with multiple IDs. You seemed to offer a sliver of hope where there is no hope. ;)

Fair enough and understood. I agree with you and the initial response probably wasn't worded all that well. I was really trying to convey that it would be undeterministic at best so it wasn't a good idea to rely on the use of IDs over other more reliable techniques. It probably would have been better to be more explicit but hopefully the OP has a better understanding now between all of the responses.

sunspot07

Re: button text updating

3 months ago

in one of the responses or comments, you made the statement.. "it wasn't a good idea to rely on the use of IDs over other more reliable techniques". How/where does one trying to learn this subject find those "other more reliable techniques"? Given the vastness of the information available, beyond the JQM documentation, what are good resources to learn JQM from the beginning...

sunspot07

Re: button text updating

3 months ago

thanks - I'll dig deeper and try to understand.... This is my first foray into JQM and it is a different beast and not so easy to learn under compressed time!

sunspot07

Re: button text updating

3 months ago

I changed from using an ID to a class, and that class selector in the pageinit handler, so ALL elements within the DOM with that class get the text set. Seems to work - perhaps not the best technique... Thanks for the help along the way

Top Reply

Response title

Attachments

jQuery Forum

button text updating

Replies(10)

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Re: button text updating

Statistics

Tags

Actions

Related Posts