jQuery Toggle Divs Expand When JavaScript do_PostBack Link Is Clicked - javascript

I am working on a new site TheDigitalScale and I am using jQuery to create a feature list that expands a div when clicked and closes the div with another click.
<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function()
{
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
</script>
<div class="msg_list">
<p class="msg_head">They Forgot The Buttons</p>
<div class="msg_body"><p>
Just kidding. The MXT has nifty touchscreen controls so you never have to worry about buttons getting dirty or broken.
</p></div>
</div>
It works fine and all but, I also have a product review link that uses the JavaScript do_PostBack function to expand a review panel.
Review and Rate this item
When the review link is clicked, it causes all of the jQuery divs to expand.
When I set enablepartialrendering to false and it "fixes" the problem but when the review link is clicked it takes the user to the top of the page and expands the review panel rather than just expanding the review panel and keeping the user in the right spot.
I hope I explained this well enough; I am very new to jQuery, JavaScript and AJAX.
Regards,
Shala
EDIT:
I suppose I didn't really ask a question so...
What can I change to make the review link expand the review panel and keep the user in the area without also expanding every one of the jQuery divs?
Here is a link to a product page: MBSC-55

It looks like you have nested updatepanels. Try setting the UpdateMode property of the parent panel to Conditional to prevent the child updatepanel from triggering the parent updatepanel.

Okay, I think I see what's happening. When your page loads you execute this code:
$(document).ready(function(){
//hide the all of the element with class msg_body
$(".msg_body").hide();
//toggle the componenet with class msg_body
$(".msg_head").click(function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
});
Now, when .net does the postback it is re-creating those .msg_body and .msg_head elements. The best solution would be to get .net to not replace those (unless you need them to).
If you need those to re-draw, you can do 2 things. First, set .msg_body to be hidden in your css, that way they are hidden by default. Then to handle the click issue, replace your click code with this:
$(".msg_head").live("click", function() {
$(this).toggleClass("msg_head2").next(".msg_body").slideToggle(100);
});
This will cause the click handler to still work for newly added .msg_head items.

Related

Removing an Onclick Event From a Menu Link

I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!
I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});
The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)

how to disable bootstrap collapse

I have some FAQs in an accordion. Question 1 is active and open with the answer visible. Question 2, when I click on that, Question 2 closes. I don't want that. Ideally, and this is sort of off-top, I'd like Question 1 not to default to being opened.
I tried:
$(document).on('click', '[data-toggle=collapse] .fa', function(e) {
e.stopPropagation();
});
But my accordion still collapses when another is clicked on.
From your question, I can kind of guess your problem. Check to see if your HTML code has a data-parent="xxxx" attribute where xxxx is the id of the container. If you find it, remove that attribute. This is the thing that makes other panels collapse.
To add accordion-like group management to a collapsible control, add
the data attribute data-parent="#selector". Refer to the demo to see
this in action.
See: https://getbootstrap.com/javascript/#via-data-attributes-3
The easy way to accomplish this would be to simply remove the div.panel-group container that wraps the accordion group. You could then also remove the "data-parent" data attribute from all the collapse targets, just for cleaning up the code.
And your second question -- to make a panel default to open, you just give it the classes "panel-collapse collapse in" <-- the 'in' makes the panel begin opened on the page.

How do I set jquery toggle OFF on page load?

