Search jQuery

jQuery Forum

Screen name:
leoalfredmusic
About Me:
I am an aspiring musician who loves to code! I do everything from web design to C++!

leoalfredmusic's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Form processing onClick isn't being activated if I come from another page with jQuery Mobile
[2Replies]
- 18-May-2014 02:15 PM
- Forum: jQuery Mobile
Hey all!

I'm creating a website that uses lots of forms and jQuery Mobile. I'm having a problem where if I'm on a page with jQuery Mobile and I go to another page with jQuery Mobile, then on the page that I go to my form isn't being processed onClick. In this post I'm going to be talking about two pages, Reports.php and DataManipulation.php. By the way if I refer to files or ids or classes that aren't in this post, be sure that I have them because I do, I just wanted to keep this post shorter.

Can you please help me find out why, when I come from a page with jQuery Mobile to another page with jQuery Mobile and a form, the page that I come to with the form isn't processed onClick?

Here is what is in the head tag for both pages (I'm not going to show my head tag in my files as to keep this post shorter, but it is there):
1. <title>MIS</title>
2. <link rel="stylesheet" href="../css/jQueryMobile.css"> 
3. <link rel="stylesheet" href="../css/Main.css"> 
4. <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
5. <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
6. <script src="../scripts/js/Normalize.js"></script> 
Here is my Normalize.js file (just in case you wanted to see it):
1. $(document).on('pagebeforeshow', 'html', function() {
2. $('body').removeClass('ui-mobile-viewport');
3. $('body').removeClass('ui-overlay-viewport');
4. $('div').removeClass('ui-page-theme-a');
5. $('div').removeClass('ui-btn');
6. $('div').removeClass('ui-input-btn');
7. $('div').removeClass('ui-corner-all');
8. $('div').removeClass('ui-shadow');
9. $('div').removeClass('ui-input-text');
10. $('div').removeClass('ui-body-inherit');
11. $('div').removeClass('ui-shadow-inset');
12. });
Here is my Reports.php page:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <div data-role="page" class="frame" id="report">
5. <div class="header">
6. <?php include("../scripts/php/ReportsHeader.php");?>
7. </div>
8. <div class="main">
9. <h3>Would you like to view a report grouped by customers, items, sales departments, or sales people?</h3>
10. <form data-ajax="false" method="post" class="form" id="reportform">
11. <input type="radio" name="report" value="customer"><p>Customers</p>
12. <input type="radio" name="report" value="item"><p>Items Sold</p>
13. <input type="radio" name="report" value="department"><p>Sales Departments</p>
14. <input type="radio" name="report" value="person"><p>Sales People</p>
15. <input type="button" data-role="none" name="reportsubmit" value="Submit" onClick="checkReport(this.form)">
16. </form>
17. </div>
18. </div>
19. <div data-role="page" class="frame" id="customer">
20. <div class="header">
21. <?php include("../scripts/php/ReportsHeader.php");?>
22. </div>
23. <div class="main">
24. <h3>Would you like to view a cumulative report of all customers, or a single report of just one?</h3>
25. <form data-ajax="false" method="post" class="form">
26. <input type="radio" name="customer" value="all"><p>All</p>
27. <input type="radio" name="customer" value="one"><p>One</p><br>
28. <input type="button" data-role="none" name="customersubmit" value="Submit" onClick="checkCustomer(this.form)">
29. </form>
30. </div>
31. </div>
32. <script src="../scripts/js/Reports.js"></script>
33. </body>
34. </html>
Here is my Reports.js file:
1. function checkReport(form) {
2. var checked = form.querySelector('input:checked');
3. var value = checked ? checked.value : null;
5. if (value == "customer") {
6. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
7. var idx = href.indexOf("Reports", 0);
8. var new_href = href.slice(0, idx + 19) + "#customer" + href.slice(idx + 19);
10. window.location.replace(new_href);
11. } else if (value == "item") {
12. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
13. var idx = href.indexOf("Reports", 0);
14. var new_href = href.slice(0, idx + 19) + "#item" + href.slice(idx + 19);
16. window.location.replace(new_href);
17. } else if (value == "department") {
18. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
19. var idx = href.indexOf("Reports", 0);
20. var new_href = href.slice(0, idx + 19) + "#department" + href.slice(idx + 19);
22. window.location.replace(new_href);
23. } else if (value == "person") {
24. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/Reports/Reports.php";
25. var idx = href.indexOf("Reports", 0);
26. var new_href = href.slice(0, idx + 19) + "#person" + href.slice(idx + 19);
28. window.location.replace(new_href);
29. }
30. }
Here is my DataManipulation.php file:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <div data-role="page" class="frame" id="data">
5. <div class="header">
6. <?php include("../scripts/php/DataManipulationHeader.php");?>
7. </div>
8. <div class="main">
9. <h3>Would you like to insert data into the database, update data in the database, or delete a row in the database?</h3>
10. <form data-ajax="false" method="post" class="form" id="reportform">
11. <input type="radio" name="data" value="insert"><p>Insert</p>
12. <input type="radio" name="data" value="update"><p>Update</p>
13. <input type="radio" name="data" value="delete"><p>Delete</p>
14. <input type="button" data-role="none" name="datasubmit" value="Submit" onClick="checkData(this.form)">
15. </form>
16. </div>
17. </div>
18. <script src="../scripts/js/DataManipulation.js"></script>
19. </body>
20. </html>
And finally here is the DataManipulation.js file:
1. function checkData(form) {
2. var checked = form.querySelector('input:checked');
3. var value = checked ? checked.value : null;
5. if (value == "insert") {
6. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Insert.php";
7. window.location.replace(href);
8. } else if (value == "update") {
9. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Update.php";
10. window.location.replace(href);
11. } else if (value == "delete") {
12. var href = "http://bdpastudents.com/~a7068104/2013-2014/Lab_13/DataManipulation/Delete.php";
13. window.location.replace(href);
14. }
15. }
Can you please help me find out why, when I come from a page with jQuery Mobile to another page with jQuery Mobile and a form, the page that I come to with the form isn't processed onClick?

Thank you!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend