How to reload div (without refresh the page) with different values?
I have this code:
$value1 = 'value1';
jQuery(document).ready(function($){
$('#content').doSomthing({
string: {
id: '<?php echo $value1; ?>'
}
});
<div id="content"></div>
<a onclick"">replace with value 2<a/> //when press this the id will be 'value2'
I dont mind to use only jquery if i need to, but what way i need to do this?
are you looking for this,
<script>
$(document).ready(function () {
$('#anchor').click(function () {
$("#content").html($(this).html());
});
});
</script>
<div id="content">
</div>
<a id="anchor">replace with value 2<a />
Try this:
$("a").click(function(e){
e.preventDefault(); //stop page refreshing
var value = this.innerHTML.match(/value \d+/);
if(value){
value = value[0];
$('#content').html(value);
}
});
You better assign a class to that anchor element and register the click event as $("a.className").
Related
I have used a function to capture the Query String value of "name" - i.e. imagine a party invite site;
https://cometomyparty.com?name=phil
The function used is;
<script type="text/javascript">
function getQuerystring(){
var q=document.location.toString();
q=q.split("?");
q=q[1].split("&");
var str=""
for(i=0;i<q.length;i++){
tmp=q[i].split("=")
str+=" "+tmp[1]+"<br />"
}
document.getElementById("name").innerHTML=str
}
onload=function(){
getQuerystring()
}
</script>
Then I can call the value of 'name' using id="name" where I want to use this on my page, i.e. in the heading, I could say, Phil, looking forward to having you at the party...
How can I dynamically append my 'name' value (var str) within a html link placement i.e.
Link Text
Which would return, in the example above;
http://example.com?name=phil
You can access the href attribute of the <a> tag directly or by using .setAttribute:
// Using .href:
document.getElementById("name").href=str;
// Using . setAttribute:
document.getElementById("name").setAttribute ("href", str);
Be aware that you should have that <br/> tag in the src of the link.
Try this:
<a href="#" onclick='goToPage(event)'>Link Text</a>
<script>
function goToPage(event) {
event.preventDefault();
window.location='http://example.com?name='+str;
}
</script>
Ideally you would want to use jquery where you could use:
$('#link').click(function(event) {
event.preventDefault();
var link = $(this).attr('src');
window.location=link+str
});
You would of course want to remove "str" from the href
I want to Click on a Website button that are already going on.
For example:
like url: www.google.com..
I want to Click Google Search button programmatically by using any method in PHP, Javascript, Jquery and Ajax.
if Anyone know Solution. Please tell my and provide the source code.
Note: We dn't need to create own button we want to click on a website button by using class and id.
I want to try this..look like this but not success..I want to click Learn HTML button that are show on iframe...in w3school website..
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<iframe src="http://www.w3schools.com" width="800" height="400"></iframe>
<script>
//setInterval(function () {$("#hand_1151079882").click();}, 3000);
function clime(){
setInterval(function () {document.getElementById("#w3-btn").click();}, 3000);
alert();
}
//using javascript
$(document).ready(function () {
$(".cli").on('click', function(event){
$("#w3-btn").trigger('click');
});
});
</script>
<input type="button" class="cli" name="clime" value="submit" onclick="clime()">
you need set id for iframe
var iframe = document.getElementById('w3schools-home');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
innerDoc.getElementsByClassName('w3-btn')[0].click();
[0] is for button Learn HTML, there 19 element have class w3-btn
Tested and Work on w3schools Try it Yourself ยป
IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.
as Requested, here example PHP for get Element and Recreated to your own sites.
<?php
$url='http://www.w3schools.com/css/default.asp'; // or use $_GET['url']
$scheme=parse_url($url)['scheme'];
$host=parse_url($url)['host'];
$domain=$scheme.'://'.$host;
$ch=curl_init();
curl_setopt($ch,CURLOPT_URL, $url);
curl_setopt($ch,CURLOPT_HEADER, 0);
curl_setopt($ch,CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch,CURLOPT_TIMEOUT,30);
curl_setopt($ch,CURLOPT_POST, 0);
$dom = new DOMDocument();
libxml_use_internal_errors(true);
$dom->loadHTML(substr(curl_exec($ch), curl_getinfo($ch, CURLINFO_HEADER_SIZE)));
$xpath = new DOMXpath($dom);
$aElement = $xpath->query('//a');
$length = $aElement->length;
$links=array();
for ($i = 0; $i < $length; $i++) {
$element = $aElement->item($i);
if ($element->tagName=='a' && trim($element->textContent)<>'') {
foreach ($element->attributes as $attr) {
$attrName = $attr->nodeName;
$attrVal = $attr->nodeValue;
if($attrName=='href' && str_replace(';','',$attrVal)<>'javascript:void(0)'){
if(substr($attrVal, 0, 1)=='/'){
$links[trim($element->textContent)]=$domain.$attrVal;
}else if(substr($attrVal, 0, 4)=='http'){
$links[trim($element->textContent)]=$attrVal;
}
}
}
}
}
foreach ($links as $key=>$value) {
echo ''.$key.' | ';
}
You can create a javascript function to get URL from iframe and than request AJAX to PHP that have script ABOVE, you can use echo(but need foreach as example from my script) or json_encode to array $links, then reCREATED button from other url/website to your sites.
or just echo to your sites.
My script still need improvement to handle value of attribut href that use '../' or 'foldername/'
just reminder, for get access ELEMENTS on iframe that pointing to different domain is impossible.
You seem to be missing the element with the id w3-btn which gets clicked programmatically.
Also, it seems both of these are doing the same thing ...
function clime(){
setInterval(function () {document.getElementById("#w3-btn").click();}, 3000);
alert();
}
and
$(document).ready(function () {
$(".cli").on('click', function(event){
$("#w3-btn").trigger('click');
});
});
both are trying to click an element with id w3-btn, just in different ways. You only need one of them.
This might help:
<script>
jQuery(function(){
jQuery('#modal').click();
});
</script>
I got this answer from here.
Is there a way to pass the value attribute from HTML side to JavaScript function via onclick event?
html/php
echo '';
javascript
<script>
doFunction(value){
alert(value);
}
</script
this.value is undefined. This.id is the way I've handled it in the past, but now that i am dynamically writing a list with classnames, I don't quite understand how to pass the value from the HTML. This = [object OBJECT] and this.value is undefined. I can get the value if i use ID but not class. what am i doing wrong?
Alternatively, you could use the getAttribute method to get the value. Example:
<?php
$varVal = 100;
echo 'test';
?>
<script type="text/javascript">
function doFunction(value) {
alert(value);
}
</script>
JSBin
Would something like this work for you? (using getAttribute)
HTML
<a href="#" value="myName" id="anchor" >LINK</a>
JS
var a = document.getElementById("anchor");
a.addEventListener("click", function(event){
event.preventDefault();
alert(this.getAttribute("value"));
}, false);
I've got 2 <div>'s, both contentEditable with values from a database.
It works displaying them and changing them BUT only the second time.
e.g. :
Clicking on the #stuff div
alerts me the value from the DB ( something like "Weather's ok" )
I change it to "New Value"
Clicking outside the div
Function alerting me the value from #stuff div ( still "Weather's okay" )
Clicking again inside the div and it now alerts me "New Value"
This leads to having to go into the div twice for it to accept the changes..
I tried it manualy to open save.php with the parameters and it saved directly!
I'm pretty sure this is something basic what I'm missing but I cant figure it out yet..
HTML :
<div id="test-container" style="border: 1px solid green;">
<div id="editable" contentEditable="true">
<?php echo $rst["content"]; ?>
</div>
<div id="stuff" contentEditable="true">
<?php echo $rst["stuff"]; ?>
</div>
<button id="save">Save Changes</button>
</div>
JS Function(s) :
var content = "";
var from = "";
/*
The code below shows the save button if anywhere in the editable div is clicked,
and hide the button if anywhere outside the div is clicked.
*/
$("#editable, #stuff").click(function (e) {
content = $(this).html();
from = (this.id);
alert(content);
$("#save").show();
e.stopPropagation();
});
$(document).click(function() {
alert(content);
$("#save").hide();
});
/*
The code below gets the data from the content variable and posts to the send.php file.
If the data is posted successfuly, the PHP file recieves the data and inserts to database, where the field is based on the form variable.
*/
$("#save").click(function (e) {
$.ajax({
url: 'save.php',
data: {
content: content,
from : from
}
});
});
The problem I found in your code is:
after the keyboard input DOM is updated not variable.
Try this:-
var content = "";
var from = "";
$("#editable, #stuff").click(function (e) {
content = $(this).html();
from = $(this.id);
console.log(content);
e.stopPropagation();
});
$(document).click(function() {
console.log(content);
});
$("#editable, #stuff").keyup(function(){
content = $(this).html();
from = $(this.id);
});
click here for the working fiddle
I'm having some trouble getting this work, I'm using JQuery to get a list of results from mySQL, the results include a name and handler link (JQuery) that should trigger a function/event, but it is not working for some reason
Here is the code from my first page:
This script runs a query and gets the results from the ajax_load.php file using JQuery:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$("#lets_library").bind('submit',function() {
var value_name = $('#name').val();
if(value_name)
{
$("#find_library").html('Loading results...');
}
$.post('ajax_load.php',{value_name:value_name}, function(data){
$("#search_results_library").html(data);
});
return false;
});
});
</script>
This other script in the same first page is for the click handler, showing the ID clicked, but it is not working:
<script type="text/javascript">
$(document).ready(function(){
/// shows my ID from the result row ///
$('.next-click').click(function() {
alert("my id: " + $(this).data("id"));
});
});
</script>
This is part of the code from the ajax_load.php that returns the results with the link and ID to be clicked:
while($row = mysql_fetch_array($result_query))
{
echo '
<table width="100%" border="1">
<tr>
<td>
';
echo '<a href="#" class="next-click" data-id="'; echo $row['ID']; echo '">';
echo $row['name'];
echo '</a>
</td>
</tr>
</table>';
}
The problem is, when I click on the link it adds an # to the end of the URL page and nothing happens like the script is not even there.
Please help!
You need to use event delegation as the link is created dynamically
$(document).ready(function () {
/// shows my ID from the result row ///
$('#search_results_library').on('click', '.next-click', function () {
alert("my id: " + $(this).data("id"));
});
});
When you use $('.next-click').click(..), the click handler will get registered to only those next-click elements which exists in the page when the script is executed. The elements added later will not get the triggers.
So the solution is to bind the handler to an element which already exists in the dom(which is an ancestor of the target element), but pass a additional selector which will specify the actual target we are looking for. jQuery's .on() method provides this functionality
Try this:
$("#search_results_library").on('click', '.next-click', function(e) {
e.preventDefault();
alert("my id: " + $(this).data("id"));
});