Greetings I have the following javascript controlling some DOM elements on my page to toggle on/off to hide the elements and save real estate on the page ...
I have a gridview at the bottom of the page, and when I perform operations on the gridView, my page reloads and the toggle is reset.
// Toggle Dealer Information on/off
$("#mlldlr").click(function () {
$("#DealerContainer").toggle();
$("#ShowHideDI").toggle();
if ($("#morelessDi").text() === ("...show less"))
$("#morelessDi").text("...show more");
else
$("#morelessDi").text("...show less");
The problem is ... if I toggle off and I reload the page for whatever reason, the toggle is reset to on, meaning the items show. I want them to remain closed until I initiate their reopening. Is there any way to do this?
JavaScript doesn't store state between page reloads by default. If you want to persist the state, you'll need to store that information some where. localStorage might be the right solution. Here's a simple example of how localStorage can keep a css state after reloading: http://jsfiddle.net/kweqaofv/2/
Other than using the COOKIE or The hide();
Follow the simple 1 line code:
$("element").toggle(100);
#element is the element of which you want to turn off the toggle on page loads
Just insert this line at first and then,
Toggle your element, like a sliding dailog or
Navigation panel!
Hope it helps!
Put this below the tag.
<script type="text/javascript">
$(document).ready(function ()
{
$("#DealerContainer").hide();
$("#ShowHideDI").hide();
});
</script>
The fact that the page is reloaded is making the DOM to reset to its initial state, thus resetting the toggle.
The only way I think this can be done is to have a parameter that would not be changed on page reload.
I have three suggestions:
1- You can set a cookie in your browser with the value of the toggle (on/off) and when the page loads, ask for this value and set the toggle. This can be done with jquery (follow this link for more info How do I set/unset cookie with jQuery?):
To set a cookie:
$.cookie("test", 1);
To delete it:
$.removeCookie("test");
2- The other option is to save this parameter on the server side. I'm guessing that if the page is reloading is because you are making a request to the server?
If this is the case, you could send the state of the toggle to the server, do your query, and on the response get the state of the toggle back. In the callback function you would then set the proper toggle state.
3- Another way could be using a JFrame for the grid, making the grid the only item of the page to reload.
Hope this helps
I had a similar problem with one that is as simple as
Jquery
$(document).ready(function() {
$('nav a').click(function() {
$('p').toggle('slow');
});
});
with regards to toggle being switched "on" upon page load.
All I did on this on was inline text the html with style="display :none;".This switches off the 'p' tag upon load and thus the user can switch it "on" any time after that.
So that is
HTML
<nav style="padding-top: 1cm; padding-bottom:1cm;">
<ul>
<li style="padding-bottom: .2cm;">
<a class="popup" style="padding-bottom: .2cm;cursor : pointer;"><b>Send</b></a>
</li>
<p style ="display: none;">your cat a litter box.
</p>
</ul>
</nav>
Bear in mind that the 'p' takes no space upon page load.
Hope I shed some light.

Bootstrap collapse section and expand another with one button

I have a bunch of HTML fields logically separated as such: half the fields reside in: div id="general" and the other half reside in: div id="advanced"
What I'm trying to implement (and failing) is the following:
The fields in the general div to be shown (by default). A button with the caption "Advanced" shown. And the fields in the advanced div to be hidden.
When this button is clicked, the following should occur:
General section collapses hiding all it's fields
Advanced section expands showing all it's fields
Button caption is changed to "General".
Subsequent clicks toggles the above.
E.g. upon the next click, the advanced section now is hidden, general section now is shown, and button caption changes to "Advanced"
Notes: This seems trivial but being new to web front-end, I can't get this easily. If my div section is incorrect, then scrap it. I suspect I'm on the right track, and just need some jQuery code to collapse and expand divs.
Below are my attempts:
I used the Bootstrap collapse plugin with accordian markup, but this isn't what I want. It comes close though, but each section has a heading/button. I'd like one heading/button to toggle each section in an opposite manner.
I used the Bootstrap collapse plugin without the accordian markup, but same result as attempt 1 - two button again.
I tried using jQuery to do this dynamically, but can't get the logic (or syntax) correct.
I'm using Bootstrap, but happy to go with jQuery (or JavaScript) solution if it can't be done solely in Bootstrap with the collapse plugin.
You can do it using jquery by toggling a class on element which decides which fields to be shown.
for e.g. Take an outer div, and put general and advanced div inside outer div and show only the fields based on outer div class like advanced using css. And bind a button to toggle the class on the outer div.
Checkout JSFiddle here : http://jsfiddle.net/eqhw2mxx/2/
Check the JSFiddle :- JSFiddle
$("#advanced").addClass('hide');
$(".button").click(function(){
$("#advanced").toggleClass('hide');
$("#general").toggleClass('hide');
if($(this).attr("value") == "Advanced"){
$(this).attr("value","General");
}
else if($(this).attr("value") == "General"){
$(this).attr("value","Advanced");
}
});

jQuery Dropdown that stays open after site-change – help a newbie

I need a jQuery dropdown that stays open after a submenu-item was clicked and the user is forwarded to the subpage.
I'm toggling my dropdown with this code and I guess I need to add a class to the ul.submenu and toggle the visibility of this with CSS?
http://jsfiddle.net/erL8Lc0s/9/
$(function () {
// Dropdown toggle
$('.dropdown-toggle a').click(function () {
$(this).next('.sub-menu').toggle();
});
$(document).click(function (e) {
var target = e.target;
if (!$(target).is('.dropdown-toggle a') && !$(target).parents().is('.dropdown-toggle a')) {
$('.sub-menu').hide();
}
});
});
Unfortunately I'm a jQuery-noob and I can't get my head around this problem
There are a few ways to achieve this, however it's unlikely you'll get a straight-forward answer here, and here's why:
What you're trying to do is show an element, depending on what page the user is currently viewing. There are a few ways to achieve this, but which one depends on the specific circumstances of the problem. Here are a few ways:
You've stated you're using WordPress. Great, WordPress makes the page ID visible, so within your theme you could easily add an override class to the element (such as class="show") depending on the page ID. However, this means you'll have to keep a list of page IDs up-to-date.
Moving on from the above, you could use PHP to grab the current URI, and show the correct element based on that.
Just use WordPress's default menus. You can amend the markup with a navigation crawler. It looks like you're using Bootstrap, so there's a premade one available. Now WordPress will automagically add active classes to the nav elements if you're on that page. You can then use CSS to keep those elements open.

Categories

Resources