Solved

JQuery Mobile Column-Toggle Table Widget

Posted on 2013-05-10
46
2,420 Views
Last Modified: 2013-05-15
I am using the JQuery Mobile Column-Toggle Table Widget

http://api.jquerymobile.com/table-columntoggle/#entry-examples

When you click the columns button you will notice you can select what columns you want to show.

This works fine for me normally, but when the table code is loaded via ajax from an external php page the column button does not work.

Any idea's what might be the problem?
0
Comment
Question by:petewinter
  • 23
  • 22
46 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39155549
If you run this and jQuery FIND a button it CAN attach a click EVENT
$("#mybutton").click(function() {

BUT If you run it and jQuery CAN'T FIND any button corresponding it DON'T attach a click EVENT

Here, your plugin try to attach click on a button NOT YET present in your page

Each time you load your table with Ajax you need to initiliaze the plugin in your ajax callback function
0
 

Author Comment

by:petewinter
ID: 39155588
Thanks for the reply...

Sorry but what do you mean by the below...

** Each time you load your table with Ajax you need to initiliaze the plugin **

How do I do this?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39155607
1 - find how YOU are initializing the plugin
2 - find where YOU put the Ajax callback function

move 1 inside 2
0
 

Author Comment

by:petewinter
ID: 39155746
Sorry still not sure. My code is below if you can explain with suggested code:

HTML - I have removed the other jquery mobile pages as they are not relevant.
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.3.1/jquery.mobile.theme-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.mobile-1.3.1/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>

<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/cost_calculator.js"></script>

</head> 
<body> 
        
        <div data-role="page" id="page4">
            
            <div data-role="content">
                <div id="CC_Results_Stage4"></div>
            </div>
            
        </div>
        
</body>
</html>

Open in new window


Below is my jQuery code on page 3 which loads data into the "CC_Results_Stage4" div on page 4 shown on the html code above.

<script type="text/javascript">

$(document).ready(function() {
		
	//Enter Details
	$('#calculate_profit').click(function(e) {
        e.preventDefault();
		
		$.post("http://app.cmyuk.com/calculator_script_stage4.php", {
          
        }, function(data) {
	
			 $("#CC_Results_Stage4").html(data).trigger('create');
			 window.location.href = "#page4";  
            
        });
    });
	
});

</script>

Open in new window


Within the "calculator_script_stage4.php" page is the "JQuery Mobile Column-Toggle Table Widget". Use the example code at the bottom this page: http://api.jquerymobile.com/table-columntoggle/#entry-examples

If I put the "JQuery Mobile Column-Toggle Table Widget" example code directly within the html the pop up column selector work correctly. However when placed inside the "calculator_script_stage4.php" page the column selector button does not work.

My JQuery knowledge is not great at the moment so could you please demonstrate how I resolve the issue with the suitable code.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39155821
why did not put "the" javascript in page 3?
At line 15 for example
0
 

Author Comment

by:petewinter
ID: 39155865
What code should I add? I don't know what the event code is that I should use to make the "column button" work?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39155871
I've no idea of your code, so I don't know
0
 

Author Comment

by:petewinter
ID: 39155883
What do you mean. I have provide the code.

I am using the example code at the bottom of this page: http://api.jquerymobile.com/table-columntoggle/#entry-examples
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39155901
So I suppose this is this LINE of code :

$( ".selector" ).table-columntoggle({
  create: function( event, ui ) {}
});

Open in new window


If NOT YET the case, add jQuery and the plugin stuffs inside your page 3 (I'm talking about line 7,8,9)
else you're just mixing, reloading, jQuery and CSS and nobody know the effect
I mean, you alareeady have a jQuery plugin in page 3, you load page 4 with ajax and add,run a new one...
0
 

Author Comment

by:petewinter
ID: 39156060
Are you suggesting add the line of code to line 15 in my query code.

Also what is the selector? Would it be "ui-table-columntoggle-btn" which is the column button?

If so that's not working for me?

When you say add JQuery and Plugin stuff to page 3 it is already in the main html page. Won't that cause a clash?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39156107
Won't that cause a clash?
Yes this is what I'm talking about in my last comment

Also what is the selector? Would it be "ui-table-columntoggle-btn" which is the column button?
I don't know I don't see your code, you said you're using the example at the bottom so I give you the row doing the init

Are you suggesting add the line of code to line 15 in my query code.
Yes
0
 

Author Comment

by:petewinter
ID: 39156140
See this link: http://app.cmyuk.com/

Hopefully this will help explain.

If you can enter random values on the first 3 pages to get through to the results page on page 4, then click on the "Media & Ink Volumes, Sales & Costs" toggle to open. You will then see the "Column-Toggle Table Widget". If you click on the "columns" button it does not open.

However I have noticed that if you click the back button at the top of the page, then "calculate profit" button again on page 3 to return the results page. You will see the "columns" button does work?

Now you can see my code is the selector the "ui-table-columntoggle-btn" class?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39156216
You need to use .live
http://api.jquery.com/live/

When your page loads there is nothing to attach to, using .live will attach to any existing element and any new dynamically added elements.
0
 

Author Comment

by:petewinter
ID: 39156286
GaryC123 - Thanks, but I'm not sure .Live helps with this problem. Can you please alter my code and show me what you mean?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39156315
you're using jQuery 1.9.1
live is deprecated from 1.9...
jQuery.on replace jQuery.live but, me too, I'm not sure live,on, delegate can help with this problem

but I see you've more than one object with the same ID and especially it's is your tableS

say you've two childrens, first ID is Paul, ID of the second is Paul too
How to call one and only one of them? It's not possible that's why ID attribute MUST be unique in a document.

Additionaly I did not see where you're doing initialisation of your table, something like :
$("#table-column-toggle").table-columntoggle({
  create: function( event, ui ) {}
});
0
 

Author Comment

by:petewinter
ID: 39156407
I have removed the other tables on page 4 for now so there are no repeat ID's

I have also added the code to page 3 as suggested

<script type="text/javascript">

$(document).ready(function() {
		
	//Enter Details
	$('#calculate_profit').click(function(e) {
        e.preventDefault();
		
		$.post("http://app.cmyuk.com/calculator_script_stage4.php", {
          
        }, function(data) {
	
			 $("#CC_Results_Stage4").html(data).trigger('create');
			 window.location.href = "#page4";  

$("#table-column-toggle").table-columntoggle({
  create: function( event, ui ) {}
});
            
        });
    });
	
});

</script>

Open in new window


However it's still not working. How comes it does work if I go back to page 3, then go to page 4 again? Does the page need refreshing or something similar.

Really appreciate all your help. Sorry to be a pain.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39156480
try again removing line 16 to 18
0
 

Author Comment

by:petewinter
ID: 39156540
But that is what you asked me to insert? If I remove them lines nothing will have changed?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39156873
yes I realize you don't need to initialize because it's a jQuery mobile widget
and the name of the function is not good...
You need to run this INSTEAD :
$("#table-column-toggle").table("refresh");
table
0
 

Author Comment

by:petewinter
ID: 39156911
That sounds great. Where do I place that code?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39156917
the same place as the previous code, inside the your ajax callback function
0
 

Author Comment

by:petewinter
ID: 39156931
I have, but still no luck? See below...

 $("#CC_Results_Stage4").html(data).trigger('create');	
			 $("#CC_Results_Stage4 #table-column-toggle").table("refresh");		 
			 window.location.href = "#page4";

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39158892
my bad I think I used the back button before...

currently you navigate between page loading them with ajax and append content to a div.
usualy jquery mobile do this job for you

Here two simple pages working fine :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
<script>
	$(document).on("pageinit", "#page1", function() {
		alert("you're on page 1");
	}).on("pageinit", "#page2", function() {
		alert("you're on page 2");
	}).ready(function() {
		alert("Only for this page!");
	});
</script>
</head>
<body>
<div data-role="page" id="page1">
    <div data-role="header">
	    <h1>My Title</h1>
    </div><!-- /header -->
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="d" data-divider-theme="d">
            <li data-role="list-divider" role="heading">Links that will be Ajax-loaded with page transitions</li>
            <li data-theme="d">
                <div class="ui-btn-inner ui-li" aria-hidden="true"><div class="ui-btn-text">
                    <a href="petewinter2.html"data-role="button">Link in the same domain</a>
                </div>
            </li>
        </ul>
    </div><!-- /content -->
    <div data-role="footer">
	    <h4>The Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->
</body>
</html>

Open in new window

And :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<body>
<div data-role="page" id="page2">
    <div data-role="header">
	    <h1>My Title</h1>
    </div><!-- /header -->
    <div data-role="content">


<div style="width: 288px; height: 100px; position: relative; background-color: #fbfbfb; border: 1px solid #b8b8b8;">
<img src="http://www.cmyukdigital.com/HP-Profit/images/HP_Scitex_FB500_sm.jpg" alt="HP Scitex FB500" style="position: absolute; left: 65px;">
</div>
                
<h2 style="text-align:center;">HP Scitex FB500<br />Cost Calculator Results</h2>

<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td><strong>Total Monthly Sales</strong></td>
    <td><strong>£87,300.00</strong></td>
  </tr>
  <tr>
    <td><strong>Total Monthly Ink</strong></td>
    <td><strong>£1,649.80</strong></td>
  </tr>
  <tr>
    <td><strong>Total Monthly Media</strong></td>
    <td><strong>£5,000.00</strong></td>
  </tr>
  <tr>
    <td><strong>Total Monthly Labour</strong></td>
    <td><strong>£1,560.00</strong></td>
  </tr>
  <tr>
    <td><strong>Monthly Lease Payment</strong></td>
    <td><strong>£1,438.64</strong></td>
  </tr>
  <tr>
    <td><strong>NET Monthly Profit</strong></td>
    <td><strong>£77,651.56</strong></td>
  </tr>
</table>

<p class="results_text red"><strong>Return on investment = 1.0 months and only utilising 349.7% of your total production capacity.</strong></p>
<p class="results_text">(Based on 6.5 hours printing per day and a 20 day month)</p>

<div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Ink Cost &amp; Consumption</h4>
    <table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td>Price:</td>
    <td>£113 per litre</td>
  </tr>
  <tr>
    <td>Consumption:</td>
    <td>0.0073 litres per m&sup2;</td>
  </tr>
  <tr>
    <td>Cost:</td>
    <td>£0.82 per m&sup2;</td>
  </tr>
</table>
</div>

<div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Media &amp; Ink Volumes, Sales &amp; Costs</h4>
<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
       <tr>
         <th>Media</th>
         <th data-priority="5"><abbr title="Material Cost">Material</abbr></th>
         <th data-priority="6"><abbr title="Printed Selling Price">Sell</abbr></th>
         <th data-priority="7"><abbr title="Daily Print Volume">Daily Volume</abbr></th>
         <th data-priority="4"><abbr title="Monthly Print Volume">Monthly Volume</abbr></th>
         <th data-priority="1"><abbr title="Total Sales Value">Sales</abbr></th>
         <th data-priority="2"><abbr title="Total Cost of Media">Media Cost</abbr></th>
         <th data-priority="3"><abbr title="Total Cost of Inks">Ink Cost</abbr></th>
       </tr>
     </thead>
     <tbody>
            <tr>
         <td>Display Fabric</td>
         <td>£2.50m&sup2;</td>
         <td>£45.00m&sup2;</td>
         <td>100.00m&sup2;</td>
         <td>2,000.00m&sup2;</td>
         <td>£90,000.00</td>
         <td>£5,000.00</td>
         <td>£1,649.80</td>
       </tr>
            </tbody>
   </table>
 </div>
 
<div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Monthly Gross Revenue</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td>Daily hours of printing:</td>
    <td>22.7 hours</td>
  </tr>
  <tr>
    <td>Operating days per month:</td>
    <td>20 days</td>
  </tr>
  <tr>
    <td>Printing speed:</td>
    <td>4.4m&sup2; per hour</td>
  </tr>
  <tr>
    <td colspan="2">Print mode: Max DPI - Saturation, 1200x600dpi, 4 Colour (0-1m)</td>
    </tr>
  <tr>
    <td>Print waste percentage:</td>
    <td>3%</td>
  </tr>
  <tr>
    <td>Total material produced:</td>
    <td>2,000.00m&sup2;</td>
  </tr>
  <tr>
    <td>Total of invoiced production:</td>
    <td>1,940.00m&sup2;</td>
  </tr>
  <tr>
    <td><strong>Total Monthly Sales:</strong></td>
    <td><strong>£87,300.00</strong></td>
  </tr>
</table>
 </div>
 
 <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Material &amp; Production Cost</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td>Monthly cost of media:</td>
    <td>£5,000.00</td>
  </tr>
  <tr>
    <td>Cost of inks:</td>
    <td>£1,649.80</td>
  </tr>
  <tr>
    <td>Cost of materials (ink+media):</td>
    <td>£6,649.80</td>
  </tr>
  <tr>
    <td>Cost of 1 operators - hourly rate £12:</td>
    <td>£1,560.00</td>
  </tr>
    <tr>
    <td>Total cost of production:</td>
    <td>£8,209.80</td>
  </tr>
  <tr>
    <td><strong>Monthly Gross Revenue:</strong></td>
    <td><strong>£79,090.20</strong></td>
  </tr>
</table>
 </div>
 
  <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Leasing Cost &amp; Profit</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td>48 Monthly lease payments of:</td>
    <td>£1,438.64</td>
  </tr>
  <tr>
    <td><strong>NET Monthly Profit:</strong></td>
    <td><strong>£77,651.56</strong></td>
  </tr>
</table>
 </div>
 
 <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Investment</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
  <tr>
    <td>Scitex FB500 printer:</td>
    <td>£72,330.00</td>
  </tr>
  <tr>
    <td>10% deposit payment:</td>
    <td>£7,233.00</td>
  </tr>
  <tr>
    <td>Finance balance:</td>
    <td>£65,097.00</td>
  </tr>
  <tr>
    <td>Cost of finance over 48 months:</td>
    <td>£3,957.72</td>
  </tr>
  <tr>
    <td>Total investment (including interest):</td>
    <td>£76,287.72</td>
  </tr>
  <tr>
    <td><strong>Return On Investment:</strong></td>
    <td><strong>1.0 months</strong></td>
  </tr>
</table>
 </div>
 
 <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Printing Efficiency</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
     <thead>
       <tr>
         <th></th>
         <th align="left" data-priority="1">Efficiency</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Total product m&sup2; per day</td>
         <td>100.00m&sup2;</td>
       </tr>
       <tr>
         <td>Total product m&sup2; per week</td>
         <td>500.00m&sup2;</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per month</td>
         <td>2,000.00m&sup2;</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per year</td>
         <td>22,000.00m&sup2;</td>
       </tr>
       <tr>
    	<td>Working hours per shift</td>
    	<td>8 hours</td>
    	</tr>
        <tr>
    	<td>Job set-up &amp; pre-press time ( per shift )</td>
    	<td>1.5 hours</td>
    	</tr>
        <tr>
    	<td>Printing hours per day</td>
    	<td>6.5 hours</td>
    	</tr>
     </tbody>
   </table>
 </div>
 
 <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Printing Potential</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
     <thead>
       <tr>
         <th></th>
         <th align="left" data-priority="1">Potential</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Total product m&sup2; per day</td>
         <td>28.60m&sup2;</td>
       </tr>
       <tr>
         <td>Total product m&sup2; per week</td>
         <td>143.00m&sup2;</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per month</td>
         <td>572.00m&sup2;</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per year</td>
         <td>6,864.00m&sup2;</td>
       </tr>
     </tbody>
   </table>
 </div>
 
 <div data-role="collapsible" data-mini="true" data-content-theme="d">
    <h4>Printing Capacity</h4>
<table width="100%" cellpadding="5" class="ui-responsive table-stroke results_text">
     <thead>
       <tr>
         <th></th>
         <th align="left" data-priority="1">Capacity</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Total product m&sup2; per day</td>
         <td>349.7%</td>
       </tr>
       <tr>
         <td>Total product m&sup2; per week</td>
         <td>349.7%</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per month</td>
         <td>349.7%</td>
       </tr>
       <tr>
         <td>Total production m&sup2; per year</td>
         <td>320.5%</td>
       </tr>
     </tbody>
   </table>
 </div>

    </div><!-- /content -->
    <div data-role="footer">
	    <h4>The Footer</h4>
    </div><!-- /header -->
</div><!-- /page -->
</body>
</html>

Open in new window

0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

Author Comment

by:petewinter
ID: 39159606
Thanks, but I need to load the div using ajax as I am passing values between the pages and pulling data from a MySQL database using php. Can you please how I can do it this way instead of a page link as you have showed.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159615
jQuery mobile will post your form data for you.
If you need to calculate something to pass it, you've multiple  solution.
The simple is just to double check your fields have a << name >> attribute and not ONLY an ID. Additionaly for specific field like << calculate_change >>, you may use an hidden field and set it on the server side :
<input type="hidden" name="calculate_change" id="calculate_change" value="1" />

Open in new window


$calculate_change = ($_POST["calculate_change"] == "1"); // true or false

Open in new window

0
 

Author Comment

by:petewinter
ID: 39159724
Sorry to be a pain, but I'm still struggling to understand.

I have created a very simple version of what I am trying to do. Can you please amend my code to show me where I am going wrong...

Main Page:

<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>jQuery Mobile Web App</title>
<link href="jquery.mobile-1.3.1/jquery.mobile.theme-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery.mobile-1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery.mobile-1.3.1/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>

<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<script>

$(document).ready(function() {
    	
	$('#CC_Results').load('http://app.cmyuk.com/test_script1.php',function(){
		$('#CC_Results').trigger('create');
	});
			
});

</script>

</head> 
<body> 

        <div data-role="page" id="page1">
            
            <div data-role="content">
                <div id="CC_Results"></div>
            </div>
           
        </div>
        
        <div data-role="page" id="page2">
            
            <div data-role="content">
                <div id="CC_Results_Stage2"></div>
            </div>
          
        </div>
        
</body>
</html>

Open in new window


Code in "test_script1.php"

<script type="text/javascript">

$(document).ready(function() {
		
	//Enter Details
	$('#test_form1').on("click", "#calculate_profit", function(e){
        e.preventDefault();
		
		$.post("http://app.cmyuk.com/test_script2.php", {
            printerid: $("#printer_id").val(),
            calculate_change: "true"
        }, function(data) {	
			 $("#CC_Results_Stage2").html(data).trigger('create');	
			 $("#CC_Results_Stage2 #table-column-toggle").table("refresh");		 
			 window.location.href = "#page2";
        });
    });
	
});

</script>

<form id="test_form1" name="test_form1" method="post" action="">

<input name="printer_id" type="text" id="printer_id" value="1" />

<a href="#" data-role="button" data-theme="b" data-icon="arrow-r" id="calculate_profit">Calculate Profit</a>

</form>

Open in new window


Code in "test_script2.php" the results page:

<table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
     <thead>
       <tr>
         <th>Media</th>
         <th data-priority="5"><abbr title="Material Cost">Material</abbr></th>
         <th data-priority="6"><abbr title="Printed Selling Price">Sell</abbr></th>
         <th data-priority="7"><abbr title="Daily Print Volume">Daily Volume</abbr></th>
         <th data-priority="4"><abbr title="Monthly Print Volume">Monthly Volume</abbr></th>
         <th data-priority="1"><abbr title="Total Sales Value">Sales</abbr></th>
         <th data-priority="2"><abbr title="Total Cost of Media">Media Cost</abbr></th>
         <th data-priority="3"><abbr title="Total Cost of Inks">Ink Cost</abbr></th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>xxxxx</td>
         <td>£xx m&sup2;</td>
         <td>£xx m&sup2;</td>
         <td>xx m&sup2;</td>
         <td>xx m&sup2;</td>
         <td>£xxx</td>
         <td>£xx</td>
         <td>£xx</td>
       </tr>
     </tbody>
   </table>

Open in new window


You will see that I am loading code from a php file into page 1 and posting into a div on page 2.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159740
I can't help you anymore if you still want to load yourself the pages
you choose to use jQuery mobile plugins AND its widgets, why don't you want to follow ITS rules(not mine)?
0
 

Author Comment

by:petewinter
ID: 39159749
I am loading the pages because they need to be php pages! What's wrong with what I am doing? That is why I am asking for help! What is ITS rules?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159775
main.php :
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>jQuery Mobile Web App</title>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<script src="//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>
<script>
	$(document).on("pageinit", "#page1", function() { 	
	}).on("pageinit", "#page2", function() {
	}).on("pageinit", "#page3", function() {
	}).on("pageinit", "#page4", function() {
	}).on("pageinit", "#page5", function() {
	});
</script>
</head> 
<body> 
    <div data-role="page" id="page1">
        <div data-role="content">
        <?php
	        echo file_get_contents("test_script1.php");
        ?>
        </div>
    </div>
</body>
</html>

Open in new window

test_script1.php :
<form id="test_form1" name="test_form1" method="post" action="">
    <input name="printer_id" type="text" id="printer_id" value="1" />
    <input type="hidden" name="calculate_change" value="1" />
    <a href="test_script2.php" data-role="button" data-theme="b" data-icon="arrow-r" id="calculate_profit">Calculate Profit</a>
</form>

Open in new window

test_script2.php
    <div data-role="page" id="page2">
        <div data-role="content">
            <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
             <thead>
               <tr>
                 <th>Media</th>
                 <th data-priority="5"><abbr title="Material Cost">Material</abbr></th>
                 <th data-priority="6"><abbr title="Printed Selling Price">Sell</abbr></th>
                 <th data-priority="7"><abbr title="Daily Print Volume">Daily Volume</abbr></th>
                 <th data-priority="4"><abbr title="Monthly Print Volume">Monthly Volume</abbr></th>
                 <th data-priority="1"><abbr title="Total Sales Value">Sales</abbr></th>
                 <th data-priority="2"><abbr title="Total Cost of Media">Media Cost</abbr></th>
                 <th data-priority="3"><abbr title="Total Cost of Inks">Ink Cost</abbr></th>
               </tr>
             </thead>
             <tbody>
               <tr>
                 <td>xxxxx</td>
                 <td>£xx m&sup2;</td>
                 <td>£xx m&sup2;</td>
                 <td>xx m&sup2;</td>
                 <td>xx m&sup2;</td>
                 <td>£xxx</td>
                 <td>£xx</td>
                 <td>£xx</td>
               </tr>
             </tbody>
            </table>
        </div>
    </div>

Open in new window

0
 

Author Comment

by:petewinter
ID: 39159788
Thanks, but the main page can not be a php file! I am creating a iOS App.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159798
the problem is not your first page but the way you make transition between page
main.html :
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>jQuery Mobile Web App</title>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<script src="//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>
<script>
	$(document).ready(function() {
		$("#page1 div").load("test_script1.php", function() { $("#page1").trigger('create'); });
	}).on("pageinit", "#page1", function() { 	
	}).on("pageinit", "#page2", function() {
	}).on("pageinit", "#page3", function() {
	}).on("pageinit", "#page4", function() {
	}).on("pageinit", "#page5", function() {
	});
</script>
</head> 
<body> 
    <div data-role="page" id="page1">
        <div data-role="content">
        </div>
    </div>
</body>
</html>

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159803
Or :
<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>jQuery Mobile Web App</title>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css"/>
<link href="//code.jquery.com/mobile/1.3.1/jquery.mobile.structure-1.3.1.min.css" rel="stylesheet" type="text/css"/>
<link href="styles/style.css" rel="stylesheet" type="text/css"/>
<script src="//code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.numeric.js"></script>
<script>
	$(document).on("pageinit", "#page1", function() { 	
	}).on("pageinit", "#page2", function() {
	}).on("pageinit", "#page3", function() {
	}).on("pageinit", "#page4", function() {
	}).on("pageinit", "#page5", function() {
	});
</script>
</head> 
<body> 
    <div data-role="page" id="page1">
        <div data-role="content">
<form id="test_form1" name="test_form1" method="post" action="">
    <input name="printer_id" type="text" id="printer_id" value="1" />
    <input type="hidden" name="calculate_change" value="1" />
    <a href="test_script2.php" data-role="button" data-theme="b" data-icon="arrow-r" id="calculate_profit">Calculate Profit</a>
</form>
        </div>
    </div>
</body>
</html>

Open in new window

0
 

Author Comment

by:petewinter
ID: 39159819
The content on page 1 needs to be pulled from a php file. I just simplified my example.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159822
so back to ID: 39159798...
0
 

Author Comment

by:petewinter
ID: 39159831
So can you suggest a solution???
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159834
0
 

Author Comment

by:petewinter
ID: 39159892
Yes I understood. As I said can you offer me a solution?

How would you do it or should I request attention for input from others? I just want to be advised of the best way to do what I require?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39159913
if you understood did you tried the code provided? I mean main.HTML and the two tests pages. You did not gave any feedback on that.
On my side I get the main page opened with a link button, clickkng on it a Nice page transition and I can click on the column button to toggle columns.
So what do you need know?
0
 

Author Comment

by:petewinter
ID: 39159970
Sorry my mistake. I did not look at ID: 39159798 properly.

However I have one further issue. The jquery script for page 2 needs to be within "test_script1.php" as some of the code is created dynamically.

Do I need to need to add pageinit into the code below some how?

<script type="text/javascript">

$(document).ready(function() {
		
	//Enter Details
	$('#test_form1').on("click", "#calculate_profit", function(e){
        e.preventDefault();
		
		$.post("http://app.cmyuk.com/test_script2.php", {
            printerid: $("#printer_id").val(),
            calculate_change: "true"
        }, function(data) {	
			 $("#CC_Results_Stage2").html(data).trigger('create');	
			 $("#CC_Results_Stage2 #table-column-toggle").table("refresh");		 
			 window.location.href = "#page2";
        });
    });
	
});

</script>

<form id="test_form1" name="test_form1" method="post" action="">

<input name="printer_id" type="text" id="printer_id" value="1" />

<a href="#" data-role="button" data-theme="b" data-icon="arrow-r" id="calculate_profit">Calculate Profit</a>

</form>

Open in new window


I really appreciate you patience on this. I feel we are nearly there.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39160073
which script?
0
 

Author Comment

by:petewinter
ID: 39160626
My full script on my original file is below...

<script type="text/javascript">

$(document).ready(function() {
	
	$(".numeric_only").numeric();
	
	//Enter Details
	$('#form3').on("click", "#calculate_profit", function(e){
        e.preventDefault();
		
		$.post("http://app.cmyuk.com/calculator_script_stage4.php", {
            printerid: $("#printer_id").val(),
			<?php do {
			$amended_media_name = strtolower (str_replace( array( '\'', '"', ',' , ';', '<', '>', '(', ')', ' ' ), '_', $row_rs_cc_media3['media_name']));	
			?>		
				
            <?php echo $amended_media_name; ?>_material_cost: $("#<?php echo $amended_media_name; ?>_material_cost").val(),
            <?php echo $amended_media_name; ?>_sell_price: $("#<?php echo $amended_media_name; ?>_sell_price").val(),
            <?php echo $amended_media_name; ?>_printed: $("#<?php echo $amended_media_name; ?>_printed").val(),

			<?php } while ($row_rs_cc_media3 = mysql_fetch_assoc($rs_cc_media3)); ?>
            printer_speed: $("#printer_speed2").val(),
			hours_per_shift: $("#hours_per_shift").val(),
			setup_time: $("#setup_time").val(),
			hourly_operator_cost: $("#hourly_operator_cost").val(),
			operating_days_per_month: $("#operating_days_per_month").val(),
			waste: $("#waste").val(),
            calculate_change: "true"
        }, function(data) {
			
			 $("#CC_Results_Stage4").html(data).trigger('create');	
			 $("#CC_Results_Stage4 #table-column-toggle").table("refresh");		 
			 window.location.href = "#page4";
            
        });
    });
	
});

</script>

Open in new window


You will see it contains php code to get some dynamic values, that's why I need the JQuery script within the php file, unless you suggest another way of doing it?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39161089
most of this fields are already in your form
if not, instead creating javascript on the fly create fields in the form with a loop when needed

<input type='hidden' name='<?php your code here ?>' value='<?php your code here ?>' />
0
 

Author Comment

by:petewinter
ID: 39161374
The form names / fields are coming from a mysql database.

I do not understand what you mean?

How can I post the values from one to another if I'm not getting them using JQuery?
0
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39161508
The form names / fields are coming from a mysql database
How can I post the values from one to another if I'm not getting them using JQuery?

usualy to post data, you put them in a form.
<form method="POST" action="somepage.php">
<input type="hidden" name="fieldname" id="fieldname" />
<input type="submit" value="SUBMIT"
</form>

The same using ajax, this is what you're currently doing :
$.post("somepage.php", { fieldname:$("#fieldname").val() });

jQuery Mobile do this $.post for you
Yes, it post the form for you

You say : wait, my fields name are comin from database.
I say : instead creating javascript on the fly with php (IMHO it's a bad design) create your form fields on the fly. PERHAPS(1) it's already what you're doing ! So you've nothing to do, just try the solution !

You're currently doing this :

$.post("somepage.php", { fieldname_<?php echo $fromdatabase; ?>:"<?php echo $value_fromdatabase; ?>" });
and PERHAPS(1) :
<input type="text" id="fieldname_<?php echo $fromdatabase; ?>" value="<?php echo $value_fromdatabase; ?>" />

I say use only this :
<input type="text" id="fieldname_<?php echo $fromdatabase; ?>" name="fieldname_<?php echo $fromdatabase; ?>" value="<?php echo $value_fromdatabase; ?>" />

because jQuery Mobile do the $.post for you!

stop mixing Javascript and php, put data in hidden(or not) fields
0
 

Author Comment

by:petewinter
ID: 39164384
Thanks again for your help. I will try this asap.
0
 

Author Closing Comment

by:petewinter
ID: 39168282
Finally there! Many thanks for all your help and your patience!
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now