This question is related to another one I asked yesterday and its link is:
Parse HTML in jquery through ajax into elements and replace each corresponding on page
Basically i want to call a php page with ajax and replace the elements in the response with the corresponding ones on the page. I got the following function in an answer:
$(data ).filter('.maindiv').each(function (index)
/* "this" is the current div in response*/
$('#'+this.id).replaceWith(this);
});
The above function woeks well when the div I want to replace has a regular id= but if use a custom attribute like gid= for example it won't work. How can i fix this??
Thanks
Use attr for custom attribute instead of using this.id you can use $(this).attr("YourAttr");
$(data ).filter('.maindiv').each(function (index)
/* "this" is the current div in response*/
$('#'+$(this).attr('gid')).replaceWith(this);
});
You can select node with a gid attribute with:
$('[gid]').replaceWith(this);
you can even be more precise by selecting only the node which has the gid value you want
$('[gid="hello"]').replaceWith(this);
Hope it helps
For data you can use a custom attribute. HTML5 specificies the use of a data- attribute. The cool thing is that this works in HTML4 too! jQuery can read it by using the data method.
I'll recommend:
<div class="maindiv" data-grid="myGrid">...</div>
$(data).filter('.maindiv').each(function (index)
$('#'+$(this).data('gid')).replaceWith(this);
});
Related
so, I have read just about every question on this subject, but the solutions don't work for my project, it seems that when I change the dropdown, it does the first event, but when I change to a different element it doesn't do anything else, but when I do this with an alert message it changes every time.
here is what I have to demonstrate what I mean
I tried .post it works great until I add php and all the dynamic functions, is it because I used $('#updateDiv').html(url);
I also hide and showed the div based on the change of the dropdown, but all that did was hid and show the div, I want the div to show the content based on a list of categories.
the PHP side will be dynamic, but if I do .html() none of the php renders properly.
http://fiddle.jshell.net/LrxUS/
$.post(url, function(data) {
$("#updateDiv").html(data);
});
As per the fiddle, you have specified
var mydropdown = $('#mydropdown');
but in the change function, you have specified $(mydropdown), either define only id in the variable or the object. Like,
var mydropdown = '#mydropdown';
$(mydropdown).change(function() {}
After that use $.ajax to get the dynamic content.
Ok, lets make it the simplest so that there is no room for mistake in the client side script. Use $.load method defined here.
AS:
$("#updateDiv").load(url);
And don't forget to check what your firebug, chrome inspector or fiddler says about your request in case if you don't get the required result.
i have a code that displays event information from the database. the parent container's id is show_id. Inside show_id there is some hiden div event_more_details with contents thats only supposed to show when i hover on the parent div which is show_id (in my case am using mouseenter function). Here is the code:
$('.show_event').mouseenter(function(){
$('.event_more_details').fadeIn(500);
});
Problem is, if the php generates five events, when i hover on one event, the hidden div fades in all the other parent divs, too.
If I correctly understand your HTML structure, you can use this:
$('.show_event').mouseenter(function(){
$(this).siblings('.event_more_details').fadeIn(500);
});
.siblings() applies a selector to sibling elements. (docs)
After going through the jquery functions library i think i found an answer:
$('.show_event').hover(function () {$(this).find('.event_more_details').fadeIn(500);}, function () {$(this).find('.event_more_details').fadeOut(500);});
This works fine for me,by the way, #Ohad thanks alot 444 your help.
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
I am trying ot figure how to use jQuery to get the value of html attribute of many elements. My webpage updates dynamically using ajax. I have an attribute called number for in element in the part that is updated. I want to use the attribute value from each element so that i can use that data as parameters to a php file link. I have come across jquery's .attr() function, but it only seems to take the attribute value of the first element if finds. But what I want to do is get the attribute value for each element so that when I click on that element its corresponding attribute value is sent as parameters to the php file.
Thanks
you can combine attr() with .each() method.
e.g.
$("div").each(function(){
$(this).attr("number");
});
Disclaimer: This most likely does not respond to the OP question (after re-reading), but will stay for some time in case it fill some need of the OP.
Use the .map() method
var numbers = $('[number]').map(function(){
return $(this).attr('number');
});
this will create an array filled with the number attribute of all the elements that have one.
Inside a click handler (or any event handler), this will refer to that element, for example:
$("#content").delegate("a", "click", function() {
alert($(this).attr("something")); //alerts "something" for the <a> you clicked
});
In this case we're using .delegate() because you said "My webpage updates dynamically using ajax", so just attach the handler to a parent element that's not replaced via AJAX and it'll work for all elements you add beneath...in the example above we're binding to all <a> elements, but just change the selector accordingly.
I use this to toggle my div elements, and hide all them when the DOM is ready...
$('div[class*="showhide"]').hide();
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('div.showhide' + nr).toggle(400);
});
I have dynamically created div elements with class showhide0;showhide1;showhide2...etc...
Inside the DIV tags I have search boxes.
First when page is loaded all DIV tags hide.
I toggle one of them to show.
Start a search, so the page is reloaded with the result of the query.
Of course all DIV is hide again, because the page is reloaded. Unfortunately...
Is it possible to not hide again after I searched for something? It would be nice when I open the page, all the divs are hidden, but after then just when I toggle it...
If you need a specific element or elements to stay visible upon a page reload, then you're going to need to do something to maintain state across requests, and then modify your jQuery to utilize that state information when initializing the visible state of the elements.
This can be done in numerous ways which include but are not necessarily limited to
Include it in the query string
Include it in the URL hash
Use a cookie
Well, yeah, you just don't run the initial hide() if there's a search request. I'd just exclude that line from the output if, on the PHP level, you know you're executing a search.
We do something similar to this where I work.
We opted instead of have the class name just be hide for all elements and instead have the ids named.
So, we'd have it something like:
<div id="hide1" class="hide"> </div>
along with this CSS to hide all those divs by default
.hide {
display: none;
}
Finally, we use something like this to show them:
$('input:image').click( function() {
var nr = $(this).attr('id').substr(7,2);
$('#hide' + nr).toggle(400);
});
}
This works because of CSS precedence rules. The toggle()/hide()/show() method overrides the hide class's style.
As for the unhiding part, if you pass the ID to unhide to your script, you can parse it and unhide the appropriate div.
You can read and process the query string from window.location.search. Unfortunately, you then have to manually parse it or use a plugin, such as jQuery Query String Object or jQuery URL Utils.
var id = $.query.get('unhide_id'); // This is using Query String Object
$('#' + id).show(400);