Whenever I call getData() on my CKEditor it returns what appears to be some server generated script tags, aswell, and it has on occaision returned the firebug div as well, which seems a bit odd. So I don't think that it is related to asp specifically, but not sure
<script type="text/javascript">
$(function() {
if (queryString["fxml"]) {
$("#ckeditorPH").css("display","block").ckeditor();
}
});
CKEDITOR.plugins.registered['save'] = {
init: function(editor) {
var command = editor.addCommand('save', {
modes: {
wysiwyg: 1, source: 1
},
exec: function(editor) {
var $ck = $("#ckeditorPH").ckeditorGet();
$ck.updateElement();
$("#ckeContent").text($ck.getData()).html();
}
}
);
editor.ui.addButton('Save', { label: 'Save', command: 'save' });
}
}
</script>
<asp:Content ID="Content3" ContentPlaceHolderID="CPmainContent" Runat="Server">
<textarea id="ckeditorPH" style="display: none;" name="ckEditorPh" cols="1" rows="3"></textarea>
<div id="ckeContent"></div>
</asp:Content>
And some example returned code
<div id="footer">
asdsdasdasd</div>
<script type="text/javascript">
//<![CDATA[ var ctl00_ctl02_ImageArray = new Array('', '', '', '/Wiki WebResource.axd?d=orvFyKxqjn_MxWN6EePxi9qdFITpyPFIgsCG-7yiV981&t=634031320320031812', '/Wiki/WebResource.axd?d=orvFyKxqjn_MxWN6EePxiziK9rrZZZfuENrSUk7FQmY1&t=634031320320031812',
'/Wiki/WebResource.axd?d=orvFyKxqjn_MxWN6EePxixV5Wtl1sjTWzAxt10NTBqE1&t=634031320320031812');
//]]>
</script>
<script type="text/javascript">
//<![CDATA[
WebForm_InitCallback();
var ctl00_ctl02_Data = new Object();
ctl00_ctl02_Data.images = ctl00_ctl02_ImageArray;
ctl00_ctl02_Data.collapseToolTip = "Collapse {0}";
ctl00_ctl02_Data.expandToolTip = "Expand {0}";
ctl00_ctl02_Data.expandState = theForm.elements['ctl00_ctl02_ExpandState'];
ctl00_ctl02_Data.selectedNodeID = theForm.elements['ctl00_ctl02_SelectedNode'];
for (var i=0;i<6;i++) {
var preLoad = new Image();
if (ctl00_ctl02_ImageArray[i].length > 0)
preLoad.src = ctl00_ctl02_ImageArray[i];
}
ctl00_ctl02_Data.lastIndex = 4;
ctl00_ctl02_Data.populateLog = theForm.elements['ctl00_ctl02_PopulateLog'];
ctl00_ctl02_Data.treeViewID = 'ctl00$ctl02';
ctl00_ctl02_Data.name = 'ctl00_ctl02_Data';
//]]>
</script>
The firebug element is due to problems in previous versions of Firebug and the latest 1.6 version fixes it.
For the rest of the scripts: I have never seen something like that.
Related
I have created a multiple image selection button with this plugin.
https://wordpress.org/plugins/multifile-upload-field-for-contact-form-7/
below is my contact form 7 code.
<div class="file wrap">
<div class="fileText">Upload Photos</div>
[multifile multi-images id:img_upload]
</div>
<div class="file_names">No file selected</div>
Now i want that if user will select multiple images then all image names will come like this
xyz.jpg, abc.png, pqr.jpg at the place of "No file selected"
You can do this with jQuery. Add this code in your js file.
jQuery('.file input[type="file"]').on('change', function () {
var names = [];
for (var i = 0; i < jQuery(this).get(0).files.length; ++i) {
names.push(jQuery(this).get(0).files[i].name);
}
jQuery(this).parent().parent().parent().parent().find('.file_names').text(names.join(", "));
});
Add this at the bottom of your form:
<script>
jQuery(document).ready(function($) {
$('.wpcf7-multifile').first().on('change', function() {
var files = $(this).prop("files");
var names = $.map(files, function(val) { return val.name; });
$('.file_names').html(names.join(', '));
});
});
</script>
How can I create an iFrame in Sitefinity which adapts its height dynamically to the content (in this case different forms for the user to fill out. Some are longer, some shorter).
I have a working solution on our current website (done with DotNetNuke), however, the exact same code does not work with Sitefinity. I does display the site correctly, but doesn't adapt to the size.
Any idea? Here my code:
<html>
<head>
<script>
document.domain ="blvk.ch"
function resizeIframe(obj)
{
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
window.onload = function()
{
var form = getQueryVariable("formular")
var language = getQueryVariable("culture")
var iframe = document.getElementById('formFrame');
iframe.src = "http://formular.blvk.ch/Webformulare_web/index.awp?P1=de-CH&P2=" + form;
}
</script>
</head>
<body>
<p>TestText</p>
<iframe name="Formular" id="formFrame" frameborder="0" scrolling="Yes" style="width: 580px; height: 800px;" onload="resizeIframe(this)" seamless="seamless">
</iframe>
</body>
</html>
I should add that I'm no webdev at all.
Thank you
document.domain ="blvk.ch" is setting the page to it's superdomain but the
iframe src is set to 'formular.blvk.ch' which is why it is treated as a cross-domain iframe. You can read more on that here.
Using obj.contentWindow.document.body.scrollHeight for resizing is not going to work in this scenario. Assuming you have control over the both domains, you can use iFrame-resizer javascript library
https://github.com/davidjbradshaw/iframe-resizer
<html>
<head>
<style>iframe{width: 1px;min-width: 100%;}</style>
<script>
document.domain ="blvk.ch"
function resizeIframe(obj)
{
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
function getQueryVariable(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
window.onload = function()
{
var form = getQueryVariable("formular")
var language = getQueryVariable("culture")
var iframe = document.getElementById('formFrame');
iframe.src = "http://formular.blvk.ch/Webformulare_web/index.awp?P1=de-CH&P2=" + form;
}
</script>
</head>
<body>
<p>TestText</p>
<iframe name="Formular" id="formFrame" frameborder="0" scrolling="no" seamless="seamless">
</iframe>
<script>iFrameResize({log:true}, '#formFrame')</script>
</body>
</html>
Inside a infoBubble Google map I have added a function, but the first time the infoBubble is opened, the code not work, and if I open a second infoBubble or close the first and reopen, the code work.
Please help.
This is my page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.20&sensor=false"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/infobubble.js"></script>
<script>
var infoBubble = new InfoBubble();
var infowindow = new google.maps.InfoWindow();
var map;
function initialize() {
var config = {
el: 'map',
lat: 40.2329,
lon: -3.42,
zoom: 10,
type: google.maps.MapTypeId.ROADMAP
};
var data = [
['Giorgio Rossi', 40.15, -3.42, '1' ],
['Marta Bianchi', 40.25, -3.42, '2'],
['Carlo Verdi', 40.15, -3.62, '3'],
['Mario Giallo', 40.25, -3.62, '4'],
];
var map = new google.maps.Map(document.getElementById(config.el), {
zoom: config.zoom,
scrollwheel: false,
center: new google.maps.LatLng(config.lat, config.lon),
mapTypeId: config.type
});
var markers = [];
var i ;
for (i = 0; i < data.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i][1], data[i][2]),
map: map
});
marker.info = '<div id="'+data[i][3]+ '">'+data[i][0]+ '</div>';
marker.html = '<div style="padding:25px"><a class="testClass" href="javascript:;" > My Friend '+data[i][3]+'</a> </div>';
google.maps.event.addListener(marker , 'click', function(){
infoBubble.setContent(this.html);
infoBubble.open(map, this);
var prova = this.info;
var found = $(prova).attr('id');
google.maps.event.addListenerOnce(infoBubble, 'domready', function () {
$(".testClass").click(function () {
alert(found);
})
});
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map" style="width:700px; height:500px"></div>
</body>
</html>
As you can see from this SO question and the accepted answer
your issue is related to a bug in the infobubble.js code.
More specifically, the placement of the domready trigger was in the wrong part of the code, prior to the asynchronouse setMap() call, instead of after the infobubble elements are added to the DOM in the onAdd() function (which is called after the setMap() function).
What this means is that on your FIRST marker click, at domready event, the elements hadn't yet been added to the DOM - but they were a few milliseconds later - which is why the 2nd marker click worked.
I fixed the domready placement in infobubble.js and created a pull request which has been accepted and is now merged into the official code.
If you update your infobubble.js to the latest commit (use the non-minified for the moment) you'll probably see that your issue is resolved.
Non-working JS Fiddle here using the old code.
Working JS Fiddle here using the new code.
I'm relatively new with aspx and just tried to start moving my html page with youtube api with javascript into visual studio and aspx in order to move data into a database. In html the page seems to work fine and the next page button will successfully pass the pageToken. However, when I moved my html code to aspx, I noticed the page seems to refresh and drops my next page token, reloading the same front page. It also gives me a warning code that only occurs in aspx and not the html:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check http://xhr.spec.whatwg.org/.
Setting 'XMLHttpRequest.withCredentials' for synchronous requests is deprecated.
I am not adding any scripts using my jquerys, which I believe is the main cause of this warning. My nextPage function however does recall the api for additional requests.
In terms of moving the html to aspx all I do is copy all my html code and put it into the header and body respectively. Am I missing a step in migrating? Do I have to change my code when using aspx instead of html?
Here is my current ASPX page:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.Default" %>
<DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet1.css" rel="stylesheet" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript1.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
<style type="text/css">
#courses {
width: 566px;
}
.auto-style1 {
width: 556px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="video-container">
<table><tr>
<td class="auto-style1">
<h1> Rutgers Accounting Digital Library Directory </h1>
</td>
<td align="right"><div id="summary"></div></td>
</tr>
<tr><td class="auto-style1"><form action="search_results.asp" method="Post"><input type="text" name="search1" placeholder="Search Here" size="20"><input type="Submit" name="Submit" value="Submit"></form></td><td><form method="link" action="my_uploads.html" ><input type="Submit" name="Clear" value="Clear Filters"></form></td></tr>
<tr><td colspan="2">
<form>
<select id="courses" onchange="show()">
<option selected disabled>Select a Course</option>
</select>
</form>
</td></tr>
<div class="button-container">
<tr>
<td class="auto-style1"><button id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button></td>
<td align="right"><button id="next-button" class="paging-button" onclick="nextPage();">Next Page</button></td>
</tr>
<tr>
<table id="results"></table>
</tr>
</table>
</div>
</div>
</form>
</body>
</html>
Here is my javascript page:
// Define some variables used to remember state.
var playlistId, nextPageToken, prevPageToken, status, cid;
var totalr = 0;
var rpp = 0;
var sum;
var dur = '';
function onClientLoad() {
gapi.client.load('youtube', 'v3', handleAPILoaded);
}
// After the API loads, call a function to get the uploads playlist ID.
function handleAPILoaded() {
gapi.client.setApiKey('APIKEY');
requestUserUploadsPlaylistId();
}
// Call the Data API to retrieve the playlist ID that uniquely identifies the
// list of videos uploaded to the currently authenticated user's channel.
function requestUserUploadsPlaylistId() {
// See https://developers.google.com/youtube/v3/docs/channels/list
var request = gapi.client.youtube.channels.list({
part: 'contentDetails',
forUsername: 'rutgersweb'
});
request.execute(function (response) {
cid = response.result.items[0].id;
dropdown(cid);
playlistId = response.result.items[0].contentDetails.relatedPlaylists.uploads;
requestVideoPlaylist(playlistId);
});
}
// Retrieve the list of videos in the specified playlist.
function requestVideoPlaylist(playlistId, pageToken) {
console.log(pageToken);
$('#results').html('');
console.log(pageToken);
var requestOptions = {
playlistId: playlistId,
part: 'snippet',
maxResults: 50
};
if (pageToken) {
requestOptions.pageToken = pageToken;
}
var request = gapi.client.youtube.playlistItems.list(requestOptions);
request.execute(function (response) {
totalv = response.pageInfo.totalResults;
rrp = response.pageInfo.resultsPerPage;
sum = '<td>Results Per Page: ' + rrp + '</td><td>Total Pages: ' + Math.ceil(totalv / rrp) + '<td>Total Videos: ' + totalv + '</td>';
$(sum).replaceAll('#summary');
// Only show pagination buttons if there is a pagination token for the
// next or previous page of results.
nextPageToken = response.result.nextPageToken;
var nextVis = nextPageToken ? 'visible' : 'hidden';
$('#next-button').css('visibility', nextVis);
$('#next-button2').css('visibility', nextVis);
prevPageToken = response.result.prevPageToken
var prevVis = prevPageToken ? 'visible' : 'hidden';
$('#prev-button').css('visibility', prevVis);
$('#next-button2').css('visibility', nextVis);
var playlistItems = response.result.items;
if (playlistItems) {
$.each(playlistItems, function (index, item) {
displayResult(item.snippet);
});
} else {
$('#results').html('Sorry you have no uploaded videos');
}
});
}
function getVideoDetails(mmp, ddp, yyyyp, dur, vidId, videoTitle, used) {
var request = gapi.client.youtube.videos.list({
part: 'contentDetails',
id: vidId
});
request.execute(function (response) {
var str = JSON.stringify(response.result.items[0].contentDetails.duration);
str = str.replace(/"/g, "");
str = str.replace(/PT/g, "");
str = str.replace(/H/g, ":");
str = str.replace(/M/g, ":");
str = str.replace(/S/g, "");
str = str.split(':');
var ftime;
if (str[1] < 10) {
ftime = str[1];
str[1] = '0' + ftime;
}
if (str[2] < 10) {
ftime = str[2];
str[2] = '0' + ftime;
}
displayOutput(mmp, ddp, yyyyp, str, vidId, videoTitle, used);
});
}
// Create a listing for a video.
function displayResult(videoSnippet) {
var videoTitle = videoSnippet.title;
var videoId = videoSnippet.resourceId.videoId;
var videoDescription = videoSnippet.description;
var videoPub = videoSnippet.publishedAt;
//dur =
//PublishedAt Formatting to compare
ar3 = videoPub.split("T");
uselessd = ar3[0];
re = new RegExp("-", "g");
uselessd2 = uselessd.replace(re, "/");
usedd = uselessd2.split("/");
ddp = usedd[2];
mmp = usedd[1];
yyyyp = usedd[0];
//Description trimming to leave time stamps only
ar = undefined;
useless = undefined;
useless2 = undefined;
used = undefined;
ar2 = undefined;
ar = videoDescription.split("Time Stamps:");
useless = ar[0];
useless2 = ar[1];
if (useless2 != undefined) {
ar2 = useless2.split("Summary");
ar = ar2[0];
re = new RegExp("\n", "g");
useless = ar.replace(re, "<br>");
used = useless;
}
else
used = " ";
// outputArray=[mmp, ddp, yyyyp, dur, videoId, videoTitle,used]
// displayOutput(outputArray);
getVideoDetails(mmp, ddp, yyyyp, dur, videoId, videoTitle, used)
}
function displayOutput(mmp, ddp, yyyyp, dur, videoId, videoTitle, used) {
//output = '<tr><td colspan="3" align="right">Published On: '+oarray[0]+'/'+oarray[1]+'/'+oarray[2]+'<br>'+dur+'</td></tr><tr><td><img src="http://img.youtube.com/vi/'+oarray[4]+'/1.jpg"></img></td><td>'+oarray[5]+'</td></tr><tr><td colspan="2" align="right">'+oarray[6]+'<hr>';
if (dur[2])
output = '<tr><td colspan="3" align="right">Published On: ' + mmp + '/' + ddp + '/' + yyyyp + '<br>Length: ' + dur[0] + ':' + dur[1] + ':' + dur[2] + '</td></tr><tr><td><img src="http://img.youtube.com/vi/' + videoId + '/1.jpg"></img></td><td>' + videoTitle + '</td></tr><tr><td colspan="2" align="right">' + used + '<hr>';
else
output = '<tr><td colspan="3" align="right">Published On: ' + mmp + '/' + ddp + '/' + yyyyp + '<br>Length: ' + dur[0] + ':' + dur[1] + '</td></tr><tr><td><img src="http://img.youtube.com/vi/' + videoId + '/1.jpg"></img></td><td>' + videoTitle + '</td></tr><tr><td colspan="2" align="right">' + used + '<hr>';
//Append to results listStyleType
$('#results').append(output);
}
// Retrieve the next page of videos in the playlist.
function nextPage() {
console.log(nextPageToken);
requestVideoPlaylist(playlistId, nextPageToken);
}
// Retrieve the previous page of videos in the playlist.
function previousPage() {
requestVideoPlaylist(playlistId, prevPageToken);
}
function dropdown(cid) {
var requestOptions = {
channelId: cid,
part: 'snippet',
maxResults: 50
};
var request = gapi.client.youtube.playlists.list(requestOptions);
request.execute(function (response) {
var plists = response.result.items;
if (plists) {
$.each(plists, function (index, item) {
var drp = document.getElementById("courses");
var optn = document.createElement("OPTION");
optn.text = item.snippet.title;
optn.value = item.id;
drp.add(optn);
});
} else;
});
}
function show() {
var e = document.getElementById('courses');
var txt = e.options[e.selectedIndex].value;
requestVideoPlaylist(txt);
}
I know the code is a little messy, still trying to get better coding habits, and I should probably fix some useless variables.
Set the type="button" on your button controls to prevent them from submitting the page each time they are pressed:
For example, in your ASPX page use:
<td class="auto-style1"><button type="button" id="prev-button" class="paging-button" onclick="previousPage();">Previous Page</button></td>
<td align="right"><button type="button" id="next-button" class="paging-button" onclick="nextPage();">Next Page</button></td>
I know this is a really basic question, so forgive me. I have a script that works in a jfiddle, but I want to put it in my header and I can't figure out how to call it with a script tag and event handler(?).
Here's the script:
var retrieveValue = function(ev){
var $this = $(this),
val = $this.data('value');
if (val) {
$this.val(val);
}
},
hideValue = function(ev){
var $this = $(this);
$this.data('value', $this.val());
$this.val($this.val().replace(/^\d{5}/, '*****'));
};
$('#field_a7afui').focus(retrieveValue);
$('#field_a7afui').blur(hideValue);
$('#form_hv3hcs').submit(function(ev){
ev.preventDefault();
retrieveValue.call($('#field_a7afui')[0], ev);
alert($('#field_a7afui').val());
hideValue.call($('#field_a7afui')[0], ev);
});
Can someone please tell me what I need to put at the beginning and end of this just to throw it in my Wordpress header and call it a day?
Here's my jfiddle: http://jsfiddle.net/d5KaJ/40/
If that's what you were asking for...
into a script tag like:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
jQuery(function( $ ) {
// CODE HERE
} )();
</script>