Jump to content
  • 0

Passing Parameters Without Refreshing Page


skauntey

Question

Hello,

 

I have deployed two data pages on a single web page. Though both of them have been deployed using standard embed method, one of them has an embedded tabbed interface which uses iFrame setting.( http://howto.caspio.com/tech-tips-and-articles/advanced-customizations/create-embeddable-tabbed-interface/)

 

One data page has a gallery/report layout, which will pass ID parameter when clicked, and the other page (within tabbed interface) is a detail page which will receive ID parameter. 

 

At this stage when I click a button on gallery /report DataPage it successfully transfers the parameter to the detail page within iFrame setting.

 

However it refreshes the whole page up on each click. which is not really an ideal user experience. 

 

Is there a way I could pass parameters between these two data pages without webpage to refresh ? I might be wrong here, but I thought since the detail page is within iFrame setting it might be possible to transfer ID parameters silently, without refreshing the whole page.

 

I would welcome any suggestions.

 

Thanks in advance.

 

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

You need to put the DataPage which you want to refresh in an iframe.

 

See my approach to this below
 

parent

<body onload="setIframeSource()">

<div id="frmSummary1" class="licFr">
  <div class="divHeader">
    <h2>Summary</h2>
    <a onclick="window.ifrLeadSummary1.location.href = 'lic-leadSummary.html'"></a><!-- refresh button -->
  </div>
  <div id="ifrDiv">                       
    <iframe name="ifrLeadSummary1" class="licIframe" id="ifrLeadSummary1"></iframe>
  </div>
</div>
 
<script>
//set iframe source
function setIframeSource() {
  varLeadID = getQueryVariable("LeadID");
  document.getElementById('ifrLeadSummary').src = 'lic-leadSummary.html?LeadID='+varLeadID;
}
</script>

child

<div id="ifr" class="ifrContent ifrLeadSummary">
  <script type="application/javascript" src="https://b5.caspio.com/scripts/e1.js"></script>
  <script type="application/javascript">try{f_cbload("***","http:");}catch(v_e){;}</script>
</div>
Link to comment
Share on other sites

  • 0

Chad-

As stated in my message, I am having a similar problem. Here are some screen clips of the issue in more detail. Any help is much appreciated!

 

My top page is : Project-Parent. html

within that, projectdetails-ad-child.html has project details (receives [@Project_ID] from report of projects)

 

Within projectdetails-ad-child.html,  I have another IFrame (id=Owners1) which displays Owners-if.html.

 

Owners-if.html is a page within my site that has two datapages embedded on them which list owners.

I want to pass the Project_ID as a filter to this page on load of the tab. 

 

I will be attaching screen clips to explain this (hopefully a little better).

Link to comment
Share on other sites

  • 0

Parent (Code under parent heading): Should be deployed to the main webpage. 

Child: Where do I install this code? Footer, Header or the Webpage itself along with deploy code? 

I am building a page similar to http://www.bd4jobs.c...administration/ , where I would like to display job list within iframe and pass the parameter using the search panel on the left hand side.?

 

Parent and Child are two different web pages.

 

Parent - lead-info-center.html (excuse my lack of code box, I wanted to highlight things to help explain)

-------------------------------------------------------

<body onload="setIframeSource()">

 <div id="frmSummary1" class="licFr">

  <div class="divHeader">

   <h2>Summary</h2>

   <a onclick="window.ifrLeadSummary.location.href = 'lic-leadSummary.html'"></a><!-- refresh button -->

  </div>

  <div id="ifrDiv">

   <iframe name="ifrLeadSummary" class="licIframe" id="ifrLeadSummary"></iframe>

  </div>

 </div>

<script>

  //set iframe source

  function setIframeSource() {

    varLeadID = getQueryVariable("LeadID");

    document.getElementById('ifrLeadSummary').src = 'lic-leadSummary.html?LeadID='+varLeadID;

  }

</script>

------------------------------

 

 

child - lic-leadSummary.html

-------------------------------

<body>

 <div id="ifr" class="ifrContent">

  <script type="application/javascript" src="https://b5.caspio.com/scripts/e1.js"></script>

  <script type="application/javascript">try{f_cbload("***","http:");}catch(v_e){;}</script>

 </div>

</body>

-------------------------------
 

The child is basically an html file with only the Caspio Deploy code.

 

If you want a param to come from another iframe, you'll need some way to set the variable.

 

The example you provided loads an entire second page, but your question seems like you want it all on one page. 

 

The code above using a URL Query Variable (web-page.html?variable=value) from the page load, but you can get the value of an element and add it to the setIframeSource script. maybe something like...

<script>
//on click, set iframe source

document.getElementById('buttonID').onclick = function () {
  
  var pSearch = document.getElementById('searchElementID').value;

  document.getElementById('ifrLeadSummary').src = 'child.html?filterField=' + pSearch;

}
</script>

*********************

To Build and Test, use alert(someVar); or alert('step1'); throughout your code. It allows you to see what values your variables are set at,,,, and where your code is breaking (when I'm writing something new that is proving challenging, I'll put alert('step[X]'); after every line to dial it in)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...