We Keep Coding

Load and write text file into html [duplicate]

I want to load a *.txt file and insert the content into a div.
Here my code:
js:
$(document).ready(function() {
$("#lesen").click(function() {
$.ajax({
url : "helloworld.txt",
success : function (data) {
$(".text").html(data);
}
});
});
});
html:
<div class="button">
<input type="button" id="lesen" value="Lesen!" />
</div>
<div class="text">
Lorem Ipsum <br />
</div>
txt:
im done
If i click on the button firebug report following error:
Syntax-Error
im done
I don´t know what to do :-(

You need to add a dataType - http://api.jquery.com/jQuery.ajax/
$(document).ready(function() {
$("#lesen").click(function() {
$.ajax({
url : "helloworld.txt",
dataType: "text",
success : function (data) {
$(".text").html(data);
}
});
});
});

You could use jQuery.load(): http://api.jquery.com/load/
Like this:
$(".text").load("helloworld.txt");

The .load("file.txt") is much easier. Which works but even if testing, you won't get results from a localdrive, you'll need an actual http server. The invisible error is an XMLHttpRequest error.

You can use jQuery load method to get the contents and insert into an element.
Try this:
$(document).ready(function() {
$("#lesen").click(function() {
$(".text").load("helloworld.txt");
});
});
You, can also add a call back to execute something once the load process is complete
e.g:
$(document).ready(function() {
$("#lesen").click(function() {
$(".text").load("helloworld.txt", function(){
alert("Done Loading");
});
});
});

Try
$(".text").text(data);
Or to convert the data received to a string.

<script type="text/javascript">
$("#textFileID").html("Loading...").load("URL TEXT");
</script>
<div id="textFileID"></div>

Add javascript function to wordpress page

I have a page that locates a link inside it and when that link is clicked it should save some data in database.
Besides, I have a file named "add.php" that communicates with the DB and operates well.
In my wordpress page I have added below codes for accessing the add.php file and send some parameters to it.
<a href="javascript:add(true);" >Click Me</a>
<script type="text/javascript">
function add(b){
$(document).ready(function(){
var result = $.ajax({
type: "POST",
url: "add.php",
data: { add: b }
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert( "No such data exists: " + textStatus );
});
});
}
</script>
I had this exact code in an html file and it worked smoothly. but it doesn't work on wordpress page like that.
Plus, the problem is that when I click the link -Click Me- it doesn't do anything.
please tell me where the problem is and how to solve it ?

I would recommend you to use this:
<a href="#" data-add="true" class='hitClick'>Click Me</a>
<!--use data* attributes to pass specific data -->
now in your function:
function add() {
event.preventDefault(); //<------make sure to add it.
var result = jQuery.ajax({
type: "POST",
url: "add.php",
data: {
add: jQuery(this).data('add')
}
});
result.done(function(msg) {
alert(msg);
});
result.fail(function(jqXHR, textStatus) {
alert("No such data exists: " + textStatus);
});
}
jQuery(document).ready(function(){
jQuery('.hitClick').on('click', add); // bind the click and use as callback
});

Why the jQuery colorbox popup is not getting displayed when called through $.ajax() method?

I'm calling a hidden colorbox popup in the $.ajax() method's success: function() but I'm not able to show that. I did the same thing previously but at that time it worked fine, now it's not displaying the specified hidden pop-up. The only difference from this implementation to previous implementation I was using data attrribute of $.ajax() method in the previous implementation. Does that thing is responsible for my current issue? Please help me out in resolving this issue. For your reference I'm putting the necessary code snippets as follows:
<div class="hidden">
<div id="emailinfoPopContent" class="c-popup">
<h2 class="c-popup-header">Email Invoice</h2>
<div class="c-content">
<h3>Invoice has been sent to your email id</h3>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(document).on('click', '#email_url', function (e) {
e.preventDefault();
var post_url = $(this).attr('href');
$.ajax({
url: post_url,
type : 'get',
dataType: 'json',
success: function(data) {
var status = data.status;
var dialog_title = "Email Invoice";
var message = data.msg;
if(status == 'success') {
$.colorbox({
inline:true,
href: "#emailinfoPopContent",
width:666
});
//alert(message);
} else {
$.colorbox({
inline:true,
href: "#emailinfoPopContent",
width:666
});
//alert(message);
}
}
});
});
});
</script>
One more thing I wold like to say is I'm getting the proper response from PHP code in json format, if I show alert instead of colorbox it shows the desired response properly. There are no syntactical errors found in firebug console and I'm using jQuery 1.9

