Need template substitution for DataTables Ajax source in external javascript file - javascript

I have the following jQuery call that correctly creates and loads a DataTable on my page. This only works, however, when this script is part of the HTML file because my sAjaxSource URL is composed using a template substitution value: ${company.name}.
When I move this code to a separate .js file it still runs and creates the DataTable. Since the template substitution never runs on the include .js file, however, the sAjaxSource is not set and the table doesn't load properly.
What is the proper way of handling this? Do I have to include at least this javascript function in the HTML file itself?
function() {
$('#fund-contacts-table').dataTable( {bFilter: false,
bInfo: false,
bJQueryUI: true,
bPaginate: false,
bStateSave: false,
bSort: false,
bAutoWidth: false,
aoColumns: [ {"sTitle" : "Date", "sWidth" : "20%"}, {"sTitle" : "Our Team", "sWidth" : "20%"}, {"sTitle" : "Client Team", "sWidth" : "20%"}, {"sTitle" : "Note", "sWidth" : "40%"} ],
sAjaxSource: "/contact/${company.name}/"} );
});

I am imagining that the template substitution is done at the time of the HTML page being rendered. As long as you set this as a variable during the template rendering phase, you should be able to pass it into your DataTables initialization.
Before your external .js is loaded,
<script>
var contactSource = "/contact/${company.name}/";
</script>
And then in your initialization in your external js:
sAjaxSource: contactSource;

My best answer so far (but I'll leave the question open to see if someone can really solve it):
Instead of including my script file using <script src=. . . /> in my HTML, I'm including it this way:
<script>
<%include file="../js/fund_page.js" />
</script>
where %include is a Mako directive that reads the specified file, performs template processing on it, and includes it in the HTML file. It appears to be intended for HTML fragments, but works here too.
Unfortunately, that means that I'll lose the optimization to not download the script file if it hasn't changed. On the other hand, the reason this is an issue is that the script file does change from page to page, so that may not be a major loss.

Related

Make all JavaScript work as normal on ajax content

I am working on a normal bootstrap theme which contains js slider, popup, text-rotation, masonry boxes etc..
The theme contains all relevant js library and main.js
All of these will load new content via ajax on user specified actions.
Here is the js/ajax for text-rotation:
In the example below i have to call the "$('.text-rotation').owlCarousel" in order to make the text-rotation to work properly.
function getCon(type,id)
{
var postData = { id: id, type: type}
$.ajax({
url : 'getcontent.php',
type : 'post',
data : postData,
success : function( resp ) {
var cont = $('#cont', resp).html();
$('#conta').after(cont);
$('.text-rotation').owlCarousel({
loop: true,
dots: false,
nav: false,
margin: 10,
items: 1,
autoplay: true,
autoplayHoverPause: false,
autoplayTimeout: 3800,
animateOut: 'zoomOut',
animateIn: 'zoomIn'
});
}
});
}
When not calling "$('.text-rotation').owlCarousel" it simply displays the text in list format.
In order to make the all the ajax load content work properly on all section i.e the slider, popup, etc.. i'll have to find the relevant theme functions and code them all on the respective ajax functions.
Is there any predefined js code which i may call on ajaxComplete so tha all ajax content works normal as it works on page load ??
I tried to call the main.js from "getScript" function inside the ajax success but not working..
The short answer is: no.
jQuery code acts on the DOM that exists when the code is run; if you add to the DOM later on there isn't any general-purpose way for jQuery code to go back and act on the new elements as though they had been there in the first place.
Your options are
rewrite your code to not depend on event bindings / manipulation of the AJAX-based content -- instead use delegated event bindings on elements that are always present
defer your main code init until after all AJAX calls have completed, so the DOM is already in place when you add your bindings
Write specific code to add necessary event bindings / modify newly added DOM chunks individually, as they're loaded

Fix Uncaught TypeError: Cannot read property 'parentNode' of undefined

After searching for an answer to this, I could not find anything specific relating to the issue we are trying to resolve.
We have a page located here: https://portfolioboss.co/charts
We have several widgets from Trading View:
https://www.tradingview.com/widget/
When we use the code we are putting this portion of the code in the footer of the page just before the </body> tag:
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
Then we have this section elsewhere in the body.
<script type="text/javascript">
new TradingView.widget({
"width": 980,
"height": 610,
"symbol": "FX:SPX500",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"allow_symbol_change": true,
"hideideas": true,
"show_popup_button": true,
"popup_width": "1000",
"popup_height": "650",
"no_referral_id": true
});
</script>
According to Chart View we have things setup properly. According with how Clickfunnels works, we have the code added properly to the settings area of our page.
When our page loads, all other content has been stripped away, but the chart does indeed load. If you view the source code of the page, you will see there is a bunch of content missing. We tried using window.onload as outlined in the post shown below for the in page portion of the code, but this did not fix the issue.
See: Javascript error: Cannot read property 'parentNode' of null
Does anyone know how we can get the page content to display properly and include the charts as well?
Thank you in advance for any help and code examples you can provide.
We have found a workaround using iframes that will do the trick if anyone else has an issue with this in the future that avoids any troubles with Javascript conflicts between Clickfunnels and Trade View.
create blank page in Clickfunnels.
add tradeview code as shown in original question.
load into page you want the tradeview code displayed on, using iframe to call the blank page vs using Trade View js code and attempting to load it in page.

Getting action not found error in play framework when file downloading?

I am very new to working with file concepts in java and i have a files in my folder and when i click on the file link in my page it shows action not found error page.How to solve it?Do i need to set any configurations in play?Please help me and for all help thanks in advance.
This is my link:
<td>#hoForm.fileName</td>
And my js code is:
function OpenFancyBoxForHeadOfficeFormsView(hoFormId){
$(".fancyboxPDF").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
width:1200,
height:1000,
autoSize: true,
type: 'iframe',
loop : false,
helpers : {
overlay : {closeClick: false}, // disables close when outside clcik
},
iframe: {
preload: false // fixes issue with iframe and IE
}
});
}
Files are showing correctly without any error in production server.But in my local system getting error page with action not found.
I got answer after doing some changes.in play it shows action not found error page.what i did is i generate war file and run it in tomcat.it works perfectly.I think i missed some path to give in play and that is the reason it shows error while run in polay framework.
You forget to route the URL to your function.
You must have in conf/routes file:
GET /INVOICEPROCESSINGSYSTEM/ YourControllerClass.OpenFancyBoxForHeadOfficeFormsView(hoFormId: String)
Documentation: https://www.playframework.com/documentation/2.5.x/JavaRouting

