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.
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 would like to download content of certain page and get one number from it (still not sure how, probably using PHP DOM interface). I opened the page, started Firefox's debugging, picked the element with number and found out that is in <div id="lblOptimizePercent" class="wod-dpsval">98.4%</div> (98.4% is what I am looking for). So I opened its source code, Ctrl - F for lblOptimizePercent and all I found is this <div id="lblOptimizePercent" class="wod-dpsval"></div> without any content. What I've done wrong? Or is it some site's protection not to steal contents?
Link to the original site
Normally, to scrape the page from PHP, you would have to
save the page
extract the value you want from HTML via a regular expression
alternatives include using SimpleXML for DOM querying...
The piece of HTML we are look at is:
<div id="lblOptimizePercent" class="wod-dpsval">DATA</div>
<?php
$text = file_get_contents('http://www.askmrrobot.com/wow/optimize/eu/drak%27thul/Ecclesiastic');
$regexp = '^<div id=\"lblOptimizePercent\" class=\"wod-dpsval\">(.*)<\/div>^';
preg_match($regexp, $text, $matches);
$percentage = $matches[1];
echo $percentage;
This should give you DATA - the percentage value. But this doesn't happen! Why:
The data is dynamically inserted by a Javascript on client-side.
The id or class selector is used for DOM querying (element selection), then the data value is added.
http://api.jquery.com/id-selector/ - http://api.jquery.com/class-selector/
jQuery example
On this site they deliver <div id="lblOptimizePercent" class="wod-dpsval"></div>to the client and then they use an update query like this: $("#lblOptimizePercent").text("100%"); to update the percentage value.
If you want to query it on client-side, you might use $("#lblOptimizePercent").text();**
Try this in your console. It returns the percentage value.
How to scrape this page?
If you want to scrape this page with dynamic data, you need something like a Browser Environment for scraping: PhantomJS or SlimerJS are your friend.
Open the page with PhantomJS, launch the jQuery cmd from above and done.
This snippet should get you pretty close. You might save it as scrape.js then execute it with Phantom.
var page = require('webpage').create();
page.open('http://www.askmrrobot.com/wow/optimize/eu/drak%27thul/Ecclesiastic', function() {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js", function() {
page.evaluate(function() {
alert(
$("#lblOptimizePercent").text()
);
});
phantom.exit()
});
});
You can also save the "evaluated page" (now with data) and do the extract with PHP.
That's exactly like: Save Page in your browser and working on the saved HTML file.
In Firebug or another webdeveloper tools you see the generated content, in Source code there is a blank element only.
First time, blank element is shown (during rendering site) and than using JS the content is filled.
Googlebot etc. can´t see this JS-generated content, but it´s no problem in this case.
Code:
document.getElementById('lblOptimizePercent').innerHTML = '94%';
Or similarly using jQuery:
$('#lblOptimizePercent').html('94%');
// need to load jQuery before, of course
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 jquery function that controls some css that sets state to active or not. It runs on a click event. I need to have a similar function run when a php function runs (when the user searches with a form). The search term goes through a php function which will match the term with an id. How can I set the state to active with the php function?
Here is a link to a test area
http://vtour.dev4.webenabled.net/tester/index.html
If you click an area, the selection remains active. if you type a name in the lavender search box, and click the search icon, the corresponding area does not become selected.
(attaching the search functionality file. i know there is a bunch of junk in there but the section that corresponds to this example starts around line 149
The small lavender box next to the input line is the click/search icon
Thank you
You can't do this from PHP, you do everything through Javascript (and see Ohgodwhy's comment, especially the note about using jQuery or not using jQuery - you should use .ajax() or .post() for example).
To do it, the AJAX would return some flag to tell Javascript what blocks to turn on/off, as well as the text response. You can wrap all this up in a JSON object.
<?php
$returnArray = array('html' => 'HTML TO DISPLAY', 'blocks'=>array(1,3,4));
echo json_encode($returnArray);
?>
and in javascript use the JSON object elements to display the text, and then also turn on/off the right blocks. This bit will be easier in jQuesry as it handles the JSON object for you, so you'd only need response.html for the html bit, and response.blocks for the blocks.
You can execute a javascript function by outputting a html script tag.
ie.
<?php
echo "<script type=\"text/javascript\">runJavascriptFunction()</script>";
?>
So you could technically drop that into the response from your FetchData.php - but if it were me, I would do it all with jQuery:
$('#woodward-title-search-button').click(function() { //on button click
var term = $('#searchTerm').val(); //the search term
$('#room-'+term).css('background','red'); //or more nicely: .addClass('highlighted');
//load the response of fetchdata into #myDiv
$('#myDiv').load('FetchData.php?searchTerm='+term);
});
I would suggest communicating with your PHP in json and providing an ID of some kind to better target your div.. but this should work as a down and dirty solution.
Good day. I'm trying to make an online quiz application using php. The idea is that the form will add a text field for the question and four other text fields below it for the answers each with a radio button to determine which one is correct. Then below the form is an add a new question button which would call an ajax post function. The problem is instead of appending to the target div, the php code replaces the contents of the div itself. Is there a way for php to append to the div instead of replace its contents?
PHP is server-side, it can't do anything in the browser, only deliver content.
To add a div, you use Javascript in the page, e.g.
var el = document.getElementById('idoftarget');
el.innerHTML += '<div>new stuff</div>
... I think. I always use jQuery:
$('#idoftarget').append('<div>new stuff</div>');
how are you handling the ajax response? maybe instead (since you don't have code here it's a guess) of
document.getElementById('someDiv').innerHTML=ajaxResponseText;
you want
document.getElementById('someDiv').innerHTML+=ajaxResponseText;
(appending rather than overwriting)
This is the right one:
document.getElementById('exampleDIV').innerHTML+=ajaxResponseText;