H_i
I have a question about possible simple and good working solution width jquery. How to append ajax table from sql like
https://www.inforegister.ee/BACEXSQ-ARGOS-KRACHT
with 'scrolling down'-event (width after ajax-reloaded table) width a find form?
First i have a mysql table creat table tbl1(id int auto_increment,name varchar(200)); having many hundred records. From it appends automatically e.g 10 records.
Html-code would looks like:
<form>
<input type="text" id="find" >
<input type="buttom" id="findb" >
</form>
<table></table>
Thank you
If you look at the source, you'll see that they're making use of the scroll event:
jQuery(window).scroll(function(){
if(jQuery("#nextCompaniesCount").val() > 0) {
if (jQuery(window).scrollTop() == jQuery(document).height() - jQuery(window).height()){
loadNextCompanies();
}
}
});
Look at the source and you'll also see the loadNextCompanies() function, which performs an AJAX request and then adds any HTML to the body.
If you're wanting to add new items to the end of a table, you can use something like:
$('#id_of_table > tbody > tr:last').after(newRow);
newRow would contain the tr html that you want to add.
Hey here is the plugin you are looking for.
http://masonry.desandro.com/demos/infinite-scroll.html.
Take a look at above example.
Wayne Whitty's answer is the way to go, but I'd like to add to it:
If you scroll fast on the page that you linked to, you will see that the loading image appears multiple times. This is happening because the user has reached the bottom of the page again, before the new content has been loaded.
You can make this more efficient by checking to see if you are already waiting on a response from the server before calling loadNextCompanies() (or your equivalent) again.
Update:
You asked for a plugin- although I have never used any plugins to achieve this so I can't make any recommendations, I can tell you that this is called Lazy Loading and a quick search turns up this plugin: https://code.google.com/p/jquerylazyscrollloading/
Related
Me and My friends are starting a website. I'm the only one who knows any type of coding. Since they don't know any programming language I'd like to make a form submission page that will allow them to just type in basic info, updates and have it generate and insert PHP or HTML into the main content page for them.
For example if name in box 1="Rob" I want it to insert <p>Rob #HH:MM MM:DD:YY</p>
And whatever info is typed into box 2 to be in the following paragraph.
I know something like above is possible with PHP and SQL, but I'm just kinda stumped as to know what it needs to be searched to learn it.
Thank you in advance for your help.
It sounds as though you don't necessarily even need any PHP for this. This is something you could just as easily do in the client itself. Of course, for something more elaborate, you're going to need to build this out more and can undoubtedly make use of a more elaborate system, but for your example, just piece together what you're aiming to join with some JavaScript.
I've assembled a sample at http://codepen.io/anon/pen/VjdPgm but here's the important bit:
HTML
<p>Box 1</p>
<input id="box1">
<p>Box 2</p>
<input id="box2">
<br/>
<button onclick="generate()">Generate</button>
<p>Result</p>
<textarea id="result" cols="100" rows="10"></textarea>
JavaScript
var generate = function() {
var output = "";
//Append the text for box1
var box1 = document.querySelector('#box1').value;
output = '<p>' + box1 + '#HH:MM MM:DD:YY</p>';
//Append the text for box2
var box2 = document.querySelector('#box2').value;
output += '<p>' + box2 + '#HH:MM MM:DD:YY</p>';
//Set the output in the result box
document.querySelector('#result').value = output;
}
You click on the button, it executes this JavaScript function that pulls the values from the boxes you filled in and drops the values into the inline templates.
Now, if you actually want this to save the logic somewhere, you're going to need to incorporate the logic to save this via PHP and potentially store somewhere with the rest of your templates or the like. For this, you'll need to consider a number of other aspects including validation, escaping and how you're designing your own pages to build them with their content (e.g. does this script overwrite an existing file or do you assemble the webpage based on some MySQL lookups), but this is a bit outside the scope of your question.
If you're utilizing a CMS of sorts, you might consider using something like the above example to generate the markup so they can just drop what they want in the CMS and avoid having to write all that other stuff yourself.
I'm trying to make smileys work, so I'm going to post the full problem, maybe someone knows a better solution. I have this chat system, where you can click on a smiley and it's value gets passed to the <textarea> much like Google hangouts. Value is "smile_n" where 20 > n > 0. I store it like that in the database, and I have PHP code that's in charge of displaying the proper <img src="smile_n"> tag when parsing data from SQL, but when I pick a smiley, it will write "smile_n" in the <textarea>. Is there ways to change this?
Here's how I drop smileys into the <textarea> element:
$(".smilepick").click(function(){
$('#chatty').val($('#chatty').val()+(' ')+$(this).attr('href')+(' '));
var el = $("#chatty").get(0);
var elemLen = el.value.length;
el.selectionStart = elemLen;
el.selectionEnd = elemLen;
el.focus();
});
Can I somehow make it parse "smile_n" words into images, but keep the value that gets inserted into database "smile_n" so PHP code won't fail?
If you could use div with contenteditable, you could start with something like this:
HTML
<div id="editable" contenteditable="true">
Everything contained within this div is editable in browsers that support.
</div>
Jquery
var smile_ha_img = '<img src="http://placehold.it/16x16"/>';
$('#editable').keyup(function() {
$(this).html(function(i, v) {
return v.replace('smile-ha', smile_ha_img);
});
});
It will replace every smile-ha with the given image.
Try it here: http://jsfiddle.net/tb8vQ/1/ Type smile-ha into paragraph on 4th panel.
Then you can make the content of the div be copied to a hidden textarea to be send by your form as usual.
To Do
You must optmize it for the amount of smiles to check and replace.
After the function replace the string with the html, the carret position is placed on beginning of string (at least in my browser). There are a lot of answers here in Stackoverflow about how to solve this.
The keyup trigger used here would not be useful for your system if users doesn't type the smile code themselves. But you can change your function to be executed right after the user chose the emoticon.
Another approach
There are some WYSIWYG editors that allow you to choose which features you want to offer to your users. So maybe you could find one that you could hide all options but emoticons.
I have multiple expanding / collapsing boxes on a single page being generated by PHP / MySQL.
Problem is, when I click on one link to expand a box, it expands all the boxes.
I thought about appending the post ID at the end of the class (<div class="postreplycontainer-POST_ID">) but I am not sure if that will work since I'd have to figure out a way to change the jQuery.
Here's a working example: http://jsfiddle.net/Draven/kUhkP/35/
Keep in mind, I can't manually code in each box because I am pulling the content from the database.
EDIT: Maybe somebody can help me with an additional problem.
I want to focus the textarea box when I expand the <div>. I tried using the same trick as before (using .closest but that didn't work).
Here's the example: http://jsfiddle.net/Draven/kUhkP/53/
This example will always focus the first <textarea>.
Here's the FIDDLE
$("a.postreply").click(function () {
$(this).closest('.blog-container')
.find('.postreplycontainer').slideToggle("fast");
});
If you call $("div.postreplycontainer") you will access all divs, if the div is always after a table you can use
$("a.postreply").click(function() {
$(this).parents('table').next().slideToggle("fast");
});
to slide that div http://jsfiddle.net/kUhkP/39/
I think this should be ok for your problem.
$("a.postreply").click(function () {
$(this).closest('.blog-table').next().slideToggle("fast");
});
I have a list of links which when clicked opens a link's corresponding DIV. These div's are hidden by default using both jquery .hide() and css display:none.
These divs all contain a php include to a file with a jquery product zoomer in, and because of the way I've made it, only the first one works and the div's below in the source order fail to work (they are included, but the jquery doesnt work) as I'm assuming it conflicts.
I'd love to be able to fix this apparant conflict, but haven't a clue what the issue may be, and as the site is "secret" I can't show the source here without giving away what it is.
So, i was thinking - instead of including these files via php, have them load in when the link is clicked, so only one of these includes is in the page at any one time!
Is this possible using jquery and some php?
--- edit ---
On further investigation - thanks to some of your comments below, it looks like jQuery's .load() looks suitable, but won't work for me. Here is my jQuery:
`
$('.urbaneCarousel li.dowrImg').click(function(){
$('ul.urbaneCarousel').hide();
$('.dowrDiv, .dowrDiv div').show();
$('.dowrDiv .insert').load('path/to/dowr.php');
return false;
});
`
Any advice? I'm 100% certain the path/to/ part is correct.
JQuery .load http://api.jquery.com/load/ | I guess you have to try to play with .load =)
It sounds like you might have some conflicts between those php files. it shouldn't be an issue to include different php's into your hidden divs at all. In any case, couple ways you can do this:
Include all your content via php upfront and simply show the divs on the browser (sounds like what you're doing)
< div id='mydiv1' style='display:none'>
< ?php include('myfile1'); ?>
< /div>
< div id='mydiv2' style='display:none'>
< ?php include('myfile2'); ?>
< /div>
etc.
Then, on some click event, you would do $("#div1").show(), etc.
or
2) simply create your divs empty and bind click events to the .load or .get calls for specific divs
so let's say you have two buttons btn1 and btn2 for those divs.
$('#btn1').bind('click', function() {
$("#div1").get('myfile1');
$("#div1").show();
});
The only problem with the second solution that it will go to the server to fetch data every time button is clicked.
UPDATE
try specifying full path in your .load or .get just to be safe. That might be giving you problems too. Here's a quick example (I am using codeIgniter, thus base_url() reference)
$('#btn_trigger').live('click', function(){
$("#dowrInsert").load("<?php echo base_url();?>auth/index");
});
<input type='button' value='Trigger' id='btn_trigger'/>
<div id="dowrInsert">
My text
</div>
This works fine
Well, I managed to resolve the conflict which was leading to me needing to use the .load() method.
I'm sure there was something within my wordpress theme which was causing this to mess up, so thanks to all those who helped me looking for ways round this, but I managed to accidentally fix my initial conflict in any case, so no longer need the .load() method as a workaround.
I'm trying to renew my company intranet using jquery, ajax and php. General aspect of the site is a drop down menu at the top loaded into a div and a content div where i load pages clicked on drop-down menu. The problem come out when inside content i load a page which inside have a tab menu, what i do when a tab is clicked is to load a html structure page with form and fill it by POST call.
The question is it correct load data when requested instead of pre-load it and show them when called as seen in a lot of example in the web? Working in my way I get a lot of data cached so when i click for confirm some data I send request several data instead of one..
what is the best way to work with this languages?
I find my goal solution suggested by Nathan I pre-load all data in one time for all forms, here is the code:
$("#div_0").show();
$("#scheda_eti > div").css({"background-color": "white", "color": "black","cursor":"hand"}); //tabs div
$("#"+schemi[0]).css({"background-color": "red", "color": "white","cursor":"default"});
for (var x=0; x<schemi.length; x++)
{
$("#div_"+x).load("./schemi/sch_"+schemi[x]+".php", {azione: "vedi"});
}
$.post("./php/global.php",
{azione:"vedi", contratto: $("#suggest_hidden").val() },
function(xml)
{
if ($("status", xml).text()=="1")
{
$(xml).find("form").each(function()
{
var id_form=$(this).attr("id");
scorriDati(xml, "form_"+id_form);
});
}
else
{
$("#scheda_ris").html("<img src='./img/validno.png' alt='errore'> <span style='color:red'><p>Attenzione!<br>codice non trovato!</p></span>");
}
$(xml).find("errore").each(function()
{
$("#scheda_ris").append("<img src='./img/validno.png' alt='errore'> <span style='color:red'>"+$(this).text()+"<br></span>\n");
});
},'xml'
);
To see some code you ca watch to my previous posts linked here:
question1
question2
thanks in advance
ciao
h
I think jQuery UI Tabs is what you're looking for. You need to include jQuery UI in your code, certainly after jQuery.
Order:
<link rel='stylesheet' href='http://jquery-ui.googlecode.com/svn/tags/latest/themes/ui-lightness/jquery-ui.css' />
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src='http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/jquery-ui.min.js'></script>
If you don't like the UI lightness theme, you can choose any from the Theme Gallery. For example, if you want the UI darkness theme, just replace ui-lightness with the theme's name in lowercase, and with hyphens instead of spaces.
I guess the answer to "is it correct load data when requested instead of pre-load it and show them when called?" is "which will the user prefer when switching to a different tab?"
no delay (all content loaded during initial page load)
short delay (ajax lookup of the new tab's content)
a full page load (a full round trip, no ajax needed)
In many cases you can get good results with the first or the third approach. Don't overuse Ajax.
Here's a blog rant about overuse/correct use of Ajax... I haven't honestly read it and don't necessarily endorse the whole thing, but it might help.