Posted by boby85 on December 25, 2012 at 12:45pm
I am new to dupal and this is my second post. My jquery code don't work as I expect. Simple code like this:
$('#edit-submit').click(function(){
$('#my_div').show();
});When page is loaded div is hidden with:
<div id = "#my_div" style = "visible: none">and when I click the button, div is shown and then disappear again, but it needs to stay visible. I also had another problem with jquery. I set trigger to do the click when page is loaded, but that click is triggered non-stop without stopping. Not once.
Both problems I tested with native php and html, and everything is working fine.
Comments
A suggestion
Hello,
Here is how I would diagnose your issue. I'm going to use the Firefox web browser and Firebug extension,
You have 2 operations that you need to verify:
Use this page (of Drupal,org) as a test case.
Right click on any white space area of the page. Firefox displays a popup menu, choose "Inspect Element with Firebug".
Click on "Console", The console allows you to run Jquery selectors on the current page. There are 2 panes. On the right, Firebug displays a pane that allows you to enter Jquery commands (the bottom of that pane has 4 links; Run, Clear, Copy History).
Enter the following Jquery expression (command):
$("#header").hide();, Click "Run".That should hide the Drupal.org header div.
Now enter the expression
$("#header").show();. Click "Run". That should redisplay the Drupal.org div.So we now verified how to use the Jquery selector.
Let's look at the html source for the "header". In Firebug, click on the "HTML" tab (i.e. switch from the console to the html tabl). You can click on elements to expand the html tree. Locate the div with the "header" id. Compare that id value with your id value. Please post the difference :)
In addition, if this solves your issue, please edit the title of your post. Add [SOLVED] to the title. That way other folks can find the solution :) Along the same lines, you might want to change the title to something a little more descriptive. Perhaps something like "How to Diagnose Jquery Expressions". Again, a more descriptive title helps the next person find the solution :)
Good Luck :)
Thinking is the best way to travel.
Thank you for your
Thank you for your descriptive answer. I tested what you asked and everything is working as it should (hide/show). But I don't understand, what do you mean by "Compare that id value with your id value. Please post the difference :)" Of course that they are different. My div id is "abrechnung", and that is the div that I should hide/show. It is hidden at the beginning with
style = "visible: none", and when I call function$('#abrechnung').show()it shows up that div for a second and then it hides it again. I also manualay (from firebug) hide/show my div "abrechnung" and it works ok.A question and suggestion
Hello,
Thank you for your reply and the title change (nice job) :)
First, per your response, your original post does not represent your actual code :) Thus, the posted code has a completely separate error.
So, a solution to the "posted" code doesn't help with your actual code.
Your posted code has an "id" attribute value of
<div id = "#my_div". Note! the first character#. In your post, you are trying to select "my_div" but the html has an id value of "#my_div". The value "my_div" does not match "#my_div" :) Those 2 values are not the same.Have you reviewed the "Examples for Developers" here: https://drupal.org/project/examples. Specially the js_example ?
I recommend reviewing the example code, Make sure you are introducing your custom javascript the same way the developer examples are. Always verify the actual html/javascript source generated by Drupal and you'll do fine :)
Good Luck :)
Thinking is the best way to travel.
The # is misstype, there is
The # is misstype, there is no this in the code. I will look at the link you provided, and post back what I find. Thank you for response.
SOLUTION
It was not drupal error. It was mine. :) When button is clicked page is refreshed so it is normal that div is hidden again. So it is not problem actually, I just didn't see that well. But if someone can use this I solved this like:
Added to url #reload string so my url look like
www.myurl.com?id="2"&year="2012#reload"Then:
$(document).ready(function(){var hash = location.href.substring(location.href.indexOf("#")+1);
if(hash == "reload") {
$('#abrechnung').show();
}
So it cheks if url has reload in int's string and if there is, then it trigger div to show.