I'm working with on developing one of the social networking site and its having some notification features in left panel.
Whenever any user have played a game it will automatically change the number of notification count.
For that i have using below code line.
jQuery('#count_id').load('mypage.php');
But it will retrieve me whole site content with header,footer and content area in the response text, which is wrong as per my requirements.
but if i used below code of line
jQuery('#count_id').load('mypage.php #count_id');
then it will retrieve me a real count but add another div in between the original,
Original html:
<div id="count_id" class="notify">2</div>
and Code after retrieving response:
<div id="count_id" class="notify">
<div id="count_id" class="notify">1</div>
</div>
which is also not as expected. count are right but i don't want to add new div inside a original one.
What should i need to change in my code?
Thanks.
jQuery('#count_id').load('mypage.php #count_id > *');
That would bring only the DOM childs (the content)
Because this is how it works. Also it enables you to attach events to the element you load and delegate them inside this element (so new elements can also benefit from attached JavaScript events) - see .delegate().
If you want to replace the element, you can try the following:
jQuery.get('mypage.php', function(data){
jQuery('#count_id').replace(jQuery(data).find('#count_id'));
}, 'html');
I did not test it, but it should work.
Ivan Castellanos is however right. According to the documentation, you can provide any selector after the first space in the .load()'s parameter.
To retrieve count_id, you can directly get the html value in the div like this:
<script type='text/javascript'>
jQuery(document).ready(function()
{
countVal = $("#count_id").html(); //returns the html content inside the div, which is the count value
countVal = parseInt(countVal); //This will convert the string to type integer
});
</script>
Note:
If you want increase the count and update the div value, you can add the following lines:
countVal++;
$("#count_id").html(countVal);
Related
So my website is built using a company's software called Inksoft which leaves me very little to work in the way of customization. So I have to do many workarounds.
Here is my site's homepage.
The header on top of the page only has two links right now. "Products" and "Design Studio". My goal is to add an "About Us" link and "Buyers Guide" to the header as well.
I cannot add new content to the header using Inksoft's backend. So I coded a workaround to replace the content of existing DIV's within the header to say and link to where I want them to go.
The only issue is, the responsive mobile-nav loses functionality when this is implemented. As seen here on this test page.
The test page has the About Us in the top header, added by the use of this code:
<script>
$("#header-nav-designs").html('<document.write="<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
So, the simplified question is: how do I implement this code without losing the responsive functionality of the nav bar?
The jQuery .html function will replace the HTML inside the target element. If you want to just append the one value, you likely want to .append to the element.
In addition, you aren't setting the HTML to a valid html string. You probably just want to get rid of the <document.write=" at the beginning of the string. The rest of it looks fine with just a cursory glance.
So:
<script>
$("#header-nav-designs").append('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
Edit:
After looking at it a little more, it appears as though the $('#header-nav-designs') that you are selecting is already an <li> which means you need to either select the parent <ul> list or you can use the jquery .after function instead.
<script>
$("#header-nav-designs").after('<li id="header-nav-studio"><font color="#000000">About Us</font></li>');
</script>
And as someone else commented above, you are getting an error on the page. It appears as though you are trying to get an element with the id divID and the appending some html to it, but there is no element with the id divID and so you are getting an error saying that you can't read the property innerHTML of null as the call to document.getElementById is returning null (element not found).
Element id header-nav-designs witch your code is referring have CSS style on line 170:
#header-nav-designs {display:none;}
The element will be hidden, and the page will be displayed as if the element is not there. With display:none;
If I understand you correctly your code selector points to wrong element id. It should point $(".header-nav > ul"). Document.write is not needed inside jQuery you need to give only an valid html string as argument.
jQuery html function erase html that is all ready inside element and replace it with html string given as argument. You have to use append if you want to add more html but not remove what is allready in element.
$(".header-nav > ul").append('<li><font color="#000000">About Us</font></li>');
$(".header-nav > ul").append('<li><font color="#000000">Buyers Guide</font></li>');
I don't consider myself a professional by any means. I decided to spend this summer picking up a few web languages that would allow me to prototype my ideas (I am a designer).
To get with the question, I am having a tough time figuring out how to manipulate elements that I am echoing back from an external .php script. Essentially I am doing this.
process_feed.php:
- Gets data, does SQL search based on data, outputs rows
while ($row = mysql_fetch_assoc($feedResult))
{
$ctime = date("U",strtotime($row['timestamp']));
echo '<div id="secretmsg">'.$row['secretmsg'].'</br>';
echo '<div id="postedby">Posted By: '.$row['postedby'].'</div>';
echo '<div id="timestamp">'.ago($ctime).'</div><button type ="button" name="'.$row['m_id'].'">Reply</button></div>';
}
main page:
function RefreshFeed()
{
var SchoolName = document.getElementById('schoolname').innerHTML;
$.post('../../process_feed.php', {name: SchoolName}, processResponse);
function processResponse(data) {
$('.secretfeed').html(data);
}
}
Perhaps not the best solution, but I have RefreshFeed on an interval so I can constantly get updated information.
The issue is this: I am trying to work on a comment system where users can respond to each post. On my process page, I am adding a Reply button with the name set to the ID in the database. I am trying to setup basic functionality where the Reply button will open up a text input for commenting, send the message to the DB based on the ID, etc etc. However, on my main page I am not able to manipulate the element because it's being echoed? What can I change in order to echo information from the database onto my main page, and then from my main page manipulate the echoed div's.
I hope this makes sense - thanks for the help :)
If I understand you correctly then you would like to modify the DOM once the data has been added - so you can then just use a selector to get the desired element and do what ever you want - e.g.:
function processResponse(data) {
// Selector to get all elements by class name within the whole document
$('.secretfeed').html(data);
// Selector to get all buttons by tag name inside $('.secretfeed')
$('.secretfeed').find('button').text('foo');
// Selector to get all buttons by attribute inside $('.secretfeed')
$('.secretfeed').find('[type="button"]').text('bar');
// Selector to get the element with the given id within the whole document
$('#secretmsg').css('color', '#ff0000');
}
Notes:
Ids for HTML elements should always be unique within the whole document! In your example you possibly echo multiple elements with the same id (as it is inside a while loop) - use class="" instead.
It is recommended to save selectors so that jQuery does not need to parse the DOM over and over again - e.g.:
var $myselector = $('.myclass');
$myselector.text('foo');
But keep in mind that the selector is not updated when you modify the DOM by e.g. adding another element with class="myclass" - you would then need to assign the variable again so the selector contains the newly inserted element as well.
Additionally be sure that the DOM is ready when you want to work on it - regarding your callback processResponse this will always be the case as jQuery takes care of it and does not execute the callback until it is ready - but when you come from a page reload wrap your code like this:
var $myselector = $();
$(document).ready(function(){
$myselector = $('.myclass');
});
Additional info:
Finally (out of the scope of your question) take a look at event delegation so that you do not need to select all elements directly - e.g. if you want to add a click handler to all of your buttons you do not need to register an event handler for each but can create a global one:
$(document).on('click', '.secretfeed button', function(){
alert($(this).attr('name'));
});
My main mission: Is to get the text of the next and the previous objects to the chosen object - To display the image (and its titles) Previous & Next.
Before that I have a problem: to get text of a selected object, from an index to a variable.
The problem: Every time I pick a random object, the variable does not change but the text is added to the existing text in the index.
I made a DEMO, would appreciate your help.
$(document).ready(function hintProject(){
$('#nextProject, #prevProject').click(function(){
subtitle = null;
subtitle = $('#client-sub.active').justtext();
$('#next_target_title').text(subtitle);
alert (' text::: ' + subtitle );
});
});
It looks like jQuery simply can't find the objects you're specifying. I don't think the problem is with the snippet in the question. I think the problem is with your document ready function.
To debug, try simplifying your problem by cutting out all of the additional complexity of the setup script and just set up an HTML page that is in the state you want. It's much easier to understand 1 problem than 2 or more.
Also, try simplifying how you're specifying an active item: a single class on the portfolio item would make your life easier. Then you can specify css and such based on the parent instead of adding multiple classes to multiple things inside the each portfolio item.
I am writing a quick function in javascript that interacts with wp in a set of posts that are hidden and shown when I click an element that corresponds to its matched href="#element".
Function would run like so:
1) You click one of the dynamically added post titles where it has a href value of the post title in the tag for it.
2) The corresponding hidden project under it with an id that matches the href value of the dynamically added elements above to basically show it and hide the previous child project.
Now I am trying to do this with pure javascript alone but its beginning to get really messy and long winded. I wondered if there was a good tool in the jquery api to aid in this?
Thanks,
If I understand your question correctly, in jQuery you could:
<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>
$(document).ready(function() {
$('h1.buttonHeader').click(function() {
// Get data attribute from clicked header
var correspondingDiv = $(this).attr('data-divider');
// Hide any open 'myDivider' dividers
$('.myDivider').hide();
// Display the corresponding divider
$(correspondingDiv).show();
})
})
I don't really understand why you're using the href attribute.
Edit: JSFiddle.
Edit: I've removed the loop as it wasn't necessary.
I have a rate box on my site that appears beneath an article, and then again that same rate box appears on comments people leave regarding the article. So the rate box appears multiple times on the page. I'm trying to change the text that appears within that rate box, but infortunately I don't have server access on the type of site I have. So I need to do it with scripting.
The small script I'm using now works, but it's only working for the very first rate box. I need to change the text in each of them however. I'm trying to change the existing text that says "Rate" into "Like".
.SUI-RateBox is the div class, and the text I need to change sits in a span within that class.
The code that I have that works on just the first instance is this:
<script>
$(".SUI-RateBox span:contains('Rate')").html("Like");
</script>
How can I make this happen, but to all of the rate boxes.
The dom structure is at the below link.
http://www.spruzstuff.spruz.com/pt/Element-Background-Image/wiki.htm
I'm not sure why you're using # (nevermind, you changed your question's details), but try this:
<script>
$(".SUI-RateBox").find("span:contains('Rate')").html("Like");
</script>
http://jsfiddle.net/EhPP7/
Alternatively, I guess you could also try .each() to iterate through each of span tags within div.SUI-RateBox and check text value one after another.
$(document).ready(function () {
$("*.SUI-RateBox").each(function(){
var sp = $(this).children("span");
if(sp.text() == 'Rate')
sp.text('like');
});
});
http://jsfiddle.net/cZMFC/1/
Also check out jQuery .each() API