try adding open: true, like:
$.colorbox({
inline:true,
href: "#emailinfoPopContent",
width:666,
open: true
});

You can try something like this. I am not sure about this
var show_html = $('emailinfoPopContent').html();
$.colorbox({html:show_html});

How to get the html of a div on another page with jQuery ajax?

I'm using jQuery's ajax code to load new pages, but wanted him to get only the html of a div.
My codes:
HTML:
<body>
<div id="content"></div>
</body>
Script:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html(data);
}
});
I wanted him to get only the html of $('div#content') on another page. How to do it?

Ok, You should "construct" the html and find the .content div.
like this:
$.ajax({
url:href,
type:'GET',
success: function(data){
$('#content').html($(data).find('#content').html());
}
});
Simple!

You can use JQuery .load() method:
http://api.jquery.com/load/
$( "#content" ).load( "ajax/test.html div#content" );

If you are looking for content from different domain this will do the trick:
$.ajax({
url:'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Briarcliff_Manor,_New_York',
type:'GET',
success: function(data){
$('#content').html($(data).find('#firstHeading').html());
}
});

Unfortunately an ajax request gets the entire file, but you can filter the content once it's retrieved:
$.ajax({
url:href,
type:'GET',
success: function(data) {
var content = $('<div>').append(data).find('#content');
$('#content').html( content );
}
});
Note the use of a dummy element as find() only works with descendants, and won't find root elements.
or let jQuery filter it for you:
$('#content').load(href + ' #IDofDivToFind');
I'm assuming this isn't a cross domain request, as that won't work, only pages on the same domain.

$.ajax({
url:href,
type:'get',
success: function(data){
console.log($(data));
}
});
This console log gets an array like object: [meta, title, ,], very strange
You can use JavaScript：
var doc = document.documentElement.cloneNode()
doc.innerHTML = data
$content = $(doc.querySelector('#content'))

How To implement the Javascript to elements which has been added to head section of HTML By Jquery prepend()?

I have this in my head section.
<script type="text/javascript" src="post.js"></script>
I want this post.js to be also be implemented to the newly created elements.My another js file which is named as main.js have a code that get data from another php file and prepend it in a div with id display.Previous Loaded Div works great with the post.js file but as new elements are prepended, it does not work for new ones. Here is my main.js code which get data from php file and prepend it:
var auto_refresh8 = setInterval(function() {
var id = "id="+$(".ally:first").attr("id");
$.ajax({
type: "POST",
url: "get_post.php",
data: id,
cache: false,
success:function(html){
$('#display').prepend(html);
}
});
},2000);
this jquery ajax request get data from get_post.php file and prepend it to the div display. but the code in post.js doesn't work with this.The data returned by jquery ajax request contains a div with class comm which have to submitted when keypress function acts.
following is the code of post.js :
$(document).ready( function() {
$(".comm").keypress(function(e) {
if(e.which == 13) {
var id = $(this).attr("id");
var data = 'id=' + id;
var post = $(this).val();
var data1 = 'comment='+post;
var wholedata = data+'&'+data1;
$(this).blur();
$.ajax({
type: "POST",
url: "c_insert.php",
data: wholedata,
cache: false,
success:function(html){
$('.class_all'+id).append(html);
}
});
return false;
}
});
});

Use a delegate to handle the event in post.js file instead. See the jQuery documentation for more information.
Something like this should do it:
$('#display').on('keypress', '.comm', function (e) {
if(e.which == 13) {
// Do code on event
}
});
Note that the "on" function should only be used if you are using jQuery version 1.7 or later. Previous versions uses the function "delegate".
edit Changed $(document).on(...) to $('#display').on(...) since all '.comm'-elements are children of '#display'.