Uncaught TypeError: owl.owlCarousel is not a function

Before anything else, let me say that I have looked at other similar questions here and I still can't figure this out.
I'm trying to build a website, using .NET MVC (razor) using a this free template I found online.
What I did, was to replace all the markup of my Index.chstml view with the html code of the template. Moved all the scripts and css files to the corresponding folders in my solution, and changed the html to correctly reference the new paths as required.
Needless to say that the original template works perfectly. But for some reason I really can't figure out I'm getting the error:
Uncaught TypeError: owl.owlCarousel is not a function
I looked at the developer tools (chrome) and the scrips are there, so the only thing I can think of is something related to the loading order. Off course I didn't change that, so I wonder if razor did it somehow.
This is how my script loading section looks like:
<script src="#Url.Content("~/Scripts/modernizr-2.6.2.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.easing.1.3.js")"></script>
<script src="#Url.Content("~/Scripts/bootstrap.min.js")"></script>
<script src="#Url.Content("~/Scripts/jquery.waypoints.min.js")"></script>
<script src="#Url.Content("~/Scripts/owl.carousel.min.js")"></script>
<script src="#Url.Content("~/Scripts/main.js")"></script>
and the problem happens inside main.js, right here:
owl.owlCarousel({
items: 1,
loop: true,
margin: 0,
responsiveClass: true,
nav: true,
dots: true,
autoHeight: true,
smartSpeed: 500,
autoplay: true,
autoplayTimeout: 5000,
autoplayHoverPause: true,
navText: [
"<i class='icon-arrow-left2 owl-direction'></i>",
"<i class='icon-arrow-right2 owl-direction'></i>"
]
});
Thanks to everyone in advance.
Well, I feel a bit ashamed, but looks it was just a conflict between the scripts that the template uses, with the ones MVC razor includes by default.
I commented this at the Layout partial view:
##Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")#
and voila! I realized that my code was loading more scripts than the original template.
Thanks everybody.

jstree support for Right to left languages not working

I'm developing an web app in Arabic and i need to use a tree view to reprent my data. I looked around and found that jstree is the best in this area.
The tree works fine when using the default theme (which is LTR), but when i switched to a built-in theme called default-rtl, i didnt see any changes. I looked around in firebug and the script is indeed loading the appropriate css file. Here is my code:
$("#tree").bind("select_node.jstree", function(event, data) {
// My handler function here
}).bind("open_node.jstree", function (event, data) {
// another function here
}).jstree({
core: {
"animation": 0
},
"themes" : {
"rtl": true,
"theme" : "default-rtl",
"url": "js/libs/jstree/themes/default-rtl/style.css",
"dots" : false,
"icons" : true
},
"plugins" : [ "themes", "html_data", "ui"]
});
is there something I am doing wrong?
I managed to solve this issue.
I modifed this CSS file (attached) a little bit and included it in the
CSS folder that comes with JSTREE (usually it's called default.css or
default-rtl). You can download it from here: http://www.mediafire.com/download.php?ah26sq0b0isbboa
Make sure you don't have any
ul {
overflow: hidden
}
related to
your ul root element of ur tree
Hope that was clear,
Enjoy,
Please Set Core RTL Option To True

Categories

Resources