Counting the number div loaded from external php file - javascript

I have two php files, child.php and parent.php. Child.php generates div. Now, the parent.php calls child.php to be loaded in <div id='divContainer'>. Now, I need to count the div inside the divContainer. Is it possible?
I tried something like this:
$(document).ready(function () {
var total_record = $('#divContainer > div').length;
alert(total_record);
});
But it's not working. Even an empty alert is not popping out.
Can someone here, help me on this? THank you!

There's a syntax error:
)};
Should be:
});
Often if you are not getting any output/result at all when expected, it is down to a syntax error which will cause the browser to be unable to parse and execute the code. For future debugging, use the error console as this normally points out any errors with a decent description of the problem.

Related

How to fill a div that is loaded from another html page

I'm trying to load a div from another html page, then fill it with values from my main html page.
My div is correctly loaded and displayed, but it seems like it doesn't want to fill up. Here's what I have so far :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
});
So when I click on the "valider" button, my div is loaded and displayed, so far so good.
And here's where I'm struggling, I tried this :
if ($('ag_pub_panneau_detail_html').is(':visible')) {
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
but the div stays blank. So I tried this instead :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div", fillDiv());
$("#ag_pub_panneau_detail_html").show();
});
function fillDiv(){
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
But I get the same result. So I tried something else :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
});
I was thinking that since the .show() works well, I could add my line below it, but it doesn't seem to execute either.
So I used to think that this line :
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
Was wrong but when I execute it from the Chrome console, the field is correctly filled... I don't know what's happening, and I'm out of ideas for my issue.
Is there something I'm doing wrong ?
I can provide more code/details if you want to, just ask me
Any help would be greatly appreciated !
I managed to get it working, what I did is that I created a js file for the Ag_pub_panneau_detail.html page (the one that is loaded) in which I just wrote :
$(document).ready(function()
{
$('#ag_pub_panneau_entityid').val(localStorage.getItem("ag_pub_panneau_entityid"));
});
And now it works like a charm :)
By the way, can I know why I have those downvotes on my question ?
Anyway thanks for your help !

JSON output on HTML page

I want to display a JSON object on a html page. When I enter
productArray[0][0].xyz
into the Firefox console then I get a value back.
Question:
How can I display the value which is stored in this variable on a HTML page?
I have tried this (didn't work):
<div id="test">
<script>
window.onload = function()
{
var out = productArray[0][0].xyz;
document.getElementById("test").innerHTML = out;
}
</script>
Since it's working in console in browser, I guess it's a timing problem. You're probably trying to use the value in the json before the json data is loaded and ready to use.
Assuming you're running an xhttp request or ajax call or something you'll have to run the code AFTER data is loaded. Which often means running it inside successmethod.
Maybe this post and answer helps you locate the problem? NB: This uses Ajax, so feel free to update your post with some more information so we can help you with your solution / technologies.
Ajax success function
Assuming that missing div close tag is a typo most probably the productArray is not populated by the time your code executes. Can you post a more detailed snippet ?
var out = "your value";//productArray[0][0].xyz commented to show you running code uncomment it when you use this in you code. ;
document.getElementById("test").innerHTML = out;
<div id='test'></div>
You actually forgot to close the DIV tag.

Style.Display = "None" Not working in Google Apps Script HTML Service

I've got a fairly simple javascript function running in my HTML service template that is supposed to set the display of a div to "none." However, whenever I include the following line:
document.getElementById("timesheet").style.display = "none";
I get an error in my browser: "Cannot call method 'f___' of undefined." When I take it out, no errors.
Can someone please tell me if I'm missing something?
I know this is a decade old, but Google Apps Script doesn't know what "document" is by default. Debugging the function that contains this line of code will verify that
AFAIK (at least for editing sidebars), I don't think there's a direct way to edit the DOM like you can in a typical webpage
The best you can do I think is to use the functions provided here
Just use jQuery instead.
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(document).ready(function(){
$("#whateverYouAreClickingIDHere").click(function () {
$("#timesheet").css('display','none');
});
});
</script>

jQuery - Click on X, grab the NAME, then use that to show a related element

Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks
on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.
Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');
Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise

document.ready not executing on every load

I have a strange problem. I have a jQuery document.ready function executing some script on the page. When I was testing it through opening the file with firefox/opera it worked. When I uploaded it to the server (I tried both my home apache and my shared hosting) it only works once in 10 loads maybe.
What could be the problem?
Thanks beforehand
Edit:
Here is the code. It configures the correct size of side panels according to central panel.
<script type="text/javascript">
$(document).ready(function(){
// Get natural heights
var cHeight = $("#content").height();
var nHeight = $("#left").height() - $("#footer").height() - $("#header").height() - 10;
// Assign maximum height to all columns
$("#leftcontent").height(nHeight);
$("#rightcontent").height(nHeight);
$("#left").height(cHeight);
$("#right").height(cHeight);
});
</script>
Check that you have no JS syntax errors first (firebug or simply the error console).
If not have you considered just putting a simple alert in the ready function. If that still fails you know its something to do with the JQuery library itself (unlikely).
If you consistently get alerts you know its a problem with your own code. Further help with that will require sight of your code.

Categories

Resources