My code does not apply on first render … since the chart is being loaded from a webservice via ajax but on eventual calls it applies.i.e. on page refresh , the code works since the json webservice is stored in the session…why doesnt the code apply on the first render …
$(document).ready(function(){
var x = new Array();
$('svg > g:first-of-type').each(function(){
x.push($(this).attr('transform'));
});
// Toggle the side navigation
$("#sidenavToggler").on('click',function(e) {
e.preventDefault();
$("body").toggleClass("sidenav-toggled");
$(".navbar-sidenav .nav-link-collapse").addClass("collapsed");
$(".navbar-sidenav .sidenav-second-level, .navbar-sidenav .sidenav-third-level").removeClass("show");
$('svg').removeAttr('width');
$('svg').attr("width","100%");
//---> start of the failed code-->
$('svg > g:first-of-type').each(function(k){
if(typeof x[k] === 'undefined')
{
if($("[id^='d3']").children("path,g").attr('transform') === x[k])
{
$("[id^='d3']").children("path,g").attr('transform','scale(0.82)')
}
else
{
$("[id^='d3']").children("path,g").removeAttr('transform');
}
}
else{
if($(this).attr('transform') == x[k])
{
$(this).attr('transform',x[k]+' scale(0.82)');
}
else
{
$(this).attr('transform',x[k]);
}
}
});//--->ending of the failed code --->
}
});
});
Hi @narayananvishu1993, there’s no AJAX nor session in the code snippet you posted. But the part you commented as failing is inside a click handler – do you maybe just have to invoke that function initially too?
no that click event is required throughout the program. the ajax nor session is available , because its a vast project having multiple js files , the g element of the svg is dynamically uploaded using ajajx in some other js file r, rather in some 10 or 20 js files corresponding to some 10 or 20 html files . And this snippet is in a js file which has been included in each of these html pages… the only problem is how to synchronize this event , such that it happens only after all the g elements have been loaded. Meaning on the first render , when the request is sent to the server . Hope you are getting my point.
Eg:- Imagine 10 doors(10 ajax in 10 js files) you need to pass through before running this script, but my script is running in the midst of these 10 doors.
That would be because the first A in AJAX is Asynchronous.
AJAX requests operate outside the normal flow; the document is ready before AJAX finishes loading.
If you want your code to wait for the completion of an AJAX request, you’ll have to include it as part of the AJAX function’s callback rather than a document.ready.
As @m3g4p0p pointed out, your failed code is inside a click handler; that means it wont trigger ‘on first load’, but only when a click is registered to the target element (in this case, your element with id sidenavtoggle).
Additionally, count your parenthesis. My document reader is telling me your statement blocks aren’t balanced correctly.
thats just a minor issue…its part off the external code which i have not included
and i am not telling that the click would happen on the first load automatically… its just that on first load when the page gets loaded and after which i make the first click , my g within svg should scale to 0.82 but its not occuring … but on subsequent refreshes it is happenning so …why(i.e on a subsequent refresh , the click event scales my image i.e g within svg to 0.82 …
It’s really not, you’re missing a ). But if you’re going to ignore the advice we’re giving you… good luck on finding your error.
i got that bruh!!
its ok … its taken care of … i have a smart ide to do that for me… just help me with the logic please
sb-admin.js (5.3 KB)
and i am not telling that the click would happen on the first load automatically… its just that on first load when the page gets loaded and after which i make the first click , my g within svg should scale to 0.82 but its not occuring … but on subsequent refreshes it is happenning so …why(i.e on a subsequent refresh , the click event scales my image i.e g within svg to 0.82 …
Well thats not necessarily true because your g (and only the FIRST g) might not have the correct attribute to be scaled .
show me the rendered HTML of your page immediately before you click on #sidenavToggler for the first time.
sb-admin.js is also included in this html file
you see the g has the appropriate attribute …when i open the inspector …its been loaded …since the chart i coming via an ajax call… i.e the g element on tjhe first load is coming via an ajax call and also getting stored in the session…and post that on a refresh its being accesed
I see no <g> elements in the HTML you provided at all. So no, I dont see any g’s with the appropriate attribute.
Please note that I did edit my post to say I wanted the rendered HTML. As in… go to your webpage, open the inspection tab for Elements, right click on the html tag, choose “Copy” then “Copy outerHTML”
test.html (223.7 KB)
html before the click
sorry for the delay…I was out for lunch
test_1.html (223.7 KB)
html after clicking on the sidenav for the first render
test_2.html (224.1 KB)
html after clicking on the sidenav for subsequent renders (i.e. on refreshing the page)
This is what I want for the first render too but I am getting a different result on the first render as you can seee
Straight away move to the svg tags in each html page and you would understand what I am talking about for…further clarity I am attaching screenshots
So immediate response: Update to jQuery 3, because 1.X is no longer updated.
Second response: Why are you loading jQuery multiple times? There’s at least 5 different jquery files being loaded in this script. Not… extensions, just flat out jquery libraries. Your IDE is failing you.
So; down to the logic level.
$(this) doesnt hold the context you think it does. Because this is an event handler script, $(this) refers to the link that was clicked, not the element inside the each.
.each() exposes 2 parameters: index and element. Use the second to refer to the element bound by the set.
That element is not a jquery object but rather a standard HTML element, so you would refer to the .getAttribute() value for that element.
Your hunting algorithm is looking for different elements than your each function. The each searches for direct descendents of svg of tag “g”, the undefined case looks for “path,g” (and will find only one element, a path). If your intention is to modify the element currently referenced by index k, the appropriate reach would be
$("[id^='d3']").children("g")[k] (or again, use the second parameter of the each)
I cant say I see value in referencing x[k] in the inner if of the first block, because at that point you’ve already asserted that x[k] is undefined, so for readability i’d just make that the check condition rather than looking up x[k] again.
Also, condense your logic.
the outer if is entirely unnecessary; here’s the compacted logic in quasi-pseudocode:
foreach (g in SVG):
let tval equal to the attribute "transform" of the current element or the empty string.
if(tval contains 'scale')
set attribute to tval while replacing the regex string "[Optional space]scale([anything])" with the empty string.
else set attribute to tval plus the string " scale(0.82)".
sorry bruh…your solutions did not work…since path and g are an understood requirement for me only…My experience tells me that the sb-admin is running before the g chart renders on the first click and that’s what i wanted the solution for…the condensed logic is a good add-on,…but the $(this) does not refer to the click icon since its scope is limited to the for each loop and would not go beyond that. A thumbs up for the replies though …I ll think something and if I come up with a solution…Ill enlighen you… If you want to help please give a little time …
since
$(document).load gives result expected on the first render but not on subsequent renders and $(document).ready() gives result on subsequent renders but not on the first one…please suggest a midway between the two…Take your time please…
