Running javascript after Ajax call - javascript

I've been tasked with removing all Telerik controls from our website. I'm not that good with javascript, so this is a great learning experience for me. Most of the controls are easy to understand and fairly easy to replace, but I'm stuck on one. I need to replace the RadScriptBlock in the following code:
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery-migrate-1.1.0.min.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/jquery.json-2.4.min.js"></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/main.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/Portal/popup.js" ></script>
<script type="text/javascript" src="<%=ConfigurationHandler.getStaticContentBaseURL(Request)%>js/SeoTracking.js" ></script>
Based on everything I've read, I think I need to use the following, but I'm at a total loss as to how. Any help/suggestions/resource would be greatly appreciated!!!
new Ajax.Request('/your/url', {
onSuccess: function(response) {
// Handle the response content...
}
});
So this ended up being the fix...
<script type="text/javascript" src="http://localhost:44344/js/jquery-1.9.0.min.js">
</script>
<script>
$.ajax({
url: 'AjaxOrderStepServer.aspx',
success: function () {
debugger;
var baseurl = ConfigurationHandler.getStaticContentBaseURL(Request);
var url = baseurl + "/js/jquery-migrate-1.1.0.min.js";
$.getScript(url);
url = baseurl + "/js/jquery.json-2.4.min.js";
$.getScript(url);
url = baseurl + "/js/Portal/main.js";
$.getScript(url);
url = baseurl + "/js/Portal/popup.js";
$.getScript(url);
url = baseurl + "/js/SeoTracking.js";
$.getScript(url);
}
});

Related

API Gateway JavaScript SDK timing out

I've created an API in API Gateway which calls a lambda function to query my RDS database and return the query results as JSON. I'm trying to call my api from JavaScript using the following code but all I'm getting in the console of the browser is 'GET https://myurl/v1/it-requests net::ERR_TIMED_OUT'. But when I run call the API from the URL it returns the query result? My JavaScript is below.
var apigClient = apigClientFactory.newClient({
apiKey: 'myApiKey',
});
var params = {
};
var body = {
};
apigClient.itRequestsGet(params, body)
.then(function(result){
console.log = JSON.stringify(result);
}).catch(function(result){
console.log = "Sorry, API Gateway is not responding";
});
<script type="text/javascript" src="lib/axios/dist/axios.standalone.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/hmac-sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/rollups/sha256.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/hmac.js"></script>
<script type="text/javascript" src="lib/CryptoJS/components/enc-base64.js"></script>
<script type="text/javascript" src="lib/url-template/url-template.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/sigV4Client.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/apiGatewayClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/simpleHttpClient.js"></script>
<script type="text/javascript" src="lib/apiGatewayCore/utils.js"></script>
<script type="text/javascript" src="apigClient.js"></script>
Browser's have default timeouts see this you can return 202 initially and keep the connection alive while u r doing stuff, then once your processing is done end the connection.
for example:
res.status(200);
res.type('application/json');
res.write(' ');
res.flush();
const writeInterval = setInterval(() => {
res.write(' ');
res.flush();
}, 15000);
After processing is done:
res.end(JSON.stringify({
success: 1
//blah...
}));

Get A Script To Work Using hostname To Grab URL

I'm trying to figure out how to get this script to work and it's frustrating. I'm trying to improve the script by grabbing the URL instead of entering the domain manually.
Here is the original:
<script type='text/javascript'>
makeSlider({
url: "http://yourdomain.com/" // Add your blog URL
});
</script>
Here is what I tried(and others similar to it):
<script type='text/javascript'>
makeSlider({
url: "http//" + window.location.hostname + /
});
</script>
I even tried using a variable:
<script type='text/javascript'>
var getDomain = "http//" + window.location.hostname + /,
makeSlider({
url: getDomain
});
</script>
None of my attempts have worked.
Try
var getDomain = "http://" + window.location.hostname + "/";

My jquery script only works in Firefox, why?

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
<body>
<div id="div1">dv1</div>
<div id="div2">dv2</div>
<script type="text/javascript">
function getData(){
$.ajax({
type:"GET",
url:"j.json",
dataType:"json",
success: function(jsondata){
output(jsondata);
}
});
}
function output(json){
//var Data = eval('(' + json + ')');
var html = '';
//alert(Data.length);
for(var i=0;i<json.length;i++){
html += ' name:' + json[i].name + ' age:' + json[i].age;
}
document.getElementById('div1').innerHTML = html;
document.getElementById('div2').innerHTML = json[0].name;
}
setTimeout(getData, 3000);
</script>
</body>
</html>
j.json file is
[{"name":"aaa","age":18},{"name":"bbb","age":19}]
The aim of above code is to update div content with data in local json file. I've tried that in IE & Chrome, but neither worked. I've googled a lot but still can't figure it out.
Anyone got any hints? Thanks in advance.
Do you use web server?
AJAX calls doesnt work with URL starting with file://. This because of the same-origin requirements which were instituted to help deal with cross-site scripting (XSS). See here for more details.
And as I noticed, you should use $(document).ready(function(){ your code }) instead of setTimeout(getData, 3000);

$(...).autocomplete is not a function

Using auto complete in jquery. I am facing a problem which
TypeError: $(...).autocomplete is not a function
I included all the necessary script files. I am not able to understand where I made the mistake. How can I resolve this?
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.9.1.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.hashchange.min.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.easing.1.3.js" ></script>
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery.tools.min.js" ></script>
<script>
$(document).ready(function () {
$('#namanyay-search-box').keyup(function (e) {
var searched = $('#namanyay-search-box').val()
$.getJSON('get_data', 'title=' + searched, function (result) {
var elements = [];
$.each(result, function (i, val) {
elements.push(val.merchant_name)
})
$('#namanyay-search-box').autocomplete({
source: elements
})
})
});
var indicator = $('#indicator'),
indicatorHalfWidth = indicator.width() / 2,
lis = $('#tabs').children('li');
$("#tabs").tabs("#content section", {
effect: 'fade',
fadeOutSpeed: 0,
fadeInSpeed: 400,
onBeforeClick: function (event, index) {
var li = lis.eq(index),
newPos = li.position().left + (li.width() / 2) - indicatorHalfWidth;
indicator.stop(true).animate({
left: newPos
}, 600, 'easeInOutExpo');
}
});
});
</script>
you are missing jQuery UI library, include the script and css files from jQuery UI
Also remove the duplicate jquery library.
download this http://code.jquery.com/ui/1.10.3/jquery-ui.js and place it in assets and add the code below
<script type="text/javascript" src="<?php echo base_url();?>assets/js/jquery-ui.js" ></script>

Cant load jquery

I am using the JavaScript SDK from facebook and I just did the what the example says to load it.This is the sample codes.
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '{{ facebook_app_id }}', status: true, cookie: true,
xfbml: true});
FB.Event.subscribe('{% if current_user %}auth.logout{% else %}auth.login{% endif %}', function(response) {
window.location.reload();
});
};
(function() {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="FetchPic.js"></script>
</body>
But the problem is the all.js from facebook can be loaded successfully but neither jquery nor FecthPic can be loaded, it just keep saying 404 not found. but both of them are in the same directory as the html file. I have no idea why. Thank you
Do this instead
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
where you have
<script type="text/javascript" src="jquery.js"></script>
or fix the path for your local jquery instance
Small expansion on hacknick's response:
Your script tags:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="FetchPic.js"></script>
are telling the browser to load the scripts from the same folder as the page (HTML or whatever) that's being displayed. I imagine that's not where they are located.

Categories