We Keep Coding

jQuery text() and show() not working ( RoR application)

I want to implement a custom and simple check of the number of items that I have in the cart.
First, I load my page with a place holder div in one of my menu elements:
<div id="items_count" style="display:none;">(count)</div>
Then in my javascript file (application.js) I have the following code:
$(document).ready(function () {
$items_count_element = $("#items_count");
if ($items_count_element.length > 0 )
{
$.ajax({
url: '/get_items_count',
type: 'GET',
dataType: 'json',
success: function (response) {
// Construct the new string to display
items_count_new_content = "(" + response.items_count + ")";
// Printout to verify that we point to the correct div
alert($("#items_count").text());
// Verify the new string to display
alert(items_count_new_content);
// Empty the div element and replace the content with the new string
$("#items_count").empty().text(items_count_new_content);
// Remove display : none
$("#items_count").show();
}
});
}
});
The AJAX requested is executed with success, and the alerts display the expected text ( "(count)" and lets's say "(3)", which means i have 3 items in the cart ).
But $("#items_count").empty().html(items_count_new_content); and $("#items_count").show(); seem to not work at all, even if the functions are simple enough. Moreover, I've used them many times in the past with success...
I've tried to replace text() with html() with no success.
Any ideas what may be the problem here ?
Thanks

In jQuery, you can change a value with val:
$("#items_count").empty().val(items_count_new_content);

After debugging, i noticed that i had 2 menus on the page instead of one ( the normal menu and the sticky menu ). So my problem was the usage of the idas the selector my element. This caused that the jQuery replaced the content only for the sticky menu ( Which is invisible in the top of the page ), since we are supposed to have unique ids for each element in the DOM.
I fixed my issue by replacing $("#items_count") by $(".items_count_div")
I hope it'll help whoever encounter similar problem.

Append different div to divs loaded by ajax request(Infinite scroll)

I am using this plugin on my website. You will be able to see the HTML structure it is generating. I am trying to insert custom div after every 5 divs. Since it is loaded asynchronously, I am not able to append div that I wanted. I tried adding the following code which is used in normal situation
$(".alm-reveal:eq(0)").append("<div>Firstdiv</div>");
$(".alm-reveal:eq(1)").append("<div>Second Image</div>");
$(".alm-reveal:eq(2)").append("<div>Third IMage</div>");
$(".alm-reveal:eq(3)").append("<div>Fifth Image</div>");
$(".alm-reveal:eq(4)").append("<div>Sixth Image</div>");
$(".alm-reveal:eq(5)").append("<div>Seventh Image</div>");
$(".alm-reveal:eq(6)").append("<div>Eigth Image</div>");
$(".alm-reveal:eq(7)").append("<div>ninth Image</div>");
which obviously did not work. I also tried adding it in the success function.
success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal").append("<div>Firstdiv</div>");
}
But since it is in the loop, it is repeating. I am quite not sure how to achieve this. How do I trigger append function every time an ajax request is made and append different divs I wanted in proper place. Hope I am clear.

success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
data should be passed accordingly to get different data in the div.

success: function (data) {
alm.AjaxLoadMore.success(data);
$(".alm-reveal:last").append("<div>"+data+"</div>"); //selects last div in that class
}
every time you append, you should append to last div in that particular class

I am answering my own question though I am not sure if this is the efficient way to do. But it works 100% the way I wanted.
if(data.indexOf("aj-l-main-entry-8") > -1) //Making sure AJAX div is loaded
{
if(document.getElementById("element-id") == null) { //Appending div only once
$("#id_of_the_div_you_want_to_append_to").append('<div></div>');
}
}
I have added the above code in the success function.

JQuery ignore html created with ajax

