Home/ Questions/Q 8420057
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T02:47:12+00:00

I’m quite new in html5 & js and i have some troubles to develop

  • 0

I’m quite new in html5 & js and i have some troubles to develop a jQuery Mobile exemple.

From this, i’m just calling another header (partial) when a product is selected to render.

_header2.php:

<!DOCTYPE html>
<head> 
<title>h2: <?php echo $_GET['product']; ?> </title>
<meta charset="UTF-8" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;' name='viewport' />
<link rel='stylesheet' href='assets/css/styles_mob.css'/>
<link rel='stylesheet' href='assets/css/styles.css' />
<link href='assets/css/jquery-mobile.css?<?php echo filemtime("assets/css/jquery-mobile.css");?>' type='text/css' rel='stylesheet' />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js'></script>
</script>

<script type='text/javascript'>
function mymessage(msg)
{
if(!msg) msg="?";
alert(msg);
}

</script>

</head>

<body onload="mymessage('onload !')">


<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1> <?php echo $title?></h1>
</div>

<div data-role="content">

Header code appair correctly on the generated page but js call of mymessage() in body tag doesn’t work. Same problem when i try to call it from another partial code (_product.php) :

<li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>

…concole return: referenceError: mymessage is not defined

Everything rock only when a refreshing the current page !!

I’ve rode some posts (1, 2, 3) with similar problem but i’m still lost.

Any idea please ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    There are all sorts of strange coding styles and errors like missing the <html> tag, an extra </script> closing tag, missing the closing tag on your anchor in <li><a href='#Gallery1' onClick='mymessage(\"press gallery\")' >...</li>, and list items should be inside <ul></ul>.

    Try this code, it should work. Then analyze it and learn!

    <!DOCTYPE html>
<html><head><meta http-equiv="content-type" content="text/html; charset=UTF-8">

<title>h2: <?php echo $_GET['product'];?></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">

<link rel="stylesheet" type="text/css" href="assets/css/styles_mob.css">
<link rel="stylesheet" type="text/css" href="assets/css/styles.css">
<!-- this next line makes me wonder.. why?!  -->
<link rel="stylesheet" type="text/css" href="assets/css/jquery-mobile.css?<?php echo filemtime('assets/css/jquery-mobile.css');?>">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>

<script type="text/javascript">//<![CDATA[ 
function mymessage(msg){
    msg=msg||'?'; //the usual way to provide defaults
    alert(msg);
}

window.onload=function(){ //setting your onload event.
    mymessage('onload !');
};
//]]>  
</script>


</head><body>

<div data-role="page" id="Home"> 
<div data-role="header" data-theme="b">
<a href="./" data-icon="home" data-iconpos="notext" data-transition="fade">Home</a>
<h1><?php echo $title;?></h1>
</div>

<div data-role="content">  

<ul> <!-- Here is your link, working -->
    <li><a href="#Gallery1" onclick="mymessage('press gallery');">...</a></li>
</ul>

<!-- added some closing tags for demo-sake -->
</div></div>
</body></html>

    PS: since all the beginner errors and the fact that this is just part of your code, I strongly assume the rest of your code has such strange error’s to.

    Good Luck!!

    UPDATE:
    Depending on what you’d like to accomplish on page-load, jQuery Mobile might completely change the ballpark.
    As can be read in jQuery Mobile’s documentation:

    By default all navigation within jQuery Mobile is based on changes and
    updates to location.hash. Whenever possible, page changes will use a
    smooth transition between the current “page” and the next, whether it
    is either already present in the DOM, or is automatically loaded via
    Ajax.

    Another quote from the documentation:

    Use $(document).bind(‘pageinit’), not $(document).ready()

    The first thing you learn in jQuery is to call code inside the
    $(document).ready() function so everything will execute as soon as the
    DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
    contents of each page into the DOM as you navigate, and the DOM ready
    handler only executes for the first page. To execute code whenever a
    new page is loaded and created, you can bind to the pageinit event.

    This means that the regular techniques described will only fire when you first visit the page, not while navigating the page ajax-style.

    Thus in jQuery mobile you must use pageinit or pageshow or one of the other events that are explained in the documentation that suit your exact purpose.

    Example how to get pageinit fire for every page (tested live on your site):

    $(document).on('pageinit','[data-role=page]', function(){
    mymessage('hihi');    
});

    Or alternatively you could turn off ajax in jQuery Mobile, like this (depends on version):

    $(document).bind("mobileinit", function(){
    $.mobile.ajaxEnabled = false;
});
    • 0