I was trying to remove a certain div element from my HTML using jQuery I saw this Use jquery to remove a div with no children, the jquery remove methods work perfectly fine but the problem is of Persistence,
Actually i want to permanently remove that div for that person, i was storing this in cookies but the problem is this remove method doesn't actually remove the code so when I parse through the code to store it using the cookies i store the removed code also. is there any way i can achieve a permanent removal for particular person??
Thanks
Pranay
Since many people are confused here is what I was trying to achieve http://virtser.net/inettuts/ this was demo of http://james.padolsey.com/javascript/inettuts-with-cookies/ where he extended functionality of his code by adding Cokkiee support to retain the widget positions.
This code works fine for moving editing and collapse or expanding widget. It saves everything in cookie but for delete this does't work. It delete the widget but when i try to save it in cookie since the div element is present in code it does't save the deleted item
jQuery isn't ideal for permanent removal of elements from a page as it's stateless.
Its a client side wrapper for javascript to interact with the DOM. While in theory, you can have it remove elements from the DOM based on readable cookies a particular user may have after a page has loaded, it's not ideal when server side coding could handle this without much effort.
to remove it permanently you have to use serverside language for example php
You could revert the process and add the DIV for specific users instead, leaving the data in the .js instead.
To remove DIV "permanently" you have to use serverside lang. The logic is simple:
Remove DIV from HTML
Save some info about user and removed DIV in cookies
In serverside script you have to get cookie and check did user disable any div or not. If he did your script should skip DIV generation
Related
I'm creating a login form on top of the header. But when user is logged in, I want the form to disappear. I will check if user is not logged in, if so then I should add the form. But I want to do it in the javascript.
The simple answer to what you're asking is to use jQuery's append() function.
The problem with this is that you will need to insert it all as text, which is going to become a maintenance problem. Definitely.
The better way is to insert the div and hide it by default using display:none and to programmatically set it to display:block when needed.
If you use something like Angular, you could also include the div by inserting the template when needed. But the use of display for this purpose is very widely accepted as the right way.
Edit:
Since you're using load() already for some parts of the page, you could probably do the same here.
Add a container tag to the HTML:
<div id="loginContainer"></div>
Add the nested content like this:
$("#loginContainer").load("http://some.url.com/path");
Hide it again with html()
$("#loginContainer").html("");
I'm using the ck-editor(4.4.6). In Ck-editor's textarea I want to update my text, for that I use setData("hai"); that text updating correctly but some plugin functionality not working after use this setData(); (eg. restrict multiple enter if I reload the page it's working correctly).
editorInstance.setData("test text");
Anyway first time and after reload the page it working fine.
ruby on rails with jquery things are I'm using.
How can I solve this?
I don't know about ck-editor(4.4.6) but i can give you a way to solve it. You have to use based on your parent class. First time it works because it was same but after that it did't find the class/your specific term/attribute. So you have to use by calling parent class/id and under your activity.
You will need to call the update element function after setting the data, this will actually set the value in the field.
And, also you will need to specify the id of the textarea as given below.
CKEDITOR.instances.id_of_textarea.setData('hai');
CKEDITOR.instances.id_of_textarea.updateElement();
Finally, I got the answer instead of set data I just add my content to CKEditor text area as link this its working fine:
$('#cke_editor1 iframe').contents().find('body').html("Your text");
I'm creating a chrome extension that needs to get the data-id attribute of all of the songs listed here. The problem I'm having is that the html seems to be made dynamically after it is sent to my browser, which makes the attribute harder to access.
What is a way that I could make an array of all of the data-ids of the songs on that page? It is also important that I accomplish this without stopping the page from displaying as it normally does (another issue I'm facing).
You tell us that it is harder because the content is dynamicly loaded. Which tells me that you perform a AJAX request from within your extension.
instead of reloading the HTML of the webpage into a variable. Just use the dom of the webppage. You should build a backgroundpage, and use executeScript
Look into this
I have a website, and I am making widgets for it. Those widgets are draggable. I was wondering how I would save the positions of the widget (And if it is hidden or not [disabled or enabled]), and load the positions and if it is hidden or not when you join the website again (With the same user). Thank you for your time, please post comments if you don't understand what I need.
I am assuming that your widgets are in a <ul>, one <li> per widget which is quite normal.
Be able to position them
You need to arrange the widgets in a specific order in the first place. Imagine you already did the hard work and have the data that a user would have. Hard-code that and get your modules to appear correctly. Change the data, see if the modules appear as you expect.The user needs to drag them. jQuery draggable is your friend.
Prove you can get your data
Be able to get the order of widgets from the page after they've moved. draggable example shows a .serialize() function. Also you need to know which is on and which is off. You can create another list using jQuery .map() which can return their ID and state if you ask it nicely. Alert to the screen, write to the document, or preferably use console.log().
Interact with the server
You can skip this if you want to test using just cookies because the browser can set those.
But if you want to store this with the user's info in case they log out, start a new session or use another computer you'll need to use a database.
You need to know about sending data from browser to the server using ajax. jQuery is your friend.
You need to learn about storing user info in the database.
Restore the positions
You want to be able to set the positions of the widgets from a list that isn't hard-coded, so be able to order the widgets correctly on page load using the data that you saved. You did this in the first step but with hard-coded data.
What you will have to do is:
Save the status at a given time. For example when you change it.
$('#toBeDragableId').draggable({
// options...
drag: funciton(event,ui){
theUserposition = ui.position;
}
});
You need to save theUserposition in a consistent way, like a database or using cookies or client side storage. Afterwards, you need to recove it and set it when you load the page.
Similar Question
Example using Cookies
I'm working on a web app where in I need to add some values inputted by the user.
When the user clicks on the Add button he sees a form and these values then show up on the page. Now to implement this I can do two things
Use a modal window
Make a form inside the page itself(in a div) and toggle its visibility by the Add button.
If I go with the former solution is it necessary to use Ajax or I can add elements on the main page directly itself? Are there any jQuery plugins to accomplish the same?
As Diodeus mentioned, you don't need Ajax.
In answer to your other question about the plugins, have a look at jQuery UI Dialog for the dialog. Generating the form is pretty trivial. There's no need for a plugin there
You don't need to use Ajax to accomplish this. The difference in the two methods is simply whether you use an inline block of code that is hidden and displayed later, or whether you use an absolutely-positioned block of code doing exactly the same thing.
In most cases there is a single form that envelops the entire page. The rest is a matter of a CSS and positioning.