Why does this link load html into the entire window vs desired DIV?
See the attached for the URL clicked.
Duplicated here:
HTML code to load:
Thanks!
WhyEntireWindow.png
WhatLoadsIntoEntireWindow.PNG
Duplicated here:
<a href="/cmdb/public_html/Work/list_import_changed_billing.html" id="ImportChangedPlans" data-target="#center_body">487</a>HTML code to load:
<div ID="list_import_changed_billing_page">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.3.2/css/colReorder.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/keytable/2.1.3/css/keyTable.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.0/css/responsive.bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.min.css">
<!-- =========================================================================================================== -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.3.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/keytable/2.1.3/js/dataTables.keyTable.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/responsive.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<!-- =========================================================================================================== -->
<script>
$(list_import_changed_billing) ;
</script>
<div style="float: left; width: 67%; border: 1px solid black;">
<table ID="ChangedBillingInfo" class="display compact">
<thead>
<tr>
<th colspan="4"> </th>
<th colspan="2">Domestic Plan Code</th>
<th colspan="2">International Plan Code</th>
<th colspan="2">Billing Status</th>
<th colspan="2"> </th>
</tr>
<tr>
<th>View Modem</th>
<th>Select</th>
<th>wireless #</th>
<th>serial #</th>
<th>Before Imp.</th>
<th>After Imp.</th>
<th>Before Imp.</th>
<th>After Imp.</th>
<th>Before Imp.</th>
<th>After Imp.</th>
<th>Mark</th>
<th>View History</th>
</tr>
</thead>
</table>
</div>
<div style="float: left; width: 30%; border: 1px solid black;">
<table ID="BillingHistoryDetail" class="display compact">
<thead>
<tr>
<th>Date</th>
<th>Dom Code</th>
<th>Intl Code</th>
<th>Status</th>
<th>Usage</th>
</tr>
</thead>
</table>
</div>
</div>Thanks!
WhyEntireWindow.png
WhatLoadsIntoEntireWindow.PNG
Kim Walker
That is the natural behavior of a link element -- load the page from the HREF URL into the current window. However, I know from your previous questions that you normally set up a click event which overrides the natural behavior of the link element. Did you forget to set up the click event or have you omitted the class name that the jQuery click method targets?
'data-' attributes don't work like that.
I'm sorry, I confused you with a different member who is doing something very similar to this. See this question.
"data" attributes are simply data holders. They have no value in HTML. They perform no function. Their purpose is simply to hold data for javascript functions to access. If you look at the question above, you will see that the programmer has used jQuery to create a click event that overrides the normal behavior of the a link and instead uses jQuery's load method to read an HTML fragment from the server and insert it into a div. This sounds very much like what you are attempting to do.
"data" attributes are simply data holders. They have no value in HTML. They perform no function. Their purpose is simply to hold data for javascript functions to access. If you look at the question above, you will see that the programmer has used jQuery to create a click event that overrides the normal behavior of the a link and instead uses jQuery's load method to read an HTML fragment from the server and insert it into a div. This sounds very much like what you are attempting to do.
Maybe this is something that is specific to the datatables library?
You should add your reference
You're assuming data-target allow you to load the content referenced by the href of your link to the object referenced by the ID of the target attribute.
That's smell boostrap but did not find any reference to that...
add this code between you line 27 and 28 :
You're assuming data-target allow you to load the content referenced by the href of your link to the object referenced by the ID of the target attribute.
That's smell boostrap but did not find any reference to that...
add this code between you line 27 and 28 :
<script>
// jQuery(function($) { // Uncomment if you put the code in the head section of the page
jQuery("#ImportChangedPlans").click(function(evt) {
evt.preventDefault();
var target = jQuery(this).data("target");
var contentURL = jQuery(this).attr("href");
jQuery(target).load(contentURL);
});
// }); // Uncomment if you put the code in the head section of the page
</script>
The only script on your page is this
So you have not shown us all we need to see on this question.
<script>
$(list_import_changed_billing) ;
</script>So you have not shown us all we need to see on this question.
ASKER
Kim, that was me.
On that, I skimmed a page on w3schools.com too quickly, one on buttons and collapse, and, well, had a brain fart.
I'm using jquery selectors again to direct to the correct page. It works.
This STILL has to do w/ me not getting DataTable() to work for two weeks now.
I can get the next page w/ a table to load into the center, but DataTable() fails with
Uncaught TypeError: $(...).DataTable is not a function
You all at EE and support at datatable.net want to see working examples, hence my link to jsbin in my first post.
How DOES one get their HTML to run the JS in the separate window?
I've asked that site and haven't got an answer yet.
Also, a DataTables() assistant is confused w/ my invocation of ready() scripts using $(functionname) ;
If I don't use something like .ready(), or this shorthand you see above in my first post, wouldn't I have to put
<script> functionname() </script>
at the very end of my html?
The only reason I bring this up is because if DataTable() has a problem with my .ready() method to load my scripts, I'll need to know this.
Thanks! And yes, I went off on related tangents, as this all has to do with two weeks of frustration.
On that, I skimmed a page on w3schools.com too quickly, one on buttons and collapse, and, well, had a brain fart.
I'm using jquery selectors again to direct to the correct page. It works.
This STILL has to do w/ me not getting DataTable() to work for two weeks now.
I can get the next page w/ a table to load into the center, but DataTable() fails with
Uncaught TypeError: $(...).DataTable is not a function
You all at EE and support at datatable.net want to see working examples, hence my link to jsbin in my first post.
How DOES one get their HTML to run the JS in the separate window?
I've asked that site and haven't got an answer yet.
Also, a DataTables() assistant is confused w/ my invocation of ready() scripts using $(functionname) ;
I'm not sure what your goal is with that? Main looks like a function (although mixing JS in the Javascript and HTML views doesn't really work in JSBin).
You have similar calls to $(LeftMargin). I don't get why you'd want to pass a function into jQuery?
If I don't use something like .ready(), or this shorthand you see above in my first post, wouldn't I have to put
<script> functionname() </script>
at the very end of my html?
The only reason I bring this up is because if DataTable() has a problem with my .ready() method to load my scripts, I'll need to know this.
Thanks! And yes, I went off on related tangents, as this all has to do with two weeks of frustration.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.
I have recommended this question be closed as follows:
Accept: Kim Walker (https:#a41849362)
If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
mplungjan
Experts-Exchange Cleanup Volunteer
I have recommended this question be closed as follows:
Accept: Kim Walker (https:#a41849362)
If you feel this question should be closed differently, post an objection and the moderators will review all objections and close it as they feel fit. If no one objects, this question will be closed automatically the way described above.
mplungjan
Experts-Exchange Cleanup Volunteer