Need help for multiple playlist files in JWPlayer using query string - query-string

I have a single video page and many playlist files.
The problem is I don't know how to make the JWplayer's 'file' parameter a variable so it can read any of my playlist files. I have researched and have this and that bout flashvars and query strings, but I'm new to this and don't understand how it is done.
Are query strings even the right way to go, or is there a better way?
<script type="text/javascript">
jwplayer('container').setup({
'file': 'playlist/0000001.xml',
'flashplayer': 'player/player.swf',
'skin': 'skins/glow.zip',
'width': '640',
'height': '600',
'controlbar': 'bottom',
'playlist.position': 'bottom',
'playlist.size': '240'
});
</script>

I found a solution using query string.
Placed this code in my headers...
<%
Dim strPar
If Request.QueryString("playlist") = "" Then
strPar = "0000009.xml"
Else
strPar = Request.QueryString("playlist")
End If
%>
Then I just used this line for the JWPplayer playlist...
'file': 'playlist/<%=strPar%>',
I can now use these links...
index.asp?playlist=0000001.xml
index.asp?playlist=0000002.xml
index.asp?playlist=0000003.xml etc...

Related

Exporting file from gdrive as html and convert into wordpress post

I am working on WordPress plugin, which basically converts text files/MS Word Documents into WordPress Posts.
Flow is really simple, you just open dialog box and select files from PC and import.
Now I am trying to integrate Google Drive Picker so users can also create posts from there documents stored in their G-Drive.
I have done some pretty work by reading and understanding google drive picker documentation,
I found a really good working example of it too.
so I customized by callback function for picker which is:
function pickerCallback(data) {
if (data.action === google.picker.Action.PICKED) {
// document.getElementById('content').innerText = JSON.stringify(data, null, 2);
var docs = data[google.picker.Response.DOCUMENTS];
// var googleSelectedFiles = [];
var allFiles = [];
var singleFile = {};
docs.forEach(function (file) {
gapi.load('client', function () {
gapi.client.load('drive', 'v2', function () {
gapi.client.request({
'path': '/drive/v3/files/' + file.id + '/export?mimeType=text%2Fhtml&key=' + myAjax.google.apikey,
'method': 'GET',
callback: function (responsejs, responsetxt) {
singleFile.id = file.id;
singleFile.name = file.name + ".html";
singleFile.content = JSON.parse(responsetxt).gapiRequest.data.body;
allFiles.push(singleFile);
singleFile = {};
}
});
});
});
});
setTimeout(function () {
gDriveHandleFileProcess(allFiles);
}, 4000);
}
}
Now the problem is, I am getting all the document converted as HTML, from <html> to end </html> which includes head tag and style tags and of course there are images too.
I can set all the content into post_content of post while saving it into db, but it's really bad way, I know that.. so looked out for this problem, but nothing found helpful.
If it is possible in a good manners or there might be other solutions I can go through like exporting in other format then save it.. but I also tried simple text format which is not required as the formatting is must.
If anyone can guide me through or share any idea I can go through, that'll be really great.
Thanks in advance.

jsdom does not fetch scripts on local file system

This is how i construct it:
var fs = require("fs");
var jsdom = require("jsdom");
var htmlSource = fs.readFileSync("./test.html", "utf8");
var doc = jsdom.jsdom(htmlSource, {
features: {
FetchExternalResources : ['script'],
ProcessExternalResources : ['script'],
MutationEvents : '2.0'
},
parsingMode: "auto",
created: function (error, window) {
console.log(window.b); // always undefined
}
});
jsdom.jQueryify(doc.defaultView, 'https://code.jquery.com/jquery-2.1.3.min.js', function() {
console.log( doc.defaultView.b ); // undefined with local jquery in html
});
the html:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script src="./js/lib/vendor/jquery.js"></script>
<!-- <script src="http://code.jquery.com/jquery.js"></script> -->
<script type="text/javascript">
var a = $("body"); // script crashes here
var b = "b";
</script>
</body>
</html>
As soon as i replace the jquery path in the html with a http source it works. The local path is perfectly relative to the working dir of the shell / actual node script. To be honest i don't even know why i need jQueryify, but without it the window never has jQuery and even with it, it still needs the http source inside the html document.
You're not telling jsdom where the base of your website lies. It has no idea how to resolve the (relative) path you give it (and tries to resolve from the default about:blank, which just doesn't work). This also the reason why it works with an absolute (http) URL, it doesn't need to know where to resolve from since it's absolute.
You'll need to provide the url option in your initialization to give it the base url (which should look like file:///path/to/your/file).
jQuerify just inserts a script tag with the path you give it - when you get the reference in the html working, you don't need it.
I found out. I'll mark Sebmasters answer as accepted because it solved one of two problems. The other cause was that I didn't properly wait for the load event, thus the code beyond the external scripts wasn't parsed yet.
What i needed to do was after the jsdom() call add a load listener to doc.defaultView.
The reason it worked when using jQuerify was simply because it created enough of a timeout for the embedded script to load.
I had the same issue when full relative path of the jquery library to the jQueryify function. and I solved this problem by providing the full path instead.
const jsdom = require('node-jsdom')
const jqueryPath = __dirname + '/node_modules/jquery/dist/jquery.js'
window = jsdom.jsdom().parentWindow
jsdom.jQueryify(window, jqueryPath, function() {
window.$('body').append('<div class="testing">Hello World, It works')
console.log(window.$('.testing').text())
})

