How to handle load events and append in jquery - javascript

Hi I have a problem while using set interval function with .load events and append please explain what I did mistake in my code please give a solution
HTML
<div id="user2<?php echo $d['qid'] ;?>">
Comments Loads Here
Jquery code
setInterval(function(){
$("#user2").load( "test2.php,#user2");
},1000);
qid means Query id I have multiple(qid) queries in my site How to add append
please give a solution I am new in jquery Thanks in advance

Id of div is dynamic, as "qid" is appended to it.
<div id="user2<?php echo $d['qid'] ;?>">
In above code, if "$d['qid']" is 101, then generated html will be as given below.
<div id="user2101">
Hence, your javascript must include dynamic id using "" syntax. Also, you should be using space instead of comma in load event (http://api.jquery.com/load/#loading-page-fragments). You should be passing "qid" to "test2.php" page as query string to get comments related to "qid".
setInterval(function(){
$("#user2<?php echo $d['qid'] ;?>").load( "test2.php #user2");
},1000);

First, as qid is the query id. Having the following code with qid 2 will yield
<div id="user22">
Is this really the div you really want? If you want user2 it should be:
<div id="user<?php echo $d['qid'] ;?>">
Second, you need to pass a valid path to your page you want to load. Are you sure test2.php,#user2 is the correct path?

Related

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

Onclick in html-code vs find by id | How add value from php to js

I have two questions:
1)- What example is better- when i use onclick in html or when i find the element by in the script?
2)- Is it correct to pass $id value by \<\?=$id\?> in the second example?
<p onclick="message(<?=$id;?>)">Test</p>
<script>
function message(id){
alert(id);
}
</script>
or
<p id="message">Test</p>
<script>
$("#message").click(function(){
alert(<?=$id;?>); //<---id
}
</script>
Your first sample is an outright syntax error. You'd be generating
<p onclick="message-7">Test</p>
Since anything inside the " for the onclick is Javascript code, you're doing "undefined variable minus 7".
If you want to store your 7, you either assign it to a JS variable, or pass it as a function argument:
<script>
var foo = <?php echo json_encode($id); ?>;
</script>
<!-- or you do -->
<p onclick="somefunction(<?php echo json_encode($id); ?>);">click me</p>
Note the use of json_encode(). It is not necessary in this case, but it's a good habit to get into. You should never be directly dumping a PHP variable into a javascript context with out it. Remember that the client browser will never see your PHP code. It'll just see whatever javascript you're generating, and if the PHP value contains illegal javascript, you'll just be producing a javascript syntax error and killing the entire block.
Question 1 is a duplicate of addEventListener vs onclick
Question 2: Yes, that should work :-)

Javascript / Php : set textarea value

I have the following script, which returns 2 values from my database.
$(document).ready(function() {
<?
$link=new mysqli($serveur,$login,$pass,$base);
mysqli_set_charset($link, "utf8");
$r=mysqli_query($link, "select sujet,corps from mail where type='Création_rationnaire'");
while($row = mysqli_fetch_array($r)) {
?>
document.getElementById("sujet").value="<? echo $row[sujet];?>";
document.getElementById("te").value="<? echo $row[corps];?>";
<? }mysqli_close($link); ?>
});
Here are my 2 forms, one is a classic Input, the other is a textarea.
<input id='sujet' class="form-field">
<textarea id="te" class="textarea" rows="9" cols="70"></textarea>
The problem is : my SQL request works in MySQL, but when "corps" is echoed as above, nothing appears in the Inputs, like the script was crashing... Only "sujet" can be echoed successfully. So... why, just why ? Thanks in advance for whoever helps me.
EDIT : all I can echo in the "te" textbox is a single string like this : echo 'something';... but nothing else works...
Try this
document.getElementById("sujet").value="<? echo $row['sujet'];?>";
document.getElementById("te").text="<? echo $row['corps'];?>";
or if you use jquery
var message = <?php echo $row['corps']; ?>;
$("#te").val(message);
Textarea does not have a value but it does have text.
in an input box you would have <input type="text" value="example" /> and in a text area the value is inside the element like so
<textarea>example</textarea>
A other way is to use innerHtml (javascript) or html (jquery) .
But note that html tags will be display with one of these options
document.getElementById("te").innerHTML="<? echo $row['corps'];?>";
<textarea> doesn't have value property. Since you are using jQuery to bind document ready, you can use jQuery to set the value.
$("#sujet").val("<? echo $row[sujet];?>");
$("#te").html("<? echo $row[corps];?>");
What is the value of $row[corps]? Is it empty string? Does it contain double quote, or newline characters? If it contains any of them, it will break your javascript source code. What does javascript source code look like when you check source code inside the browser?
It works by inserting the values directly into the plain html forms. I usually use this javascript function because I have tons of forms to fill in my program, and it never failed until now... So my function above was good, but we still don't know why it failed in this particular case...
Problem solved anyways... thanks to everyone.

