We Keep Coding

is that possible to make ajax call to external web page?

is it possible to call a page of another website from an ajax call ?
my guess is that is possible since connection is not denied , but i can't figure out how to make my ajax call works , I am calling a list of TV Channels of a website , but I am getting no results , would you please see if my script contains any errors
function showValues(){
var myUrl="http://www.nilesat.com.eg/en/Home/ChannelList";
var all = 1;
$.ajax({
url: myUrl+"&callback=?",
data: "channelType="+all,
type: 'POST',
success: function(data) {
$('#showdata').html(data);
},
error: function(e) {
alert('Error: '+data);
}
});
}
showValues();
html div for results
<div id="showdata" name ="showdata">
</div>

Ajax calls are not valid across different domains.you can use JSONP. JQuery-ajax-cross-domain is a similar question that may give you some insight. Also, you need to ensure thatJSONP has to also be implemented in the domain that you are getting the data from.
Here is an example for jquery ajax(), but you may want to look into $.getJSON():
$.ajax({
url: 'http://yourUrl?callback=?',
dataType: 'jsonp',
success: processJSON
});
Another option is CORS (Cross Origin Resource Sharing), however, this requires that the other server to enable CORS which most likely will not happen in this case.
You can try this :
function showValues(){
var myUrl="http://www.nilesat.com.eg/en/Home/ChannelList";
var all = 1;
$.ajax({
url: myUrl,
data: channelType="+all,
type: 'POST',
success: function (data) {
//do something
},
error: function(e) {
alert('Error: '+e);
}
});
}

Stripping script tags and css links from ajax response removing other data

I'm trying to remove the <script> tags from the ajax response. I'm returning a json encoded array from the server. But it contains some <script> tags also (coming from my application. Can't remove it from server side).
$.ajax({
url: 'test.php',
type: 'POST',
data: {},
dataType: 'html',
success: function(data) {
console.log("text : "+$(data).find("script,style").remove().end().text());
}
});
I tried with the above code. It is removing the tags. But a part of the last item from my json encoded array is also getting removed.
The string from test.php looks like
<script src='//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js' type='text/javascript'></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
["Ball > Backs > Flags","Baseball > Backs > 3X5 Flags","Baseball > Backs > Action"] // like this it contains about 50 items.
$(data).find("script,style").remove().end().text() is returning the json string as ["Ball > Backs > Flags","Baseball > Backs > 3X5 Flags","Baseball > Backs > .
What am I doing wrong? Can anyone help me to fix this.
Thanks in advance.

You make a mistake in ajax function. Try this:
$.ajax({
url: 'test.php',
method: 'POST',
data: {},
dataType: 'json',
success: function(data) {
console.log(data);
}
});

Try to use this code:
Here see demo:
https://jsbin.com/sazifefute/edit?html,output
$.ajax({
url: 'test.php',
type: 'POST',
data: {},
dataType: 'json',
success: function(data) {
var rex = /<([^ >]+)[^>]*>.*?<\/\1>|<[^\/]+\/>/ig;
data = data.replace(rex , "");
console.log("text : "+ data);
}
});

Simply use replace() function to remove 'script' from the success resposne.
data.replace('script', "");

Updating div content after form submit without page reload

alright, I have a popup which displays some notes added about a customer. The content (notes) are shown via ajax (getting data via ajax). I also have a add new button to add a new note. The note is added with ajax as well. Now, the question arises, after the note is added into the database.
How do I refresh the div which is displaying the notes?
I have read multiple questions but couldn't get an answer.
My Code to get data.
<script type="text/javascript">
var cid = $('#cid').val();
$(document).ready(function() {
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid="+cid,
dataType: "html", //expect html to be returned
success: function(response){
$("#notes").html(response);
//alert(response);
}
});
});
</script>
DIV
<div id="notes">
</div>
My code to submit the form (adding new note).
<script type="text/javascript">
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: { note: note, cid: cid }
}).done(function( msg ) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();
//$("#notes").load();
});
});
</script>
I tried load, but it doesn't work.
Please guide me in the correct direction.

