Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

External HTML page not rendering  dynamically using JQuery

Posted on 2010-09-19
8
Medium Priority
?
347 Views
Last Modified: 2012-05-10
Experts,

The product
***************
Please see attch snapshot for more understanding.
So I have two rows of hyperlinked tabs that I have stolen from the web. Each row has 10 tabs. The idea here is to replicate the functionality of an excel spreadsheet. When user clicks on a tab, I have a snippet of code that uses JQuery to dynamically render an external HTML code in a DIV tag. (See snippet of code for more understanding).

The problem
***************
The first row of tabs are functioning correctly. Appropriate HTML files are being rendered when an appropriate tab is clicked. But when the user clicks on any of the tabs in the second row, the rendering is not happening.
In other words, when user clicks on Policy Eligibility tab, the page is rendering just fine. And so are any of the pages in that row. But when user clicks on any of the tabs in the second row ...e.g. CPL1B1, the page is not rendered. Please note that all of the second row tabs are created under a separate <UL> tag. Does this make any difference?
 
TPPFormsDataEntrySystem-v1.html
PolicyInfo.js
TabPolicyInfo.html
Picture of how the product looks
0
Comment
Question by:DoofuS
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33713907
Can you put an alert in LoadInsInfo(); method to check if it reaches there?

Also let me know if this happens when you have already clicked on first row already, and then click on second row?

Can you check in your debugger, if the file is requested and responded by the server when you click on the second row?
0
 

Author Comment

by:DoofuS
ID: 33715565
Yes it does reach any of that function LoadInsInfo() as long as I comment out the below chunk of code:

<div id='PolInfoDiv'></div>                
<div id='InsInfoDiv'></div>                
<div id='DriverInfoDiv'></div>
<div id='PriorCarrierDiv'></div>
<div id='LossHistoryDiv'></div>                
<div id='LocationInfo1Div'></div>                
<div id='LocationInfo2Div'></div>                
<div id='LocationInfo3Div'></div>                
<div id='LocationInfo4Div'></div>                
<div id='LocationInfo5Div'></div>
 which is basically representing the HTMLs for the first row tabs. So in an essense, I can only reach the functions (and therefore render those HTMLs) one row at a time. How can overcome this?
0
 

Author Comment

by:DoofuS
ID: 33715574
How do I check in the debugger?? Did you mean Windows Event Log?
0
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 33719194
<<Yes it does reach any of that function LoadInsInfo() as long as I comment out the below chunk of code:>>
what does this mean?
My question was, given the code you have, when you click on second row link, with the alert in that javascript method, are you able to get the alert or not?
0
 

Author Comment

by:DoofuS
ID: 33721508
"My question was, given the code you have, when you click on second row link, with the alert in that javascript method, are you able to get the alert or not?"

Yes. I was able to get the alert...inside the javascript method.

"My question was, given the code you have, when you click on second row link, with the alert in that javascript method, are you able to get the alert or not?"

It means, if you look at the code in the TPPFormsDataEntrySystem.html, it has a DIV within which there are about 10 divs. Each <div> acts like a pointer to tell which form field to print where.

I know this could be confusing. So please let me know if you have any questions. Thank you!

Balaji
0
 

Author Comment

by:DoofuS
ID: 33724421
bump!
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 33731900
@DoofuS: Apologies for the delayed replies.
would appreciate very specific answers to the questions.
Let me repeat and rephrase
1) when you click in the first row 'Office Eligibility', you invoke LoadInsInfo() method which loads TabInsInfo.html into that div with id 'InsInfoDiv'.
I asked you to put an alert in this method to make it
function LoadInsInfo() {
       alert("inside LoadInsInfo");
      jQuery("#InsInfoDiv").load("TabInsInfo.html");
}
Now when you click on 'Insured Info' in the second row, if you have clicked on first row's 'Office Eligibility' already, what happens (output as well as any errors on IE status bar)? do you see the alert?
And if you haven't yet clicked on first row's 'Office Eligibility' already, and you click on 'Insured Info' in the second row, what happens (output as well as any errors on IE status bar)? do you see the alert?

2) can you try this as well?

function LoadInsInfo() {
       alert("inside LoadInsInfo");
       document.getElementById("InsInfoDiv").innerHTML = ""; \\to reset the div
      jQuery("#InsInfoDiv").load("TabInsInfo.html");
}


Please let me know the results.

If this doesn't help, i can make a mock up of the specific requirement that you have in hand (in this question's context only)
0
 

Author Closing Comment

by:DoofuS
ID: 33864328
Sorry for accepting your answer late...got caught up. Thanks
0

Featured Post

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to count occurrences of each item in an array.
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)

722 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