Passing url parameters to an embedded page in a div
I have an embedded page in a div that accepts parameters from a url. I am able to update the url without refreshing the page using;
When I click on a row in a table, this is where the url changes and I then want to refresh the div so that the embedded page updates, but i DO NOT want to refresh the whole page, I just want to update the div containing the embedded page.
if (history.pushState) {
window.history.pushState("Test", "Title", "searchConst.html?Client_ID="+clientId);
} else {
document.location.href = "searchConst.html?Client_ID="+clientId;
} <div class="tab-pane" id="messages" role="tabpanel"><a name='test'>
<div id="test2" class="customContainer2">
<script type="text/javascript" src="https://c0abo928.caspio.com/dp/0ea16000b8a5b73fe490405fafdf/emb"></script> -->
<div class="cxkg"><a href="https://c0abo928.caspio.com/dp/0ea16000b8a5b73fe490405fafdf">Click here</a> to load this Caspio <a href="http://www.caspio.com" target="_blank" title="Cloud Database">Cloud Database</a></div>
</div>
</a></div>When I click on a row in a table, this is where the url changes and I then want to refresh the div so that the embedded page updates, but i DO NOT want to refresh the whole page, I just want to update the div containing the embedded page.
Check out this
I just refresh with url if u want ajax call response then do in success function
I just refresh with url if u want ajax call response then do in success function
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<style>
</style>
</head>
<body>
<div id="Div3">
<Script>document.getElementById("Div3").innerHTML = window.location.href; </script>
</div>
<button id="click">Click</button>
<script>
$(document).ready(function(){
$("#click").click(function(){
window.history.pushState("Test", "Title", "file:///E:/My%20Files/G/Expert%20Exchange/issue.html?Client_ID=1");
document.getElementById("Div3").innerHTML = window.location.href;
});
});
</script>
</body>
</html>ASKER
Hi Julian, thanks for your prompt response. I have done as you suggest using;
[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/
which appears in the console.
I am fairly new to javascript, so please excuse my ignorance. This is a critical part of what I am doing and after 24 hours of experimenting I was at a dead end until your suggestion helped make some progress.
$('#messages').load(document.location.href);[Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/
which appears in the console.
I am fairly new to javascript, so please excuse my ignorance. This is a critical part of what I am doing and after 24 hours of experimenting I was at a dead end until your suggestion helped make some progress.
Hi martmac
In previous question u asked about row click on datatable u need to get rowindex???
so u need to pass rowindex to url for get response???
if yes then do in init complete function it self... i have already done like this if my guess right ping me i will share my code.
In previous question u asked about row click on datatable u need to get rowindex???
so u need to pass rowindex to url for get response???
if yes then do in init complete function it self... i have already done like this if my guess right ping me i will share my code.
Do you need to load the entire page or just a portion of it? If the page has scripts and other remote resources on it those are going to be downloaded and run as well. If you just need the content of a portion of the page then you can use the functionality of .load() to only load a fragment of a page.
So in your case lets say the content you are interested in on the target page is inside a container with
You can then do this
NOTE: TargetContent is an ID I made up for this example - you would change this to use an ID that is bound to the container of the content you are interested in
So in your case lets say the content you are interested in on the target page is inside a container with
id="TargetContent"You can then do this
$('#messages').load(document.location.href + ' #TargetContent');NOTE: TargetContent is an ID I made up for this example - you would change this to use an ID that is bound to the container of the content you are interested in
ASKER
Hi both,
Sorry for the delayed response, after much experimentation i think this goes a little deeper than the refresh of the div. I have some javascript that instigates a fetch and returns a response that populates the bootstrap table. On the first search this is fine, table populates and I can click on rows and expander works fine. However, when I do another search things go a bit weird; (sorry for the long comment, but it's not a simple issue I fear!)
before the search is done this code is attached to the search field to clear it and prompt the user for input;
Then the fetch call is made
// API call for constituent data
function APIDataConst(){
var searchFor = document.getElementById('s
var wSelect = 'normal'
// Token Key
var keyID = 'SECURE TOKEN GOES HERE TO AUTHORISE DATA REQUEST'
// Set variables for uri string
var table = 'tbl_Clients';
var fieldNames = 'Client_ID,'+
'Salutation, '+
'FirstName, '+
'Surname, '+
'FullName, '+
'AddressSingleLine, '+
'Tel, '+
'Email, '+
'Greeting, '+
'GreetingFormal, '+
'GreetingInformal';
// Data query examples
// var whereStatement = 'Surname=\'Davis\' and FirstName=\'Kevin\'';
// var whereStatement = 'Surname=\'Davis\' and FirstName like\'K%\'';
// var whereStatement = 'Surname=\'jones\'';
// Function to allow various types of where statements
if (wSelect == "normal") {
var whereStatement = 'Surname=\'' + searchFor + '\'';
}
if (wSelect == "wild") {
var whereStatement = 'Surname Like \'%' + searchFor + '%\'';
}
// uri construct
var urlLink = 'https://c0abo928.caspio.com/rest/v1/tables/'+table+'/rows?q={"select":"'+fieldNames+'
var request = new Request(urlLink, {
method: 'GET',
// set headers for both GET and PUT
headers: new Headers({
'content-type': 'application/json',
'accept': 'application/json',
'Authorization': 'bearer '+keyID
})
});
// Begin fetch data request
fetch(request).then(functi
var status = response.status;
console.log(status);
return response.json();
})
.then(function(j){
// `j` is a JavaScript object
var items =(j.Result.length);
console.log('Rows - '+items);
// Search results as an object
var data1 = j.Result;
console.log(data1)
showTable()
// Populate table
$("#dataTableConst").boots
data: data1
});
console.log(data1);
//Styling for table row colours
$('#dataTableConst').on('c
$('.custom--success').remo
$($element).addClass('cust
// alert('Something else is going on');
});
// Function to collect data to display in expanded row
// function getSecondaryData(){
// console.log('Retreived Client_ID ' + sessionStorage.getItem('Cl
// }
// ROW EXPANDER CONSTRUCT ==========================
var $table = $('#dataTableConst');
$table.on('expand-row.bs.t
var clientId = row.Client_ID;
console.log(clientId);
// var res = $("#desc" + index).html();
// $detail.html(res);
});
$table.on("click-row.bs.ta
console.log(data1);
// prints Clicked on: table table-hover, no matter if you click on row or detail-icon
console.log("Clicked on: " + $(e.target).attr('class'),
if ($tr.next().is('tr.detail-
$table.bootstrapTable('col
} else {
$table.bootstrapTable('exp
}
});
The problem comes in the row expander construct on subsequent searches. It would appear that the data1 object that populates the table is persisting the console log reveals;
(28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
searchConstMartin.html:551
2searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
The 28 rows from the first search is still there, along with the 100 rows from the second search. If I do a third search, then the log shows three instances of data1 persist.
(28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
searchConstMartin.html:551
4searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
searchConstMartin.html:548
searchConstMartin.html:551
4searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
You can see each search just increases the number of tomes that the expander construct is executed. It seems to me that data1 needs to be cleared as part of the search process, but I have no idea how and have been going around in circles for longer than I care to remember.
I hope this makes sense and I really appreciate the help as my sanity is on the line here!!
Thanks again
Sorry for the delayed response, after much experimentation i think this goes a little deeper than the refresh of the div. I have some javascript that instigates a fetch and returns a response that populates the bootstrap table. On the first search this is fine, table populates and I can click on rows and expander works fine. However, when I do another search things go a bit weird; (sorry for the long comment, but it's not a simple issue I fear!)
before the search is done this code is attached to the search field to clear it and prompt the user for input;
// Clear the search field and add placeholder text
function clearSearchCasesAll(){
// alert('Cases All')
var searchField1 = document.getElementById('searchAllCases')
searchField1.value = '';
searchField1.placeholder = 'Enter your search criteria';
sessionStorage.setItem('SearchOption', 'CasesAll');
//Resets the table ready for the next search
$('#dataTableCases').bootstrapTable('destroy');
hideTable()
}Then the fetch call is made
// API call for constituent data
function APIDataConst(){
var searchFor = document.getElementById('s
var wSelect = 'normal'
// Token Key
var keyID = 'SECURE TOKEN GOES HERE TO AUTHORISE DATA REQUEST'
// Set variables for uri string
var table = 'tbl_Clients';
var fieldNames = 'Client_ID,'+
'Salutation, '+
'FirstName, '+
'Surname, '+
'FullName, '+
'AddressSingleLine, '+
'Tel, '+
'Email, '+
'Greeting, '+
'GreetingFormal, '+
'GreetingInformal';
// Data query examples
// var whereStatement = 'Surname=\'Davis\' and FirstName=\'Kevin\'';
// var whereStatement = 'Surname=\'Davis\' and FirstName like\'K%\'';
// var whereStatement = 'Surname=\'jones\'';
// Function to allow various types of where statements
if (wSelect == "normal") {
var whereStatement = 'Surname=\'' + searchFor + '\'';
}
if (wSelect == "wild") {
var whereStatement = 'Surname Like \'%' + searchFor + '%\'';
}
// uri construct
var urlLink = 'https://c0abo928.caspio.com/rest/v1/tables/'+table+'/rows?q={"select":"'+fieldNames+'
var request = new Request(urlLink, {
method: 'GET',
// set headers for both GET and PUT
headers: new Headers({
'content-type': 'application/json',
'accept': 'application/json',
'Authorization': 'bearer '+keyID
})
});
// Begin fetch data request
fetch(request).then(functi
var status = response.status;
console.log(status);
return response.json();
})
.then(function(j){
// `j` is a JavaScript object
var items =(j.Result.length);
console.log('Rows - '+items);
// Search results as an object
var data1 = j.Result;
console.log(data1)
showTable()
// Populate table
$("#dataTableConst").boots
data: data1
});
console.log(data1);
//Styling for table row colours
$('#dataTableConst').on('c
$('.custom--success').remo
$($element).addClass('cust
// alert('Something else is going on');
});
// Function to collect data to display in expanded row
// function getSecondaryData(){
// console.log('Retreived Client_ID ' + sessionStorage.getItem('Cl
// }
// ROW EXPANDER CONSTRUCT ==========================
var $table = $('#dataTableConst');
$table.on('expand-row.bs.t
var clientId = row.Client_ID;
console.log(clientId);
// var res = $("#desc" + index).html();
// $detail.html(res);
});
$table.on("click-row.bs.ta
console.log(data1);
// prints Clicked on: table table-hover, no matter if you click on row or detail-icon
console.log("Clicked on: " + $(e.target).attr('class'),
if ($tr.next().is('tr.detail-
$table.bootstrapTable('col
} else {
$table.bootstrapTable('exp
}
});
The problem comes in the row expander construct on subsequent searches. It would appear that the data1 object that populates the table is persisting the console log reveals;
(28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
searchConstMartin.html:551
2searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
The 28 rows from the first search is still there, along with the 100 rows from the second search. If I do a third search, then the log shows three instances of data1 persist.
(28) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
searchConstMartin.html:551
4searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
searchConstMartin.html:548
searchConstMartin.html:551
4searchConstMartin.html:54
searchConstMartin.html:548
searchConstMartin.html:551
You can see each search just increases the number of tomes that the expander construct is executed. It seems to me that data1 needs to be cleared as part of the search process, but I have no idea how and have been going around in circles for longer than I care to remember.
I hope this makes sense and I really appreciate the help as my sanity is on the line here!!
Thanks again
ASKER
Sorry forgot to wrap code around fetch
// API call for constituent data
function APIDataConst(){
var searchFor = document.getElementById('searchSurname').value;
var wSelect = 'normal'
// Token Key
var keyID = 'SECURE TOKEN KEY GOES HERE TO AUTHORISE RETURN OF DATA'
// Set variables for uri string
var table = 'tbl_Clients';
var fieldNames = 'Client_ID,'+
'Salutation, '+
'FirstName, '+
'Surname, '+
'FullName, '+
'AddressSingleLine, '+
'Tel, '+
'Email, '+
'Greeting, '+
'GreetingFormal, '+
'GreetingInformal';
// Data query examples
// var whereStatement = 'Surname=\'Davis\' and FirstName=\'Kevin\'';
// var whereStatement = 'Surname=\'Davis\' and FirstName like\'K%\'';
// var whereStatement = 'Surname=\'jones\'';
// Function to allow various types of where statements
if (wSelect == "normal") {
var whereStatement = 'Surname=\'' + searchFor + '\'';
}
if (wSelect == "wild") {
var whereStatement = 'Surname Like \'%' + searchFor + '%\'';
}
// uri construct
var urlLink = 'https://c0abo928.caspio.com/rest/v1/tables/'+table+'/rows?q={"select":"'+fieldNames+'", "where":"'+whereStatement+'"}'
var request = new Request(urlLink, {
method: 'GET',
// set headers for both GET and PUT
headers: new Headers({
'content-type': 'application/json',
'accept': 'application/json',
'Authorization': 'bearer '+keyID
})
});
// Begin fetch data request
fetch(request).then(function(response) {
var status = response.status;
console.log(status);
return response.json();
})
.then(function(j){
// `j` is a JavaScript object
var items =(j.Result.length);
console.log('Rows - '+items);
// Search results as an object
var data1 = j.Result;
console.log(data1)
showTable()
// Populate table
$("#dataTableConst").bootstrapTable({
data: data1
});
console.log(data1);
//Styling for table row colours
$('#dataTableConst').on('click-row.bs.table', function (e, row, $element) {
$('.custom--success').removeClass('custom--success');
$($element).addClass('custom--success');
// alert('Something else is going on');
});
// Function to collect data to display in expanded row
// function getSecondaryData(){
// console.log('Retreived Client_ID ' + sessionStorage.getItem('ClientID'));
// }
// ROW EXPANDER CONSTRUCT =================================================================
var $table = $('#dataTableConst');
$table.on('expand-row.bs.table', function(e, index, row, $detail) {
var clientId = row.Client_ID;
console.log(clientId);
// var res = $("#desc" + index).html();
// $detail.html(res);
});
$table.on("click-row.bs.table", function(e, row, $tr) {
console.log(data1);
// prints Clicked on: table table-hover, no matter if you click on row or detail-icon
console.log("Clicked on: " + $(e.target).attr('class'), [e, row, $tr]);
if ($tr.next().is('tr.detail-view')) {
$table.bootstrapTable('collapseRow', $tr.data('index'));
} else {
$table.bootstrapTable('expandRow', $tr.data('index'));
}
});
You really need to simplify this for us - there is simply too much code to wade through to figure out what it is you are asking.
It sounds like first time it works - second time it does not which points to a binding issue. Static binding will bind to the table on page load but will not bind to any dynamic elements added later. Dynamic binding (using .on()) will bind to newly added elements.
It sounds like first time it works - second time it does not which points to a binding issue. Static binding will bind to the table on page load but will not bind to any dynamic elements added later. Dynamic binding (using .on()) will bind to newly added elements.
$('.existing-element-at-page-load').click(function() {
// static - will only work on items in the page at page load
});$('body').on('click','.dynamically-loaded-item-selector', function() {
// dynamic - will bind to any element with correct selector when loaded dynamically
});This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
You can use the jQuery .load() function to do the AJAX and the load for you
Open in new window
Where url is the URL of the content you want to load in the div.