I have a function for liking posts in a forum. When called, the function works but reloads the page into the div, resulting in a mess. When the likeit button is clicked, the database pulls a count and this function is called to reload the div. I'm trying to load only the div from the function without the extra HTML; how do I manage this?
I attempted to change the load function to a different php page with only the function related code inside, but this gives me a 500 error. If that should work, it's most likely that I'm not pulling the right code into the separate file.
function like_post(id)
{
$("#like" + id).load("forums.php?t=" . $topic['id'] . "&like=" + id, function() {
$("#likelink" + id).empty();
$(function(){$(".smallrollover").tipTip({delay:10});});
});
}
The load function is pulling all of the HTML from the forums.php page into the like div rather than only the relevant content.
Firstly with regard to syntax, note that . is the PHP concatenation operator, and you don't need the document.ready handler around the tipTip() call.
With regard to load(), the method accepts a selector used to filter the response HTML so that only the elements you target will be appended to the target:
function like_post(id) {
$("#like" + id).load(`forums.php?t=${$topic['id']}&like=${id} #like${id}`, function() {
$("#likelink" + id).empty();
$(".smallrollover").tipTip({ delay: 10 });
});
}
That being said, this isn't a great idea as you're still loading the entire page again and then pulling out the relevant parts when all the HTML has been received. It would make more sense to create a separate endpoint which returns only the required HTML, or even JSON which you then build the required HTML structure from on the clientside.
I would also suggest you look in to using common classes as working with dynamic ids in the manner you are generates some unnecessarily ugly code.
Related
I am working with jQuery and Knockout, trying to implement pagination on a web page.
The items that are displayed are stored in a computed array and then I use jQuery to correctly display 5 elements at a time. The problem I encountered is that the HTML code is not updated soon enough after the computed array is updated.
The following jQuery code does not retrieve all the elements because the HTML has not yet updated with the values stored in the computed array.
filteredLabels: KnockoutComputed<LabelVM[]>;
setPagination() {
$(table + ' tr:gt(0)').each(function () {
trnum++;
if (trnum > maxRows) {
$(this).hide();
}
if (trnum <= maxRows) {
$(this).show();
}
});
}
Does anyone know how to wait for the html code to be updated before doing any kind of manipulations using jQuery?
I hope that the following gives some hindsight into what my problem is:
$('mytable').onload(function() { applyPagination() });
This does not work as there is no 'onload' function stored by the table element.
If the question is some thing like you have a bunch of knockout operations within the html that basically loads runtime html elements based on viewmodel values. Now we need to invoke a function in the view model once all those elements are rendered completely.
In this case you cannot always relay on onload provided by JQuery as the complete DOM which we need gets rendered at later stage when the ko codes in the html gets processed.
The trick is to include a ko code itself in the html after all your operations. Since this is also a ko code we will get back the handle once the rendering of the html using the ko parsing is completed
You can include the following line below the html and then handle your cases in the function renderingComplete specified in the component.
<span data-bind="click : $component.renderingComplete()"></span>
Hope this helps
After hours ploughing through all the posts on this I'm still without a solution. I've got at least 6 divs in a single HTML file which I need to load to a master HTML file. The contents of each div are posted to different div containers in the master file. I can get this to work with the code below, but I'm carrying out 6 separate loads of the same file which is clearly resource and time-wasting. I've tried separating ID's with commas on a single line, but I get strange results where data gets posted to the wrong containers. Does anyone know how to achieve a single load?
$(function() {
$("#CountryList").load("https://URL #CountryStore");
$("#YearList").load("https://URL #YearStore");
$("#ProductList").load("https://URL #ProductStore");
});
Make only one request using $.get() and parse the response yourself and place the various parts where you want them
$.get('https://URL', function(data){
var $data= $(data);
$( "#CountryList" ).html($data.find('#CountryStore'));
$("#YearList").html($data.find("#YearStore"));
$("#ProductList").html($data.find("#ProductStore"));
});
This is essentially what load() is doing internally
This would be a generic question asked a number of times before. The reason why i am asking this is because i did use the on ready call back in jquery and it did not modify the placeholder of my element "search_input"
$( document ).ready(function() {
$("#search_input").attr('placeholder','New data that will be shown');
}
This is because the CSS is applied on the id "search_input" before it is loaded. I have tried everything but nothing seems to work.
Any ideas?
Note : I am working on ArcGIS Javascript to applications using ERSI maps . The issue i face is occurs when I load a search bar through javascript, which takes time to load the search bar. But my html page calls the on ready callback before this script is loaded. Hence, I face this issue. I am unable to solve this and any help would be appreciated!
I fixed this in my code using this,
search.on("load", function () {
//push all the sources
var sources = search.sources;
sources.push(addSources("ABC","ABC","eg : ABC",1));
sources.push(addSources("XYZ","XYZ","eg: XYZ",1));
search.set("sources", sources);
//Adding the placeholder here, as the search bar is loaded with sources only at this point of the execution
//Hence, we can modify the CSS only after this point.
$("#search_input").attr('placeholder','Search Tree Data');
});
You cannot modify the CSS anywhere in the code. It has to be modified only when the search bar has been loaded with all its sources. I tried adding a $document.ready(function(){}); or adding the css at the end of the body. Nothing worked because we are using a different javascript library/toolkit here - Dojo. Hence, we can only performs operations based on how the data is loaded or when call backs are called in Dojo. and not in normal HTML javascript to jQuery.
I need some help pointing to the right direction. I have a jQuery code what pulls some HTML content via the $.get function after the page is loaded, puts them into the $data variable and it's appended to the div_content.
Everything works perfectly, except after the appending the javascript links in the original content don't work.
The code part:
$(document.body).ready(function() {
$.get("content1.php", {id:"1234" }, function(data) {
// for example this is the pulled data
var data = 'link'
$('.div_content').append(data);
});
});
The standard tags, without javascript aren't affected, they work fine.
I found some advices like this - jQuery Appended elements with href and javascript doesn't work - and this - Appending a link with Jquery - and read the jQuery's .on() function but doesn't seem to resolve my exact problem with appending the content.
I have jQuery 1.10.1, thanks for all the inputs.
Without seeing what data may contain its difficult to see exactly what you're trying to achieve but I can see the fist thing you do after receiving the ajax response is overwrite the returned data which is obviously incorrect.
perhaps you meant something like this?:
$.get("content1.php", {id:"1234" }, function(i,data) {
var link = 'link';
$('.div_content').append(link);
});
Thanks for the responses and comments, mea culpa, it was my, a design error. I had to include the jquery and fancybox JS and CSS into the someotherpage.php (the data-id attribute), and now it's working.
I perform a function which loads content into a div. I am using innerHTML, I GET a php file, which updates the innerHTML of the div with the php file's content.
This div contains another div inside it with the class and id of "tweet". This div is updated with actual tweets of a specific hashtag, passed to the function through a $variable
It works fine when it is simply an onclick event, such as this:
<p>activity</p>
<div class="tweet" id="tweet"></div>
However, what I want to do is have it automatically load tweet('') once the "tweet" div has loaded.
The tweet(hashtag) function is:
function tweet(hashtag) { $("#tweet").load('tweet.php?hashtag='+hashtag); }
which loads a php file that calls the jquery tweet function.
jQuery(function($){
$(".tweet").tweet({
avatar_size: 32,
count: 3,
query: "<?echo $hashtag;?>",
loading_text: "loading tweets...",
refresh_interval: 3
});
});
Based on the hashtag passed, it shows 3 tweets.
The hashtag is called when the page is loaded, as a session variable.
It all works fine when I click the link. What do I need to do to have this load automatically. so that I don't need to click the link? I have tried a number of autorefresh options but couldn't quite get it. I would really appreciate assistance.
I know that, if this was just a regular page being loaded, I can simply use $(document).ready and call the jquery function. However, due to the way the div is populated with the new php file contents, it doesn't work. I have tried a few times using autorefresh intervals, window onload, etc. They don't seem to work either.
There are two ways to try this:
Run the code somehow from the function which you call to load the div. (Guaranteed to work. You may even put together some kind of plugin concept. "eval" may be useful.)
Add a tag after the div. If things work as you hope, that code will execute immediately.