Input HTML into included index page

I am trying to improve an old website which has been created by having one index.php
Which is behaving like a parent to several sub sites which then
insert their specific contents into the parent using javascript (getElement, add all sorts of content and then appendChild).
This results in a huge code to just create a little form, which can be done far neater with HTML.
Thus my question;
how can I input HTML content into a parent file's elements without creating these contents all with javascript?
I am looking for a solution like:
<?php
include_once('index.php');
?>
<ul id="nav">
<li class="navi">Log uit</li>
</ul>
<script>
somehow insert newly created unsorted list "nav" into the included index.php
</script>
I hope I have formulated my question clearly and am looking forward to your answers!
I thing best to use angularJs for this.
I have found what I was looking for, it was innerHTML
This way I can simply type an HTML code inside javascript which is then inputted into the included php as I wanted.
Example;
document.getElementById('databox').innerHTML =
'<div class = "selectform">' +
'<form id="login" method="post" action="requestklant.php">' +
'<select name="klantdropdown"></select>' +
'<button type="submit">Opvragen</button>'+
'</form>' +
'</div>';
Thank you for your suggestions and effort, though.

Tooltips in Joomla containing HTML

I created a component using Component Creator for Joomla 3.X
The problem is that on the site the tooltips show html code. For example:
<strong>Title</strong><br/>Description
Instead, on the administrator they are displayed properly:
Title
Description
I was reviewing the documentation here and here, and it seems that it is possible to define the output format when calling the tooltip function but there are no calls inside the component to that function. The only call I see is JHtml::_('behavior.tooltip'); at the begining of the view file and don't know how to specify the output format.
The site is in this URL:
http://50.87.185.99/colombianadederecho_blank/index.php/administradores-ph/registrarse
Added:
It seems like the code is called when building the label for each field:
<div class="control-group">
<div class="control-label"><?php echo $this->form->getLabel('document'); ?></div>
<div class="controls"><?php echo $this->form->getInput('document'); ?></div>
</div>
And it is stored in the title attribute:
title="<strong>Title</strong><br />Description"
So, I think the problem is in the Javascript function, maybe using a .text() jQuery function instead of a .html().
Inspecting the source code I found this, but don't understand why it is not working properly:
window.addEvent('domready', function() {
$$('.hasTip').each(function(el) {
var title = el.get('title');
if (title) {
var parts = title.split('::', 2);
el.store('tip:title', parts[0]);
el.store('tip:text', parts[1]);
}
});
var JTooltips = new Tips($$('.hasTip'), {"maxTitleChars": 50,"fixed": false});
});
jQuery(document).ready(function() {
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
Solution:
As #ilias found it was a problem between libraries. I had to disable the bootstrap call in the header using this plugin and call it from the end of the body:
<script src="/site/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
I don't know the code that Component Creator produces, however I assume that the tooltips are like in the administrator views. If this is the case you should check for something like this:
<button type="submit" class="btn hasTooltip" title="<?php echo JHtml::tooltipText('JSEARCH_FILTER_SUBMIT'); ?>"><i class="icon-search"></i></button>
and enclose the contents of JHtml::tootlipText() in strip_tags().
Otherwise try to find the line <strong>Title</strong><br/>Description where the tags are shown and enclose it in strip_tags(). For example you might have something that looks like:
echo $this->escape($item->description);
that should be turned into:
echo $this->escape(strip_tags($item->description));

Categories

Resources