I have an html table and it's content created with ajax
And I have a button which adds a row at the begining of the table
But JQuery don't know about the ajax content and adds row only after it
$("#add-row-first").on("click", addrowfirst);
function addrowfirst(){
$("#table").prepend("<tr><td>1</td><td>cell</td><td>cell</td><td>cell</td></tr>");
}
ajax
function genTable(){
$.ajax({
type: "POST",
dataType: "html",
url: "inc/gen-table.php",
success: function(data){
$("#table").html(data);
}
});
}
html
<button id="add-row-first">create row</button>
<table id="table"></table>
SOLUTION
So the solution was very simple.
My ajax reqest return string "<tr><td>some text</td></tr>".
So there is no <tbody> tag and the prepend insert code into tbody tag which not exsists.
And it automaticly creates it after ajax generated code. So your ajax should return <tbody><tr><td>some text</td></td></tdbody>

if element #add-row-first is created after the document is created you can't use it that way. You can use the .on() with another parameter so it will find the element like this instead
$("#table").on("click", "#add-row-first",addrowfirst);
If I am understanding your issue correctly, this should do it. The documentation is a little hard to digest, but basically, the first element #table needs to exist at the time of the document being loaded, and the element #add-row-first can be added to the DOM later, as long as it is a child of #table jQuery knows how to find it.

Simplest solution of this case could be
var data = "<tr><td>1</td><td>cell</td><td>cell</td><td>cell</td></tr>";
$('#table').html( data + $('#table').html());

Finding and Executing / Extracting embedded JavaScript from AJAX result using jQuery

I'm performing an AJAX request to get a generated html page. I want to find a specific div in the result and inject it into the page where the request came from. I also want to include embedded script or script links which may be inside this div. Here is a simple sample of the page I want to get with AJAX
<html>
<head>
<script>alert("don't want this")</script>
</head>
<body>
<div id='findMe'>
<p>Some content</p>
<script>alert("want only this")</script>
</div>
<script>alert("don't want this")</script>
</body>
</html>
So I only want to extract the div with ID findMe. Here's what I have in the page that's doing the request
<script>
$(document).ready(function(){
$.ajax({
url: "ajax.htm",
success: function(data){
$(data).filter("#findMe").appendTo("#output");
},
dataType: "html"
});
});
</script>
<div id='output'></div>
But the script tag is missing and no alert appears. It seems to get taken out of the div. If I do
console.log($(data))
I can see each of the script tags as a document fragement, but how to I know which one was in the div before it was popped out?

You can try:
$(data).find('#findMe').appendTo('#output');
OR
$('<div/>').append(data).filter("#findMe").appendTo("#output");
Append data to a demo div (not exists in DOM) and make filter over that.

I think instead of .filter(), which filters the current jQuery collection, you have to use .find():
$(data).find("#findMe").appendTo("#output");
But I am unsure whether the script tag will be executed or not..

I had to treat the result as XML. Find the element I'm looking for in the XML object using jQuery .find(), select the actual node (array pos 0), convert the contents of the node to a string, and inject into the output div. This is the only method I've found that executes scripts only contained in the target div.
$.ajax({
url: "ajax.htm",
success: function (data){
var node = $(data).find("#findMe")[0];
if(node.xml)
{
$("#output").html(node.xml)
}
else if(new XMLSerializer())
{
$("#output").html((new XMLSerializer()).serializeToString(node));
}
},
dataType: "xml"
});

Add table row using after() and load()

My question is very similar to this topic. I'm trying to use jquery, so that when you click on a table row, it loads certain information from another page and insert as a new row below the one clicked on.
If I didn't have to load the data from another page, I could just use something like:
clicked.after('<tr><td>Something</td><td>Something</td></tr>');
If I wanted to load and insert into something other than a table, I could use something like:
clicked.after($('<div>').load("Page2.aspx"));
So how do I go about combining these two together? If I have on the first page:
clicked.after($('<div>').load("Page2.aspx"));
And have Page2.aspx returning:
<tr><td>Something</td><td>Something</td></tr>
I would get this:
<tr><td>...</td><td>...</td></tr><div><tr><td>Something</td><td>Something</td></tr></div>
Which is not valid HTML.
Any suggestions?

Use after in the callback of a get rather than load.
$('.clicked').click( function() {
var $clicked = $(this);
$.get('Page2.aspx', function(html) {
$clicked.after(html);
});
});