CODEWITHSUNDEEP
javascriptphpjqueryhtmlcss
randy
randy

Reputation: 1

Editing div content from a different page

I am trying to edit a div's class name that is on my homepage based on a toggle switch but the toggle switch is on a different page. This script worked when the div was on the same page but now its not functioning.

function changeStatus(obj,temp) {
var toggleid = $(obj).attr('name');
var toggle = document.getElementsByClassName("statusinput")[toggleid];
var statusEffect = $.get('index.html', null, function(text){
                         alert($(text).find('#name'));
                         });
if(toggle.checked){
    statusEffect.innerHTML = "Arrived";
    statusEffect.classList.remove("statusp");
    statusEffect.classList.add("statusa");
}else{
    statusEffect.innerHTML = "Pending";
    statusEffect.classList.remove("statusa");
    statusEffect.classList.add("statusp");
}

every time I run this I get a error [Object object]. This is supposed to make it so when the user checks the box the div switches from "Pending" to "Arrived"

Upvotes: 0

Views: 45

Answers (2)

Matthew Mallimo
Matthew Mallimo

Reputation: 371

Depending on your version of JQuery:

var statusEffect = $.get('index.html', null, function(text){
                         alert($(text).find('#name'));
                         });

$.get() will return a promise, not a DOM element. Link to docs

Further down, you are trying to use it like a DOM element.

if(toggle.checked){
    statusEffect.innerHTML = "Arrived";
    statusEffect.classList.remove("statusp");
    statusEffect.classList.add("statusa");
}else{
    statusEffect.innerHTML = "Pending";
    statusEffect.classList.remove("statusa");
    statusEffect.classList.add("statusp");
}

If you wish to alter the class name of a div on another page you would have to store that information somewhere, such as a cookie. When that page loads check the cookie to give the div the correct class name.

Upvotes: 0

Abslen Char
Abslen Char

Reputation: 3135

You can only amend the DOM of the page which is currently loaded. If you want to change a different page based on an action in a another one you'd need to persist the state of the user's interactions and then amend the other page when it loads. To do that you can use localStorage, sessionStorage, session, cookies, or AJAX to store information on the server

Upvotes: 1

Related Questions