Custom Controls and Web Resources (scripts)

I am developing a Server Custom Control (.NET), a "DatePicker" with the jQueryUI Plugin.
So, i have the next script, that is loaded as a webResource:
JavaScript
$(function () {
$("#" + ctrlInput).datepicker({
maxDate: MaxDate,
minDate: MinDate
});
});
As you can see, i have javascript variables, so, for loading the script and the variables, i do the next:
C#
string javascriptVariables = String.Format(
"var MinDate = '{0}'; var MaxDate = '{1}'; var ctrlInput = '{2}';",
MinDate ?? DateTime.MinValue.ToShortDateString(),
MaxDate ?? DateTime.MaxValue.ToShortDateString(),
_textBox.ClientID
);
// Load javascript variables (it will be load every time i add a control)
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "dateValues" + _textBox.ClientID, javascriptVariables, true);
// Load jQueryPlugin (it is loaded only once, and this is the problem)
Page.ClientScript.RegisterClientScriptResource(this.GetType(), "[[resourceName]]");
It works fine. The problem is when i add this control to a page more than once.
And it is because the script variables are loaded fine, but the RegisterClientScriptResource doesn't load the jQuery Plugin again! And i don't know how i can force the load! Because i can't set the resource key to the RegisterClientScriptResource
Does anybody know how to solve this?
Thanks
I don't think you're taking the problem the right way.
Using global variables (in js) especially when they're actually only used locally is a very bad idea. source
Loading jQuery or a jQuery plugin more than once can also be a source of bugs. source
What i would do is to think of another way of passing variables to your javascript, something like data attributes.
You're probably having an html input generated with from server control, add data attributes for your dates :
<input type="text" ... data-mindate="01/01/2013" data-maxdate="12/31/2013" />
Next step is, instead of feeding the global variables to the datepicker function, use the data attributes :
$('#whatever').data('mindate');
or
$('#whatever').attr('data-mindate');
And a fast demo : http://jsfiddle.net/JjemN/

Rendering Javascript code in nested mustache templates with mustache.js handlebars.js ICanHaz.js

Is it possible to render Javascript in nested mustache.js templates as follows?
myApp.mustache:
{{#myapp}}
{{>userApp}}
{{/myapp}}
userApp.mustache:
{{#user}}
<script>
$(function () {
$("a[id='a_popover_{{username}}']").popover()
})
</script>
{{/user}}
The templates render correctly with pystache (Python's mustache library), but mustache.js, handlebars.js, ICanHaz.js, and ICanHandlebarz.js all complain something like #user was not closed properly.
Pretty sure the </script> bit is the problem, the browser sees that and parses it as end of the template script. Try escaping it like so: <\/script>
I was also stuck into similar issue, what ended up was creating a new script element, because even if the javascript code was rendered , is was not executed after appending into the body, it acts like string.
$('script:last').html('alert("ok !")'); // won't work
sample code for my case:
var render = Mustache.to_html(template, data_sources);
var sc = document.createElement('script');
sc.innerHTML = render;
var p_div = document.getElementById('template_wrap_div').parentNode;
p_div.innerHTML = "";
p_div.appendChild(sc);
Hope that gives some idea and help.

jquery script removal

I need to remove the following script from my page(ASP.NET 3.5), leaving all other scripts intact:
<script type="text/javascript">
//<![CDATA[
alert('Save Sucessful.');
</script>
Should be something like $('html').children('script').remove(':contains("alert")) but this exact syntax doesn't work.
Rather than a pop-up alert, why not provide feedback with a page element (in the DOM)?
It would be there still rather than be there again.
Okay, if you cannot change it you could replace the windows.alert function, if it's executed before the code in question (usually in DOM order).
BTW, you can't just test the string (my first thought) since "Successful" should have two 'c's and the owner of that code might fix it.
But you could mute all alerts for the first 10 seconds with:
var _alert = window.alert, _alertStart=new Date().getTime();
window.alert = function() {
var delay = (new Date().getTime()) - _alertStart;
if (delay > 10000)
_alert.apply( window, arguments );
};
Or, if you want to delete every inline script that contains "alert" you could use:
$('script:contains("alert")').remove();
Note that that pattern matches the script tag in which it occurs, so you could change it if it matters:
$('script:contains("al'+'ert")').remove();
$('html').children('script:contains("alert")').remove();

Resources