I have the following link which opens a jquery modal window:
<div id='confirm-dialog'><a href='#' class='confirm'><img src='1.png' /></a></div>
and the following JS code which processes it:
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("Are you sure you want to delete item id='IDNUMBER'.", function () {
window.location.href = 'path to php process script';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["30%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
I am unable to solve two issues:
How do I pass the ID variable (perhaps other variables) into the javascript function so that when I submit 'yes' on the confirmation window, the php path will include something like : http://www.pathtophp.com?ID=12345
How do I display the ID variable within the popup text (shown as: ...delete item id="IDNUMBER"...)
You could simply in the head of the page the PHP generates (before including the other JS files) add
<script type="text/javascript">
//Assumes id is passed in the URL
var id = <?php print $_GET['id'];?>;
</script>
Then the variable "id" is available to all JavaScript functions on the page.
Alternatively, if there are multiple links on the page you are wanting to apply this functionality to, you could add the id to the rel attribute of the anchor tag:
<a href="javascript:void(0)" class="confirm" rel="<?php print $id;?>">
Then you'll modify your jQuery function to
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("Are you sure you want to delete item id='"+ e.currentTarget.rel +"'.", function () {
window.location.href = 'http://www.pathtophp.com?ID=' + e.currentTarget.rel;
});
});
});
for 1 you can use like below
var value= "<%=value from server side%>"
Related
The following function is inside a page (mainpage.php) which I load dynamically into a tab (tabcontent.php) .
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
$.ajax({
url: 'noticejob.php?step=get&ds='+id,
method: 'GET'
}).success(function(response,status) {
...
});
});
I call this function by this link, which is inside the tabcontent.php
<i class="fa fa-pencil"></i>
All works fine.
Now I want to start this function over a url call for adding links into other pages to open the mainpage.php and start with this function (should open a modal).
For Example: mainpage.php?start=edit&ds=123
Is it possible and in which way?
You can just print the JS you need to execute in the PHP page.
...
?>
<script>
$(function() {
foo();
});
</script>
<?php
...
To open the modal automatically, either create a JS function that opens the modal and call it (with the previous method), or do
<script>
$(function() { $('.editlink').click(); });
</script>
Ok, now it works,
i've put a new (named "edit_function") js function into the mainpage.php with the "old" code of the "$('.editlink').on('click', function() {..."
after that i call this function from the mainpage if there is a url parameter. I do it into the php file and create a dynamicaly js code
if($_GET['job']=='new')
{
$p['JS']='edit_function("'.$_GET['detail'].'");';
}
at the other hand i call the function for the tabcontent.php page in this way
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
edit_function(id);
});
for me it works
This question already has answers here:
How do I pass variables and data from PHP to JavaScript?
(19 answers)
Closed 8 years ago.
I have a button in my php page :
<button id="myButton">Delete me</button>
and in that page I have a variable which I want to pass to a JavaScript function, and this is my JS code :
<script>
$(function() {
$('#myButton').confirmOn('click', function(e, confirmed){
if(confirmed) {
//Here I'll use the variable
}
})
});
</script>
How can I do that ?
I think you might be wanting to put a variable through PHP on your button and pass it to your function using jQuery data. Check this out:
<button data-confirmed="<?php echo $confirmed; ?>" id="myButton">Delete me</button>
And in your js:
$(function() {
$('#myButton').on('click', function(e){
// get jquery object access to the button
var $thisButton = $(this);
// this gets that data directly from the HTML
var confirmed = $thisButton.data('confirmed');
if(confirmed) {
//Here I'll use the variable
}
})
});
Basically, you can access variables in javascript using this method if you are interpolating PHP vars directly on the page. If this isn't what you are looking for, please let me know in comments.
<button id="myButton">Delete me</button>
<input type="hidden" name="variable" id="variable" value=2>
<script>
$(function() {
$('#myButton').confirmOn('click', function(e, confirmed){
if(confirmed) {=
alert(document.getElementById('variable').value);
//Here I'll use the variable
}
})
});
You can declare the variable outside the click event like so:
$(function() {
var confirmed = true;
$('#MyButton').confirmOn('click', function() {
if(confirmed) {
// do stuff
}
});
});
Assuming you're talking about passing php variables to Javascript, you can do this when writing to the page, ex:
<?php
$passThis = 'Passing'
?>
<script language="javascript" type="text/javascript">
var sStr = "My name is <?php echo $passThis ?>.";
document.write(sStr);
</script>
You could also get integer values, doing something like
$integerValue = 5;
var int = "<?php echo $integerValue; ?>";
int = parseInt(int);
By modifying this, you could use it to pass more types of variables, so assuming you have something like this:
<?php
$text = 'someText';
?>
<script>
$(function() {
$('#myButton').confirmOn('click', function(e, confirmed){
if(confirmed) {
//Here I'll use the variable
}
})
});
</script>
you could do
<script>
$(function() {
$('#myButton').confirmOn('click', function(e, confirmed){
if(confirmed) {
console.log("<?php echo $text ?>");
}
})
});
</script>
to make Javascript alert 'someText'.
I have a requirement to get a variable from PHP to Javascript when clicked by the user. I have an array of data returned by a query and I need to pass an ID value for the element clicked so that I can populate an additional data set via the .load using another PHP page. I am unsure how todo this?
Javascript Code in Page:
<script type="text/javascript">
$(function () {
$("#pass_userid_div").click(function () {
$("#another_div").load('remote_pages/get_info.php?userid=' + $GET_THE_USERID_AND_PASS_HERE);
});
});
</script>
PHP Code in Page:
$query_str = "SELECT id, username, dateregistered FROM users";
$query = mysql_query($query_string) or die(mysql_error());
while ($results = mysql_fetch_array($query)) {
print "<div id='pass_userid_div'>{$results['username']}</div>";
print "<div>{$results['dateregistered']}</div>";
}
Why must it be a div? Use an interactive element:
PHP:
while ($results = mysql_fetch_array($query)) {
print "<button type='button' name='pass_userid_div' value='{$results['id']}'>{$results['username']}</button>";
print "<div>{$results['dateregistered']}</div>";
}
JavaScript:
<script type="text/javascript">
$(function () {
$("button[name='pass_userid_div']").click(function () {
$("#another_div").load('remote_pages/get_info.php?userid=' + $(this).val());
});
});
</script>
Update: If it really must be a div, use a data- attribute:
<div class="pass_userid_div" data-userid='{$results['id']}'…
…$(this).data("userid")
$("#another_div").load('remote_pages/get_info.php?userid=' + $GET_THE_USERID_AND_PASS_HERE, function(){
$("#another_div #pass_userid_div").each(function(){
var yourvar =$(this).text();
// use your var
})
});
Please not you should not use more then one div whith the same id. Use class instread
I have a form with number of submit type as images. Each image has a different title. I need to find out the title of the clicked image. But my click function inside form submit is not working.
My form is:
<form action='log.php' id='logForm' method='post' >
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" title="<?=$url;?> id="<?="image".$j?> class="images" />
<?
}
?>
</form>
Jquery:
$("#logForm").submit(function(e)
{
$(".advt_image").click(function(event) {
var href=event.target.title;
});
var Form = { };
Form['inputFree'] = $("#inputFree").val();
// if($("#freeTOS").is(":checked"))
Form['freeTOS'] = '1';
$(".active").hide().removeClass('active');
$("#paneLoading").show().addClass('active');
var url="http://"+href;
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
setTimeout( function() { location=url }, 2500 );
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
How can I get the title value of clicked image inside this $("#logForm").submit(function())?
How can I use the id of clicked image for that?
You can use event.target property
$("#logForm").submit(function(e)
alert($(e.target).attr('title'));
});
http://api.jquery.com/event.target/
[UPDATE]
I just realized it wouldn't work. I don't think there is a simple solution to this. You have to track the click event on the input and use it later.
jQuery submit, how can I know what submit button was pressed?
$(document).ready(function() {
var target = null;
$('#form :input[type="image"]').click(function() {
target = this;
alert(target);
});
$('#form').submit(function() {
alert($(target).attr('title'));
});
});
[Update 2] - .focus is not working, but .click is working
http://jsfiddle.net/gjSJh/1/
The way i see it, you have multiple submit buttons. Instead of calling the function on submit, call it on the click of these buttons so you can easily access the one the user chose:
$('input.images').click(function(e) {
e.preventDefault(); //stop the default submit from occuring
alert($(this).attr('title');
//do your other functions here.
});
// Runtime click event for all elements
$(document).on('vclick', '.control', function (e) { // .control is classname of the elements
var control = e.target;
alert(e.currentTarget[0].id);
});
if you are not getting proper message in alert, just debug using Firebug.
Check following code you can get the title of clicked image.
Single click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").click(function(event) {
alert(event.target.title);
});
return false;
});
});
Double click
$(document).ready(function()
{
$('#logForm').submit(function(e){
$(".images").dblclick(function(event) {
alert(event.target.title);
});
return false;
});
});
add following ondomready in your rendering page
$(document).ready(function(){
$("form input[type=image]").click(function() {
$("input[type=image]", $(this).parents("form")).removeAttr("clicked");
$(this).attr("clicked", "true");
});
});
Now in your form's submitt action add follwing behaviour and yupeee!... you got it!....
$("#logForm").submit(function(e)
{
var title = $("input[type=image][clicked=true]",e.target).attr("title");
.....
.....
});
I have a onclick event on a submit button in my CI app. So when user clicks submit, it goes to my js function that disables the button, but it does not continue processing. I used this “document.forms[“mainFrm”].submit();”, but because of the way the code is written I need it to go directly to a controller and finish processing.
So how do I call a CI controller from my js function?
Here is the function that is being called onClick:
function disableWhenSubmit()
{
alert ("You did get here");
var holdBtnElement = document.getElementById('btn_Add');
holdBtnElement.disabled = true;
holdBtnElement.value = "sending ...";
//document.forms["createRequestForm"].submit();
<?= base_url();?>index.php/request"; //this is what I am working on
}
and here is the button:
input type="submit" id="btn_Add" name="btn_Add" value="Submit">
index.php
<script>
// create a global var before calling your external
// javascript file(s).
var BASE_PATH = "<?php echo base_url();?>";
</script>
<script src="link_to_myjavascript.js"></script>
myjavascript.js (jQuery example)
(function($){
$(function(){
var do_ajax = function(some_params){
$.ajax({
url : BASE_PATH + 'controller/method',
});
}
if(conditions)
{
do_ajax(some_params);
}
});
})(jQuery);
Look at ajax call.
Using prototypejs or Jquery
<input type="button" onclick="dosomething()" />
example
<script>
function dosomething() {
var url = "something.php";
new Ajax.Request(url, {
parameters: {//parameters},
onSuccess: function(transport){
// do something when response is good
},
onFailure: function (request) {
// Do something when somehting goes wrong
});
}
</script>