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;
Related
I've been looking around for solutions for this for quite sometime and sadly, haven't found a proper solution for it.
Here's the situation.
I have a Bootstrap modal that displays text ( let's call it 'header' ) depending on which button was clicked. The header value is picked up from the data-attribute of the button and using jQuery, I update the text for the respective modal. I hope I've been clear enough about this.
Now, I want to use the same header text in a PHP Script that queries my MySQL table with this 'header' value in the LIKE clause of my query as '%header%'.
Seems simple enough but I can't get my head around it.
Here are some issues that I face:
The header value is empty in the PHP script when I try to pass it to the script. I tried using script_tags to strip the tags around the HTML of the header and just extract the text and also tried PHP DOM but it did not work.
Here are the basic steps for further clarity:
I have a PHP script that needs to get a text value from the HTML on the same page.
This text value was picked up from a data-attribute of a button and updated via jQuery to the HTML.
This text value must be included in the LIKE clause of MySQL query in the PHP script for any updates to the table.
I can handle everything else except the extraction of text and sending it to the PHP script part.
Thank you.
Adding Code for reference:
This is the HTML code that houses the data-attribute:
The $project_title variable was set previously and appended to the button.
echo "<a class='delete_icon' data-project_title='$project_title'><i class='fa fa-trash'></i></a>";
This is the jQuery code:
$('#project_profile_modal').on('show.bs.modal', function (event) {
var del_icon = $(event.relatedTarget);
var project_title = del_icon.data('project_title');
modal.find('h4').text(project_title);
}
This is the excerpt of the PHP script that is relevant:
<?php
$result = "SELECT content FROM my_table WHERE content LIKE '%$project_title%';
?>
Question is: how do I get the text contained in h4 to $project_title/my LIKE clause.
Assuming button looks something like:
<button class="modal-button" data-text="..." data-row_id="...">
Then in click handler you gather all the data and send to server:
$('.modal-button').click(function(){
var data = $(this).data();
// send to server
$.post(url, data, function(response){
// update modal header and content
$('modal-header-selector').text(data.text);
$('modal-content-selector').html(response);
})
})
I have started learning php and I have a question.Let's say I have the following html code:
<p id='tobeChanged'>I wil be changed throughout the execution<p>
This paragraph is not static.Its content can be changed from the user with a button which will produce a random number and will replace the paragraphs html.
E.g. from
p id='tobeChanged'>I wil be changed throughout the execution<p>
to
<p id='tobeChanged'>42<p><!--changed with a button-->
Now my question.Is it possible to pass the new produced value to a php variable?If possible i would like a long explanation.
Also i would like not to use forms(if possible).
Thanks In advance
You need to fire an AJAX request on that button click, that will send that value to server making php to read it.
You can do something like this (you need to include jQuery on page):
$.post("/saveVariable.php",{randNum:randomNum},function(data){alert("Data saved successfully");})
At PHP end, you will get the value in
$_POST['randNum']
Maybe that will help.
I’m trying to store the content of a div to a variable.
Example:
<div class="anything">
<p>We don't know the content of this div</p>
</div>
I want to search for <div class="anything"> and store everything between opening and the end tag.
We also want to avoid using absolute pathnames, so that it only searches the current HTML/PHP file for this div where the code is present.
Is this possible with PHP, or is this only possible with JavaScript ?
PHP is not that intelligent. He doesn't even know what he says.
PHP is a server-side language. It has absolutely NO clue about what the DOM (ie. what is displayed in your browser's window) is when it delivers a page. Yeah I know, PHP rendered the DOM, so how could it not know what's in there?
Simply put, let's say that PHP doesn't have a memory of what he renders. He just knows that at one particular moment, he is delivering strings of characters, but that's all. He kind of doesn't get the big picture. The big picture goes to the client and is called the DOM. The server (PHP) forgets it immediately as he's rendering it.
Like a red fish.
To do that, you need JavaScript (which is on the client's computer, and therefore has complete access to the rendered DOM), or if you want PHP to do this, you have to retrieve an full-rendered page first.
So the only way to do what you want to do in PHP is to get your page printed, and only then you can retrieve it with an http request and parse it with, in your case, a library such as simpleHtmlDom.
Quick example on how to parse a rendered page with simpleHtmlDom:
Let's say you know that your page will be available at http://mypage.com/mypage.php
$html = file_get_html('http://mypage.com/mypage.php');
foreach($html->find('div.anything') as $element)
echo $element->src . '<br>';
you probably need a combination of those.
In your Javascript:
var content = document.getElementsByClassName("anything")[0].innerHTML();
document.getElementByID('formfield').value(content);
document.getElementByID('hiddenForm').submit();
In your HTML/PHP File:
<form id="hiddenForm" action="path/to/your/script">
<input type="hidden" name="formfield" value="" />
</form>
In the script you defined in the form action:
if(!empty($_POST)){
$content = $_POST['formfield'];
// DO something with the content;
}
Alternatively you could send the data via AJAX but I guess you are new to this stuff so you should start slowly :)
Cheers!
steve
You could use JS to take the .innerHTML from the elements you wan and store them in .value of some input fields of a form and then use a submit button to run the PHP form handling as normal. Use .readOnly to make the input fields uneditle.
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.
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.