JQuery not updating CSS elements after PHP include - javascript

I am loading PHP files with JQuery/Ajax.
This is the index.php file where the webpages are called
<div class = "view-screen">
<?php include('home.php'); ?>
</div>
Depending on which nav link is clicked, that page will display without refreshing.
$(document).ready(function() {
// ...
$navLinks.click( function() {
var $this = $(this)
target = $this.data('target')
toggleMenu()
$viewScreen.load(target + ".php")
$this.data('clicked', true)
if ($this.data('clicked') && target === "about") {
activateAbout()
}
return false
})
function activateAbout() {
console.log('activated')
}
}
The console log works, and displays 'activated'. The pages do load.
All of my scripts compile and link correctly to each other.
However, when I include code that updates the target page CSS in the activateAbout() function, it doesn't work. For example:
$('body').css("background-color", "white")
in activateAbout() works, but calling/updating CSS elements in the chosen .php file doesn't, such as
$('.about p').css("color", "white")
// OR
$('.about').toggleClass('activate')
I have a feeling this has something to do with the order in which these files are loaded, but I'm not sure! Thanks for the help in advance

This is common phenomenon. The reason you are not able to apply the css is because, your content is loading after, you call activateAbout(). I would recommend to call activateAbout() once the $viewScreen.load(target + ".php") loads the data successfully. jQuery.load() supports callback too. Refer to the example usage at https://www.w3schools.com/jquery/jquery_ajax_load.asp. So, it should look like
$(document).ready(function() {
$navLinks.click( function(){
var $this = $(this);
target = $this.data('target');
toggleMenu();
$viewScreen.load(target + ".php", function() {
$this.data('clicked', true);
if ($this.data('clicked') && target === "about") {
activateAbout();
}
});
return false;
});
});
function activateAbout() {
console.log('activated')
}
Also there is a trick using setTimeout which you can execute after certain time, when the view is expected to be loaded like below
if ($this.data('clicked') && target === "about") {
//The timeout period you can change accordingly
setTimeout(activateAbout, 300);
}
The recommended way is first type solution. Hope this helps you!!

Related

Call user defined jQuery function with JS

I use a jQuery window libray https://github.com/humaan/Modaal
which triggers events this way $("class of element").modaal({arg1, arg2,...});
--- I updated my question here to make it more general and used an iframe / Html instead of an external svg ---
To trigger an element e.g. in an external Html which is loaded within an iframe, I applied the following code to the iframe:
<iframe src="External.html" id="mainContent" onload="access()"></iframe>
which calls this function:
function access() {
var html = document.getElementById("mainContent").contentDocument.getElementById("IDofDIVelement");
html.addEventListener('click', function() {clicker();});
}
function clicker()
{
// console.log('hooray!');
$("#mainContent").contents().find("IDofDIVelement").modaal({});
//return false;
}
Actually it will only work on every second click. Any idea what I did not consider properly?
Best
You do not need to wait windows loading but iframe only:
$(function() {
$("#mainContent").bind("load",function(){
var myIframeElement = $(this).contents().find(".modaal");
myIframeElement.modaal({
content_source: '#iframe-content',
type: 'inline',
});
});
});
The reason why it did not work was that the iframe was not completely loaded, while jQuery tried to attach the function. As $(document).ready(function(){} did not work, the workaround was to initialize it with
$( window ).on( "load",function() {
$("#mainContent").contents().find("IDofDIVelement").modaal({});
});
This worked properly to attach the functionallity to an element within the iframe.
Actually modaal will vanish the envent handler after the overlay was opened and closed again.
So maybe someone wants to trigger an iframe element for modaal, too, here is a setup which would solve this issue.
(It can be optimised by #SvenLiivaks answer):
$(window).on("load", function() {
reload();
});
function reload() {
var length = $("#iframeID").contents().find("#IDofDIVelement").length;
// The following check will return 1, as the iframe exists.
if (length == 0) {
setTimeout(function() { reload() }, 500);
} else {
$("#iframeID").contents().find("#IDofDIVelement").modaal({
content_source: '#modalwrapper',
overlay_close: true,
after_close: function reattach() {
reload();
}
});
}
}

Add target on elements added dynamically

I'm a novice in jQuery and I got stuck whit a problem for a while now. I am trying to discover all the links to an external page and add a target="_blank" attribute to them. So far I have created the following script:
$(document).on('load',function() {
$('a').each(function () {
if (location.hostname !== this.hostname) {
$(this).attr('target', '_blank');
}
});
});
This works fine on the elements that are loaded on the page in the first instance, but when new elements are added dynamically it doesn't fire again to add the target attribute. I have tried to change the "ready" function to "on('load')" but to no success.
Any help is highly appreciated and I am grateful for the people who take a second to answer silly questions like this.
Edit:
I created and infinite scroll script that loads more elements through an AJAX call. This elements contain "a" tags and I would like the script to run again for them.
I would wrap your link-changing code in a function which you can call a) onload and b) when your content changes.
$(document).ready(function() {
linkChanger();
});
function linkChanger() {
$('a').each(function () {
if (location.hostname !== this.hostname) {
$(this).attr('target', '_blank');
}
});
}
then if you add content/links later, you can call linkChanger() to check/convert your page again:
$('#something').click(function () {
// code that gets more content, if async provide a callback that calls linkChanger()
linkChanger();
});
You have to trigger that function whenever you add new elements. Because you is the best person to know when new links are being added, so you have to set up the scripts in that way.
function setTargetBlank () {
$('a').each(function () {
if (location.hostname !== this.hostname) {
$(this).attr('target', '_blank');
}
});
}
// On load
$(function () {
setTargetBlank();
loadSomeContent(function () {
// And after it is loaded, trigger again the function
setTargetBlank();
});
});
If you cannot control these, you can simply set up a timer which will always trigger that function every few seconds:
// This is not really good for performance, but it will work
// It will trigger the function every 3 seconds
setInterval(setTargetBlank, 3 * 1000);
It is possible that you are targeting the A links before the new elements have been created, Try running the code in a setTimeout function. for example
$(document).on('load',function() {
setTimeout(function(){
$('a').each(function () {
if (location.hostname !== this.hostname) {
$(this).attr('target', '_blank');
}
});
}, 5000);
});

Javascript ignoring if statements

I'm somewhat new to Javascript. I'm trying to make it so that clicking on an image on one page takes you to a new page and shows a specific div on that new page, so I used sessionStorage to remember and booleans to keep track of which image is being clicked. Right now, the code always executes the first if statement, regardless of which image is clicked. This code works fine in normal java so I can't figure out why my if statements are being ignored in javascript. I also tried adding an 'else' at the end, and tried ===. Here's my javscript, and thank you!
sessionStorage.clickedLeft;
sessionStorage.clickedMiddle;
sessionStorage.clickedRight;
function openedProjectFromGallery() {
if(sessionStorage.clickedLeft) {
$(".left-project-pop-up").show();
} else if (sessionStorage.clickedMiddle) {
$(".middle-project-pop-up").show();
} else if (sessionStorage.clickedRight) {
$(".right-project-pop-up").show();
}
sessionStorage.clickedLeft = false;
sessionStorage.clickedMiddle = false;
sessionStorage.clickedRight = false;
}
$("document").ready(function () {
$(".pop-up .x-button").click(function(){
$(".pop-up").hide();
});
$(".project-description .x-button").click(function(){
$(".project-pop-up").hide();
});
$(".left-project-thumb img").on("click", ".left-project-thumb img", function(){
sessionStorage.clickedLeft = true;
sessionStorage.clickedMiddle = false;
sessionStorage.clickedRight = false;
openedProjectFromGallery();
});
$(".profile-left-project img").click(function(){
$(".left-project-pop-up").show(1000);
});
$(".middle-project-thumb img").on("click", ".middle-project-thumb img", (function(){
sessionStorage.clickedMiddle = true;
sessionStorage.clickedLeft = false;
sessionStorage.clickedRight = false;
openedProjectFromGallery();
});
$(".profile-middle-project img").click(function(){
$(".middle-project-pop-up").show(1000);
});
$(".right-project-thumb img").on("click", ".right-project-thumb img", (function(){
sessionStorage.clickedRight = true;
sessionStorage.clickedLeft = false;
sessionStorage.clickedMiddle = false;
openedProjectFromGallery();
});
$(".profile-right-project img").click(function(){
$(".right-project-pop-up").show(1000);
});
});
You are defining function openedProjectFromGallery() with in document.ready . Define it outside document.ready and also give your three booleans some initial value at the top of your code if not initialized with some value or they are empty. I hope this would help.
It is not really answer to your orginal question,as the main issue with your code is, as #njzk2 says, that openProjectFromGallery only being called once, and not on each event, however I wanted to put my two coins on how this code could look like.
This is good example where custom events should be used
$(document).on('showPopup', function( e, popup ) {
$('.'+popup + '-project-pop-up').show()
})
$(document).on('hidePopup', function( e ) {
$('.popup').hide()
})
$('.left-project-thumb img').on('click', function(e) {
$(document).trigger('showPopup', ['left'])
})
$('.right-project-thumb img').on('click', function(e) {
$(document).trigger('showPopup', ['right'])
})
I think you get an idea.
On the other hand, it always nice to use event delegation with a lot of similar events as well as dom data.
<div class='popup' data-popup='left'>
<img />
</div>
$(document).on('click','.popup', function( e ) {
$(document).trigger('showPopup', [$(this).data('popup')])
})
From what I can see openedProjectFromGallery is only getting called on document load.
Add a call to it into each of the event handling functions or use jQuery's delegate function to assign event handling to each image.

Fill twitter button with dynamic content

is it possible to create a twitter-button , while clicking a link? :
http://fiddle.jshell.net/gmq39/22/
I tried with:
$.getScript('http://platform.twitter.com/widgets.js');
The "button", which appear´s has no functionlaity and style´s
Anybody know´s a workaround or what do i need to inlcude? need your help.. greetings!!
Use twttr.widgets.load(); to bind the twitter functionality to a dynamically added button.
Also, to make sure you don't load the script over and over again, you could first check if the script is already loaded with something like this
function twitter() {
if ($(".twitter-follow-button").length > 0) {
if (typeof (twttr) != 'undefined') {
twttr.widgets.load();
} else {
$.getScript('http://platform.twitter.com/widgets.js');
}
}
}
$(function () {
$('body').html('Follow #MagnusEngdal')
twitter();
});
http://jsfiddle.net/23D8C/1/

Using jquery to see if selector pulled any divs, find a div thats specific to example page

I'm pretty new to jquery, this is what i need help with: Using jquery to see if a selector pulled any divs, find a div thats specific to example page. See if first condition is false and if so redirect to example page. Thanks for any help!
Jquery partial code: "
$('.assessment-start').click(function () {
$('#startAssessmentDialog').empty();
//block
$('#startAssessmentDialog').block(_blockUISettings);
//block
var link = $('#startAssessmentDialog').attr('link');
AjaxUtil.Services.PageProxy.SendData(link, GLOBAL._HTTPVerbs.GET, {},
function (data) {
var $data = $(data);
$('#startAssessmentDialog').html($data.find('#surveyContainer'));
$('div[name*="*"]').val('*');</script>
// hide the unmapped capability areas
$("#unmappedCapabilityAreas").hide();
// unblocking
$('#startAssessmentDialog').unblock();
// unblocking
},
function (exception) {
AjaxUtil.DefaultExceptionHandler(exception);
$('#startAssessmentDialog').unblock();
}
);
"
Html code:
<div link="/Survey/details/#Global.CGSs[Model.CGSVersionID.Value].SelfAssessmentSurveyResourceID/#Model.ResourceID" id="startAssessmentDialog" class="noDisplay">
</div>
Seeing if selector got any divs:
var selector_pulled_divs=($(selector).filter("div").length!=0)
We'd need some code to work with to help you further.
You can check with nodeName property:
if ($(".selector").get(0).nodeName == 'div') { \\do stuff }
I think you're trying to do something:
if( $('#selector').length ) {
// do something if selector pulled a div
} else {
// do something if selector not pulled a div
// for page redirect write following line
window.location = 'YOUR_URL';
}
$('#selector').length will check the exists of div with id=selector.

Categories