i want run a php code when a user click a link and change temporarily value of link with output returned by script without reloading page and redirect user to another page
for example if a users click on button :
Click Me!
a code php run for example script.php
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$.get("script.php");
return false;
}
</script>
Click Me!
for example if output of script( $result ) is: 30
then 30 will replaces button: "Click Me!" without reloading page
so at the end after the script is executed i have temporarily instead of "Click Me!" number 30 and if is possible also add a animation gif or something of similar so as: wait wait blinking during execution of script
thanks
Try this, create a class with two methods uW (user wait) uWC (user wait cancel). This class can be reused for future as well
var Util = {
uW:function(id) {
$("#"+id).html("<img src='path to animation GIF' />");
},
uWC:function(id,data) {
$("#"+id).html(data) ;
}
}
Now your function will looks like this
function doSomething() {
Util.uW('clickme'); // clickme is ID of your anchor tag
$.ajax({
url: "script.php",
context: document.body,
success: function(data ){
Util.uWC('clickme',data );
}
});
This might be what you are looking for. I am guessing you want to replace Click Me! with the value returned(30). If not, you can user data inside the function to replace whatever u want
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
function doSomething() {
$el=$(this);
$.get("script.php",function(data){$el.html(data)});
return false;
}
</script>
Click Me!
Click Me!
And the javascript code:
$(function(){
$('#clickme').click(function(){
$(this).load('script.php');
return false;
});
});
You almost have your answers in your question. Use ajax. http://www.w3schools.com/ajax/default.asp you are also using jquery. Jquery has excellent documentation on ajax
Related
Below are script that I found on other stackoverflow questions, however it doesn't work.
I want the script to click on play button and then load a video modal.
URL : https://www.scalperstrategy.com/
<body>
<script>
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});``
</script>
Thanks all!
You can use .click() function to achieve the same
$(document).ready(function () {
$("#btnSave").click(
function () {
AlertSave();
}
);
$("#btnSave").click();
});
function AlertSave() {
alert("Alert Message OnClick");
}
jsfiddle
However, if all you are trying to achieve is to call an event that you bind on click, you can just call this event instead.
after adding jquery and below script it finally work
<script type="text/javascript">
$(document).ready(function(){
$(".mbr-media.show-modal.align-center.py-2").trigger("click");
});
</script>
<div id='here'></div>
I am trying to refresh a certain div within a bunch of divs. The div content is basically generated by PHP along with data from a MySQL database in addition to many variables being sent with the help of an XMLHttpRequest.
The idea is to reload/refresh the div itself and not load a php file or to overwrite it with .text or .html. In this case, I cannot use .load('file.php')
What I have tried :
<script type='text/javascript'>
function updateDiv()
{
document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
}
</script>
and (for a every 3 second refresh) :
$(document).ready(function () {
setInterval(function () {
$('#here').load('#here'));
}, 3000);
});
Ideally, I would require something like :
function reloadDIV () {document.getElementById("here").innerHTML.reload}
function reloadDIV () {$('#here').load(self)}
so that I can use it in a onClick :
<a onclick='reloadDIV ();'>reload div</a>
To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:
function updateDiv()
{
$( "#here" ).load(window.location.href + " #here" );
}
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
For div refreshing without creating div inside yours with same id, you should use this inside your function
$("#yourDiv").load(" #yourDiv > *");
Complete working code would look like this:
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
<div id="here">dynamic content ?</div>
self reloading div container refreshing every 3 sec.
You can do the following to just reload a <div> element:
$('#yourDiv').load('#yourDiv > *')
Make sure to: use an id and not a class. Also, remember to paste:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> in the <head> section of the HTML file, if you haven't already. In opposite case it won't work.
You can use jQuery to achieve this using simple $.get method. .html work like innerHtml and replace the content of your div.
$.get("/YourUrl", {},
function (returnedHtml) {
$("#here").html(returnedHtml);
});
And call this using javascript setInterval method.
I am working with shopify store.
I have created to show fancy box when entered my website.
This is code i used:
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>
And i used notifIt.js and jquery.js files. Now its working fine, I have taken code from this site http://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/
Instead of click the text box, i need to show that notification box automatically.
So i changed above script onclick to onload.. but nothing seems to be work
May i know, what is my mistake? Thanks in advance.
Do you want to show your notification on page loading?
If you do, you can use this:
$(document).ready(function() {
not1();
});
Call Your function, directly. It will be called automatically on script tag loading.
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
not1(); //CALLING FUNCTION, It will be called automatically. I hope it would help.
</script>
For reference see Can't apply simple hide function on div
So, I'm dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:
<a class="a_link" id="a_id<#>" href="#">Click me</a>
Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of "form_map". After all the links have been displayed, I have the following script:
<script type="text/css">
$(document).ready(function(){
$('.a_link').click(function(){
var c_id = $(this).attr('id');
var task = 'read';
var ajax_url = 'engine.php';
alert('link pressed for id: '+c_id);
$.get({
url: ajax_url,
data: { 'task':task, 'c_id':c_id },
success: function(res){ $('#form_map').val(res); }
});
});
});
</script>
Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn't even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.
Any suggestions on what I am doing wrong?
use:
<script type="text/javascript">
instead of:
<script type="text/css">
also use:
$('#form_map').html(res);
instead of
$('#form_map').val(res);
You may want to fix the opening tag
<script type="text/css">
to
<script type="text/javascript">
You need to return false at the end of the function you pass into .click().
$('.a_link').click(function() {
// Your AJAX stuff here.
return false;
});
Returning false stops the link from continuing to work as normal.
I've seen a few questions like the one I'll ask but nothing identical. I have two html files, main and today. What I want to do is load today.html via AJAX into a child div in main.html. Sometime after load, I would like to call a function that resides in main.html from today.html
Within Main I have this function:
function drawCircle (size){
alert('DRAWING');
}
This AJAX load:
$("#leftofad").ajax({
url: ":Today.html?r="+genRand(),
type: 'GET',
success: function(data) { },
error: function() { alert('Failed!'); },
});
And this div:
<div id="leftofad"></div>
In Today.html I have
<script type="text/javascript">
$(document).ready(function(){
drawCircle (100);
});
</script>
The load is going well but Today.html doesnt seem to recognize the drawCircle function. I've tried several precursors including this., window., and parent..
I understand that I can use the callback method of the AJAX loader in jQuery but I don't necessarily want to call drawCircle when the load is complete. I may want to wait a bit or do it as a result of an action from the user. Is it possible to reference these functions from an AJAX-loaded div? If not, can I use an alternative method like events and listeners to fire the drawCircle function?
Since you will be loading JS into your page, try calling the function directly?
(The ready function won't run as the main page is already loaded)
Main.html
<script type="text/javascript">
function drawCircle(size) { alert("DRAWING" + size); }
$(function() {
$("#leftofad").load("Today.html?r="+genRand(), function() {
alert('loaded successfully!');
});
});
</script>
<div id="leftofad"></div>
Today.html
<script type="text/javascript">
drawCircle(100);
</script>
If this doesn't work, I strongly suspect that JavaScript returned in an AJAX call is not executed.
In this case, refer to: How to execute javascript inside a script tag returned by an ajax response
$("#leftofad").ajax is not proper.
jQuery's $.ajax function does not use a selector.
What you can use is load:
$("#leftofad").load("Today.html?r="+genRand(), function(){
alert('loaded successfully!');
});
Everyone here has some good answers, but I believe there is a knowledge gap and we are missing some information. If I were you, I would add an alert to the script in the Today.html file right before the drawCirle. Then I would run this page using IE or Chrome dev tools or Firebug in Firefox. When the alert is displayed you can put a breakpoint in the javascript code. Then check your global scope to try and locate drawCirle...
Sorry this is not an exact answer, but with javascript files you need to use debugging tools for this.
while there isn't really a document.ready function for a div, there is a hack that works just as if so:
create your returning data as a full html page:
<html>
<head>
<script type='text/javascript'>
$(document).ready( function () {
do-this;
to-that;
....
});
</script>
</head>
<body>
<%
your possible vbscript
%>
the rest of stuff to be loaded into that div
</body>
</html>
Then, you can have as many cascading div loading from different page loading and .... rinse and repeat ... forever .... EXPERIMENT with different DOCTYPE to see the different results.
EDIT:
Then, of course, you load the original MAIN with
$('#thedivid').load('url-of-the-html-returning-page');
Which, in turn, can have the VERY SAME call in the returning page document.ready as, for example; $('#thedivid-inthereturningdata-html-page').load('url-of-the-html-of-the-child-process-for-whaterver); .... and so on.
Go ahead, PLAY AROUND and make wonderful ajax based applications ....