Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2677
  • Last Modified:

JQuery Mobile Column-Toggle Table Widget

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
petewinter
Asked:
petewinter
  • 23
  • 22
1 Solution
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
1 - find how YOU are initializing the plugin
2 - find where YOU put the Ajax callback function

move 1 inside 2
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
why did not put "the" javascript in page 3?
At line 15 for example
0
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
I've no idea of your code, so I don't know
0
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
GaryCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
try again removing line 16 to 18
0
 
petewinterAuthor Commented:
But that is what you asked me to insert? If I remove them lines nothing will have changed?
0
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
That sounds great. Where do I place that code?
0
 
leakim971PluritechnicianCommented:
the same place as the previous code, inside the your ajax callback function
0
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
Thanks, but the main page can not be a php file! I am creating a iOS App.
0
 
leakim971PluritechnicianCommented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
The content on page 1 needs to be pulled from a php file. I just simplified my example.
0
 
leakim971PluritechnicianCommented:
so back to ID: 39159798...
0
 
petewinterAuthor Commented:
So can you suggest a solution???
0
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
which script?
0
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
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
 
leakim971PluritechnicianCommented:
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
 
petewinterAuthor Commented:
Thanks again for your help. I will try this asap.
0
 
petewinterAuthor Commented:
Finally there! Many thanks for all your help and your patience!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 23
  • 22
Tackle projects and never again get stuck behind a technical roadblock.
Join Now