Passing Parameters Without Refreshing Page

skauntey · January 14, 2016

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.

LWSChad · January 14, 2016

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>

ALittle · January 15, 2016

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).

ALittle · January 15, 2016

I cant seem to upload a picture to the forum but here is a link to a screen clip of the issue: http://mineral.systems/iframeissue.html

LWSChad · May 3, 2016

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)

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

<h2>Summary</h2>

</div>

</div>

//set iframe source

function setIframeSource() {

varLeadID = getQueryVariable("LeadID");

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

}

</script>

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

child - lic-leadSummary.html

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

<body>

<script type="application/javascript" src="https://b5.caspio.com/scripts/e1.js"></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)

skauntey · May 3, 2016

Thank you Chad!!

Sieneskil · December 30, 2016

If you want to do so, use sessions and store your variables in

$_SESSION['foo1']=$_REQUEST['foo'];

In this manner you may be able to save your data and then pass parameters using javascript with window.location.href or by submitting forms.

Login

Passing Parameters Without Refreshing Page

Question

skauntey

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

LWSChad

Link to comment

Share on other sites

ALittle

Link to comment

Share on other sites

ALittle

Link to comment

Share on other sites

LWSChad

Link to comment

Share on other sites

skauntey

Link to comment

Share on other sites

Sieneskil

Link to comment

Share on other sites

Join the conversation

Browse