Create a function to call the ajax and get the data from ajax.php then just call the function whenever you need to update the div:
<script type="text/javascript">
$(document).ready(function() {
// create a function to call the ajax and get the response
function getResponse() {
var cid = $('#cid').val();
$.ajax({ //create an ajax request to load_page.php
type: "GET",
url: "ajax.php?requestid=1&cid=" + cid,
dataType: "html", //expect html to be returned
success: function(response) {
$("#notes").html(response);
//alert(response);
}
});
}
getResponse(); // call the function on load
$("#submit").click(function() {
var note = $("#note").val();
var cid = $("#cid").val();
$.ajax({
type: "POST",
url: "ajax.php?requestid=2",
data: {
note: note,
cid: cid
}
}).done(function(msg) {
alert(msg);
$("#make_new_note").hide();
$("#add").show();
$("#cancel").hide();}
getResponse(); // call the function to reload the div
});
});
});
</script>

You need to provide a URL to jQuery load() function to tell where you get the content.
So to load the note you could try this:
$("#notes").load("ajax.php?requestid=1&cid="+cid);

Trouble consuming html source in javascript code

I'm trying to replicate the WhateverOrigin service, seen here:
http://stackshare-importer.herokuapp.com/get_website?url=http://firebase.com
However when I try to run it on my browser this code which worked perfectly on WhateverOrigin no longer works with my dummy service:
$.getJSON("http://stackshare-importer.herokuapp.com/get_website?url=" + import_url + "&callback=?", function(data) {
console.log(data);
});
Uncaught SyntaxError: Unexpected token <
I just want to work with the html source string, how can I achieve this?
Edit:
Also tried this and get the same result:
$.ajax({
url: "http://stackshare-importer.herokuapp.com/get_website?url=" + import_url + "&callback=?",
jsonp: "callback",
dataType: 'jsonp',
success: function(response) {
console.log(data);
}
});

Sites like WhateverOrigin and AnyOrigin get the page you want and convert it to a JSON/JSONP object, which allows it to be used cross-origin.
If you are trying to replicate what those websites are doing, you will need to create a PHP script which gets the page as a variable and then converts it to JSON and outputs it in a JSONP object.
Change the PHP on your page "get_website" to:
<?php
$page = file_get_contents($_GET['url']);
echo 'jsonCallback({"html":'.json_encode($page, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_QUOT).'});';
?>
Then use this HTML/JS on any site to output the JSON:
<div class="stuffhere"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$("document").ready(function () {
$.ajax({
type: 'GET',
url: 'http://stackshare-importer.herokuapp.com/get_website?url=http://firebase.com',
jsonpCallback: 'jsonCallback',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
alert(json.html);
$("div.stuffhere").html(json.html);
}
});
});
</script>
..and it will work!

How to redirect response from ajax request

I need to redirect to a page from response. I made a ajax call and can handle success. There is html page in response, but how to redirect it to that page.
Here's my code.
$("#launchId").live('click',function(){
var id= $("#id").val();
var data = 'id='+id;
$.ajax({
url: "xyz.json",
type: "post",
data: data,
dataType: 'json',
complete : function(response) {
window.location.href = response;
}
});
});

Not using ajax would make this easier:
<form type="POST" action="xyz.json">
<label for="id">Enter ID:</label><input id="id" name="id">
<button type="submit" id="launchId">Send</button>
</form>
If you really want to use ajax, you should generate a distinct server response, containing only the HTML parts you want to update in your page or actual JSON.
If you insist on using the response which you currently get, the appropriate way of dealing with it would be document.write:
$.ajax({
url: "xyz.json",
type: "post",
data: data,
dataType: 'html', // it's no JSON response!
success: function(response) {
document.write(response); // overwrite current document
},
error: function(err) {
alert(err+" did happen, please retry");
}
});

Please try this.
var newDoc = document.open("text/html", "replace");
newDoc.write(response.responseText);
newDoc.close();

Your response is an object containing the full HTML for a page in the responseText property.
You can probably do $(body).html(response.responseText); instead of window.location.href = ...; to overwrite the current page content with what you got a response.
...
complete : function(response) {
$(body).html(response.responseText);
}
But i suggest you don't and there could be style and other conflicts with whats already there on the page.

In your HTML add a div with id as 'content', something like this
<div id='content'/>
Since your response is html in your complete function append the content into the div like this -
complete : function(response) {
$('#content').append(response.responseText);
}
Let me know if you still face issues.

try this
$("#launchId").live('click',function(){
var id= $("#id").val();
var data = 'id='+id;
$.ajax({
url: "xyz.json",
type: "post",
data: data,
dataType: 'json',
complete : function(response) {
window.location.href = '/yourlocation?'+response;
}
});
});