I have this code,
$(".delete").live("click", function () {
alert("!");
var self = $(this);
var loadUrl = $(this).attr('href');
var interestParents = self.parents('div:eq(4)').attr("id");
$.ajax({
type: "POST",
url: loadUrl,
data: "isAjax=1"
}).done(function (msg) {
self.parent().parent().parent().parent().parent().fadeOut('fast', function () {
$(this).remove();
});
//console.log($("#"+interestParents).load(site_url+"my_profile/interests " + "#" + interestParents).fadeIn('fast'));
//$("#UL_" + msg + "items").load(site_url + "my_profile/interests " + "#UL_" + msg + "items").fadeIn('fast');
$("#large_buttons").load(site_url + "my_profile #large_buttons > *").show();
});
return false;
});
and I cannot for life of me work out why the .load does not load the data into the large_buttons div, it definatly exists on the page, and it works in every other browser but IE8.
Check to make sure that the page you are "load"ing (my_profile) is valid HTML (no misplaced end tags, unclosed tags, etc). I had an issue like this with IE8 because the markup I was trying to load was invalid. Most browsers managed to interpret the bad markup, but IE8 failed.
An HTML validator may help you.
have you tried this way:
$("#large_buttons").show().load(site_url + "my_profile #large_buttons > *");
although i am unable to see where is the site_url variable, if this is a type then you should use this
$("#large_buttons").show().load(loadUrl + "my_profile #large_buttons > *");
Related
I have a problem with jquery append. This is the code:
$.ajax({
method: "POST",
url:
"/getcars.php",
data: {
model_car: sessionStorage.getItem("model")
}
}).done(function(msg) {
var obj = JSON.parse(msg);
$("#model").empty().append('<option value="-1">Model</option>');
var string_option = "";
Object.keys(obj.model).forEach(function(key) {
string_option += '<option value="' + obj.model[key] + '">' + obj.model[key] + '</option>';
});
console.log(string_option);
$("#model").append(string_option);
})
This code work very well, but not every time. (only the append option not working. This: console.log(string_option) it`s ok every time).
Can you help me, please?
Thank you!!
Looks like you need to put the code to be executed after the document is fully loaded using the "$( document ).ready" jQuery event
$( document ).ready(function() {
$.ajax({
method: "POST",
url:
"/getcars.php",
data: {
model_car: sessionStorage.getItem("model")
}
}).done(function(msg) {
var obj = JSON.parse(msg);
$("#model").empty().append('<option value="-1">Model</option>');
var string_option = "";
Object.keys(obj.model).forEach(function(key) {
string_option += '<option value="' + obj.model[key] + '">' + obj.model[key] + '</option>';
});
console.log(string_option);
$("#model").append(string_option);
})
});
You can learn more about this on the below link
https://api.jquery.com/ready/
Try to check the response on Ajax success sometimes it happens due to malformed JSON is sent back with a 200/OK
One possible problem could be that you run the .append() before DOM is loaded. If this is the problem you can try 2 methods:
put this javascript code inside footer.
add to your code:
$(document).ready(function(){
//... your ajax request
})
I am in a spot here trying to parse BBCode upon a AJAX success : item.message object. I am using jQuery 1.11. I have tried passing the var result in place of item.message, and only shows the [object] errors. I have tried wrapping item.message with XBBCODE and same thing.
Im not sure what to do, the script is great otherwise. We must parse bbcode to HTML or a method that can be managed PHP-side, but I don't think this is possible over JSON data.
Currently this is my jQuery code:
$(document).ready(function () {
$.ajax({
url: "/ajax/shoutbox.php",
method: "GET",
dataType: 'JSON',
success: function (data) {
var html_to_append = '';
$.each(data, function (i, item) {
// Object array repeated - not working
var result = XBBCODE.process({
text: 'item.message',
removeMisalignedTags: false,
addInLineBreaks: false
});
/*
currentPost = jQuery(this);
postHTML = bbcodeToHTML(currentPost.html());
currentPost.html(postHTML);
*/
html_to_append +=
'<div class="shoutbox-container"><span class="shoutDate">' +
jQuery.timeago(item.date) +
' <span style="color:#b3b3b3">ago</span></span><span class="shoutUser"><img src="' +
item.avatar +
'" class="shout-avatar" /></span><span class="shoutText">' +
item.message +
'</span></div><br>';
});
$("#shoutbox").html(html_to_append);
$(".shoutbox-container").filter(function () {
return $(this).children().length == 3;
}).filter(':odd').addClass('shoutbox_alt');
$(".shoutbox-container").each(function () {
$(this).parent().nextAll().slice(0, this.rowSpan - 1).addClass('shoutbox_alt');
});
}
});
});
As you see, I'm trying to make use of the following javascript:
https://github.com/patorjk/Extendible-BBCode-Parser
I've followed the instructions exactly, before moving into the JS above with no success either way. I get this:
[object][Object]
For each iteration of the message object coming back (its a custom AJAX shoutbox).
Commented, you can see another method I have tried to no success. Any help is appreciated!
Update: Working
Thank you, Quiet Nguyen for the suggestion for replacing item.message with result.html and updating text: object
test.xml
<Bock1>
<No>123</No>
<RoomNo>10</RoomNo>
<UpdateTime>1230</UpdateTime>
</Block1>
run.js
$.ajax({
type: "GET",
url: test.xml,
dataType: "xml",
success: function (xml) {
$(xml).find('Block1').each(function () {
var updateTime = $(this).find("UpdateTime").text();
var no= $(this).find("No").text();
var roomNo = $(this).find("RoomNo").text();
var status = no + '<br/>' + roomNo + '<br/>' + updateTime;
});
}
});
$('<div>')
.attr({
'data-role': 'collapsible', 'data-collapsed': 'false', 'data-mini': 'true'
})
.html('<h4>' + item_name + '</h4><p>' + status + '</p>')
.appendTo(collapsibleset);
}
});
I'm using this to generate collapsibleset with xml data,
but status can't correctly fill into
<p> + status + </p>
status will get correctly inside ajax, but can't get to collapsibleset.
I've tried to use global variable, but get same situation.
How could I fill it in correctly?
I'm new to jquery & javaScript,
Thanks for any answers!!!
jQuery.ajax() is expecting string for the URL value.
Therefore your URL just needs wrapping in quotes.
Then your DOM reference of the
$('< div >')
is wrong.
To reference an element in JQuery, you have several options, but the easiest is to give an element an id and then reference that (think CSS)
$('div') would get all divs
$('div#my_id') would get this particular element:
In the code below after I upload my document I wrote a loop which is supposed to add some images into a division called Divnavigation, but this part doesn't work.
Also when I make it uncommented even my documentViewer can not be loaded. Am I allowed to add something to my division from AJAX call?
function navigate(target) {
$.ajax({
url: '#Url.Action("Download", "Patient")',
type: 'GET',
async: true,
dataType: 'json',
cache: false,
data: { 'filepath': target },
success: function (results) {
// documentViewer.loadDocument(results);
documentViewer.uploadDocumentFromUri(results[results.length -1]);
documentViewer.addEventListener(gnostice.EventNames.afterDocumentLoad, function (eventArgs) {
document.getElementById("TotalPage").textContent = documentViewer.viewerManager.pageCount;
document.getElementById("pageNumber").value = documentViewer.viewerManager.currentPage;
$("#Divnavigation").empty();
//Get all images with the help of model
for (var i = 0; i < results.length; i++) {
$("#Divnavigation").append(" <ul> " +
"<li>" +
"<img src=" + results[i] + ">" + "</img>" +
"" + "" +
"</li>"
+ "</ul>");
}
});
//showImages();
},
error: function () {
alert('Error occured');
}
});
}
Hi Answer to your question first:
Am I allowed to add something to my division from .ajax call?
you are 100% allowed to add something to your division from .ajax call. there is no doubt in that. I done personally many times
This time you are not getting because of some other reason.
Now my suggestion is try using $("#Divnavigation").html().
Official doc: https://api.jquery.com/html/
so first as first step try by putting simple html like this $("#Divnavigation").html("<p>test</p>) and see whether you get the output. if you get then change, html string whatever you want ,that can be hardcoded string or even you can get that string from the action method.
Hope above information was helpful. kindly share your thoughts
Thanks
I'm writing a chrome extension and I'm trying to get the RSS feed "media:thumbnail" but the function el.find('media\:thumbnail').attr('url') outputs 'undefined'.
Here's my code :
$.get("http://www.reddit.com/.rss", function (data) {
$(data).find("item").each(function () { // or "item" or whatever suits your feed
var el = $(this);
$("tbody").append("<tr><th>" + el.find('media\\:thumbnail').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>");
});
});
There is something in JS that is called "same origin policy". It means that you cannot query stuff, that is not from the same domain, using the same protocol and uses the same subdomain.
You need to research "cors" to make calls to another domain possible, but in this case, this won't help you. Cors needs you to include stuff in the http response header.
Another way out is to configure your web server as a reverse proxy and mask the requests from reddit as a local call.
Here is the scripts that will help
First, you need a server script that will pick crosdomain content
<?php // crossdomain php script
header('Content-type: application/xml');
header('Access-Control-Allow-Origin: *');
ini_set('error_reporting', E_WARNING );
$str_xml = '';
if ($_POST['source'] === 'reddit') {
$str_xml = file_get_contents('http://www.reddit.com/.rss');
}
die($str_xml);
?>
Then make Ajax requests and parse response xml
$.ajax({
type: "POST",
url: "crossdomain.php",
dataType: "xml",
data:{source:"reddit"},
success: function(xml){
var xmlText = new XMLSerializer().serializeToString(xml);
$(xmlText).find("media\\:thumbnail").each(function(){
$("tbody").append("<tr><th>" + $(this).attr('url') + "</th><td>" + $(this).parent().find("title").text() + "</td></tr>");
});
}
});
I found a workaround. I use the element "description" of the RSS feed. It contains the link to the image.
Xml :
<description>
<table> <tr><td> <img src="http://b.thumbs.redditmedia.com/50jHjrHnJTSIX_Q86UUXe1Kc-rAxYyhEd90GeUDJHao.jpg" alt="Cat walks into a bar." title="Cat walks into a bar." /> </td><td> submitted by _dear_ms_leading_ to funny <br/> [link] [69 commentaires] </td></tr></table>
</description>
Jquery :
$('' + el.find('description').text()).find("img").attr("src")
I cannot believe that people do not understand this question and give an answer about something else.
The questioner does not mention CORS or any possible error that could point to it.
The question is simply asking about JQuery selectors on XML nodes rather than HTML, the fact that he is using AJAX to get an RSS feed is irelivant, so one can assume that CORS is not an issue in this case.
I had been struggling with the exact same thing, apparently double backslash is supposed to escape, but doesn't seem to work in this case.
What I did instead is use the JQuery attribute selector with the attribute url, all thumbnails have url attributes in my case.
So your code would be:
$.get("http://www.reddit.com/.rss", function (data) {
$(data).find("item").each(function () { // or "item" or whatever suits your feed
var el = $(this);
$("tbody").append("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>");
});
});
Update
It might be better to use map
$.get("http://www.reddit.com/.rss", function (data) {
var tbody = $('tbody');
tbody.append(
$(data).find("item").map(function () { // or "item" or whatever suits your feed
var el = $(this);
return $("<tr><th>" + el.find('[url]').attr('url') + "</th><td>" + el.find("title").text() + "</td></tr>");
}).get()
);
});
I have tested it mind