I'm trying to post data to a new window (using window.open) from a popup that was opened with the window.open method. What I'm trying to do is pass the selected option value to the newly opened window and load data using $_POST.
Here's what I tried:
$(document).on('click', '.openForm', function()
{
var select = $(this).data('select'),
val = $('#'+ select).val();
$.post('/path/to/page.php', {id: val}, function(res)
{
window.open('/path/to/page.php');
});
});
and currently page.php has a var_dump of $_POST which returns empty. It also opens the page in a new tab instead of a new window - I think this is to do with giving the open windows unique names?
I'm not sure how to get it so $.post works with posting to the same page and opening it with the sent data - any links or solutions you know of that could work?
Thanks :)
Modify your script like this:
<script type="text/javascript">
$(document).on('click', '.openForm', function()
{
var select = $(this).data('select'),
val = $('#'+ select).val();
$.post('/path/to/page.php', {id: val}, function(res)
{
console.log(res);
var myWindow = window.open("", "MyWindow", "width=600,height=600");
myWindow.document.write(res);
//window.open('test_json.php',1,'width=600, height=600');
});
});
</script>
1) var_dump of $_POST returns empty. Because your both request $.post('/path/to/page.php') and window.open('/path/to/page.php'); will be different. 1st treated as post and after completion of it window.open('/path/to/page.php'); will be arise which will be get request.
2) To open window on same not in new tab you have to pass its width and height as 3rd parameter in window.open() method.
Related
I have multiple information boxes, with short info echoed from the database. at the bottom of each box is "more information" when click this triggers a modal.
The issue: at the moment when "more information" is clicked it displays the same information regardless of which info box was clicked.
The objective: When more information is clicked i need the respective information to be displayed. Some how referencing that row number X needs to be displayed when "more information" is click on that information box.
I tried is, but it didn't work:
jQuery(document).ready(function($) {
$('.moreinfo').click(function(event) {
var a = $(this);
// Get ID
var currentID = parseInt(a.data('id'));
$.ajax({
type : 'post',
url : 'ajax.php', // in here you should put your query
dataType: 'json',
data: {'vac_id': currentID}, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success : function(json)
{
// Change the ID in modal
var m = $('#moreinfo'), mBody = m.find('.panel-body');
// Update new content
$('#vac_id').text(json.vac_id);
$('#vac_post_date').text(json.vac_post_date);
$('#vac_job_title').text(json.vac_job_title);
$('#vac_comp_name').text(json.vac_comp_name);
$('#job_description').text(json.job_description);
$('#vac_ess_one').text(json.vac_ess_one);
$('#vac_ess_two').text(json.vac_ess_two);
$('#vac_ess_three').text(json.vac_ess_three);
$('#vac_ess_four').text(json.vac_ess_four);
$('#vac_ess_five').text(json.vac_ess_five);
$('#vac_ess_six').text(json.vac_ess_six);
$('#vac_ess_seven').text(json.vac_ess_seven);
$('#vac_ess_eight').text(json.vac_ess_eight);
$('#vac_ess_nine').text(json.vac_ess_nine);
$('#vac_ess_ten').text(json.vac_ess_ten);
$('#vac_des_one').text(json.vac_des_one);
$('#vac_des_two').text(json.vac_des_two);
$('#vac_des_three').text(json.vac_des_three);
$('#vac_des_four').text(json.vac_des_four);
$('#vac_des_five').text(json.vac_des_five);
$('#vac_des_six').text(json.vac_des_six);
$('#vac_des_seven').text(json.vac_des_seven);
$('#vac_des_eight').text(json.vac_des_eight);
$('#vac_des_nine').text(json.vac_des_nine);
$('#vac_des_ten').text(json.vac_des_ten);
$('#vac_deadline').text(json.vac_deadline);
$('#apply_link').text(json.apply_link);
m.modal('show');
}
});
event.preventDefault();
});
});
Here you can see the modal and modal trigger: FIDDLE
Any help is genuinely appreciated.
Here's how I used to create dynamic modal/dialog:
var modal = $('#mymodal');
modal.find('.modal-title').text(newTitle); // Change modal title (optional)
modal.find('.modal-body').html(somethingNew); // Change modal content
modal.show();
For example: https://jsfiddle.net/3ey8tyz3/
I suppose when you load modal for the first time it gets cached and every time returns the same content.
You might need to clear the modal first and then reload on the basis of your id.
You can do-
$('#myModal').on('loaded.bs.modal',function(e){
}).on('hidden.bs.modal',function(e){
$(this).removeData('bs.modal');
});
Wrap this into a function and call it on document.ready
I have very limited knowledge with scripts so I hope you guys can help me with a simple solution to a small problem that I have...
I'm using the following jquery function to refresh a div with new content when a link is clicked
<script>
$(function() {
$("#myButton").click(function() {
$("#loaddiv").fadeOut('slow').load("reload.php").fadeIn("slow");
});
});
</script>
My problem is, I need to send 2 variables to the reload.php page to use in a mysql query (I have no idea how to accomplish that), also I need to make multiple links work with this function, at the moment I have multiples links with the same id and only the first link works so I guess I must associate different ids to the function in order for this to work, how can I do that?
here's the page where i'm using this: http://www.emulegion.info/teste/games/game.php
You may want to use document ready instead of function on your first line as this will make sure the code is not executed until the full page (and all elements) have loaded.
You can then use the callback functions of the fade and load to perform actions in a timely manner.
additional variables you can add after the .php, these can then be read in your reload.php file as $var1 = $_GET['var1'];
Do make sure to sanitize these though for security.
<script type="text/javascript">
// execute when document is ready
$(document).ready(function() {
// add click handler to your button
$("#myButton").click(function() {
// fade div out
$("#loaddiv").fadeOut('slow',function(){
// load new content
$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
}); // end load content
}); // end fade div out
}); // end add click to button
}); // end document ready
</script>
For different variables you could add a HTML5 style variable to your button.
<input type="button" id="myButton" data-var1="foo" data-var2="bar" />
You can retrieve this when the button is clicked:
// add click handler to your button
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
...
load("reload.php?var1="+var1+"&var2="+var2
if you have multiple buttons/links I would use class instead of id "myButton". that way you can apply the function to all buttons with the above script. Just replace "#myButton" for ".myButton"
First, you should use .on('click', function() or .live('click', function() to resolve your one click issue.
You'll want to do something like:
<script>
$(function() {
$("#myButton").on('click', function() {
var a = 'somthing';
var b = 'something_else';
$.post('url.php', {param1: a, param2: b}, function(data) {
//data = url.php response
if(data != '') {
$("#loaddiv").fadeOut('slow').html(data).fadeIn("slow");
}
});
});
});
</script>
Then you can just put var_dump($_POST); in url.php to find out what data is being sent.
Try creating a function that would accept parameters that you want.
Like:
$(document).ready(function(){
$('.link').click(function(){
reload(p1,p2);
});
});
function reload(param1, param2){
$("#loaddiv").fadeOut('slow').load("reload.php?param1="+param1+"¶m2="+param2).fadeIn("slow");
}
But by doing the above code your reload.php should be using $GET. Also you need to use class names for your links instead of id.
<script type="text/javascript">
// execute when document is ready
**$(document).ready(function() {**
**$("#myButton").click(function() {**
**$("#loaddiv").fadeOut('slow',function(){**
**$("#loaddiv").load("reload.php?var1=foo&var2=bar",function(){**
// content has finished loading, fade div in.
$("#loaddiv").fadeIn('slow');
});
});
});
});
</script>
$("#myButton").click(function() {
// get vars to use
var var1 = $(this).data('var1');
var var2 = $(this).data('var2');
I need to run a PHP code from external server when user clicks a link. Link can't lead directly to PHP file so I guess I need to use AJAX/jQuery to run the PHP? But how can I do it and how can I pass a variable to the link?
Something like this?
<a href="runcode.html?id=' + ID + '"> and then runcode.html will have an AJAX/jQuery code that will send that variable to PHP?
use something like this in you page with link
Some text
in the same page put this somewhere on top
<script language='javascript'>
$(function(){
$('.myClass').click(function(){
var data1 = 'someString';
var data2 = 5;//some integer
var data3 = "<?php echo $somephpVariable?>";
$.ajax({
url : "phpfile.php (where you want to pass datas or run some php code)",
data: "d1="+data1+"&d2="+data2+"&d3="+data3,
type : "post",//can be get or post
success: function(){
alert('success');//do something
}
});
return false;
});
});
</script>
on the url mentioned in url: in ajax submission
you can fetch those datas passed
for examlple
<?php
$data1 =$_POST['d1'];
$data2 =$_POST['d2'];
$data3 =$_POST['d3'];
//now you can perform actions as you wish
?>
hope that helps
You can do this with an ajax request too. The basic idea is:
Send ajax request to runcode.html
Configure another AJAX to trigger from that page
Considering, this as the markup
<a id="link" href="runcode.html'">Test</a>
JS
$("#link").on("click", function() {
$.get("runcode.html", { "id" : ID }, function(data) {
//on success
});
return false; //stop the navigation
});
While working with jQuery and PHP a problem occurs with loading new data from "give-me-more-results-below-the-div.php".
I have the tooltips working below with '.live', but the values of the new loaded content are not available.
Now, how would one get info from new data, loaded in a div, but (naturally) not showing in the page code? :-)
As you can see, I only need three variables to pass: main_memberID, like_section and the like_id.
I'm seriously lost here. So any help is highly appreciated.
So far, I got this on the jQuery functioning part:
$(".ClassToLike img[title]").live('hover', function() {
$('.ClassToLike img[title]').tooltip({ position: 'center left', offset: [0, -2], delay: 0 })
});
$('.like_something').live("click", function (event) {
var value = $(this).attr ( "id" );
$(this).attr({
src: '/img/icons/checked.gif',
});
$(".tooltip").live().html('you like ' + this.name);
$.ajax({
type : 'POST',
url : 'like_something.php',
dataType : 'json',
data: {
main_memberID: $('#main_memberID').val(),
like_section: $('#like_section').val(),
like_id: this.id,
},
success: function(){ //alert( 'You have just clicked '+event.target.id+' image');
},
error: function(){
alert('failure');
}
});
});
I often id the div like
<div class="like_something" id="div_memberID_sectionName_anotherID"/>
Then
$('.like_something').live('click',function(){
var info = $(this).attr('id'); // get the id
var infoArr = info.split('_'); // split the id into an array using the underscore
// retrieve your values
var memberID = infoArr[1];
var sectionName = infoArr[2];
var id = infoArr[3];
});
To fix the problem, first open up your browser's requests panel, in Chrome it's a "Network" tab in Dev tools. When you click .like_something, is a request sent? And are there any console errors? If the request is sent, look at the Response tab and see what the server is sending back.
Also, you could store the data you need to send with the request in an attribute with the data- prefix, like this:
<a href="#" class="like_something" data-section="section" data-member-id="Member id">
...
</a>
This is most likely not your exact HTML, but you get how it works.
Then you can retreive it in the jQuery like this:
data: {
main_memberID: $(this).attr('data-member-id'),
like_section: $(this).attr('data-section'),
like_id: this.id,
},
I hope this helps!
Still getting the hang of working on this site, but this one is my closing (as posted under Nathan's answer):
Super thanks for the input you all! Nathan gave me the best way to retrieve and pass the info I needed. Again, this place is great. Thanks for all the efforts!
I want to basically create a link which says:
Click here to show contact information
Upon clicking it, it will ping a script via an ajax request, the ajax request will look up the user table where the ID is what is contained in the alt tag, it will return a certain field from the database and then the div will change from this link, to a contact number.
I'm sure some of you have seen this done before, for example:
Click to see persons phone number
They click it, and it changes to their phone number.
How would I go about doing this? I want to do it using ajax instead of having the phone number in the source code, because that really defeats the purpose of them having to click to reveal if bots can get it from the source code.
Thanks :)
Somethign along the lines of
$("#reveal").click(function(){
$.get('getphoneNumber.php',{id:$(this).attr('alt')}, function(data) {
$('#reveal').html(data);
});
});
with a php script called getphoneNumber.php that accepts a get parameter of id
Try this one
$('#reveal').click(function () {
var th = $(this);
$.get('/get-the-phone-number', { id: th.attr('alt') }, function (response) {
th.text(response);
});
});
Also, I'd recommend you put the id number inside a data-contact-id attribute and access it via th.data('contact-id') instead of using the alt attribute. Ignore me if you have other reasons to do this.
$("#reveal").live('click',function(event) {
var link = $(this).attr('alt');
var dataString = 'alt=' + link ;
$.ajax({
type: "POST",
url: "url",
cache:false,
data: dataString,
success: function(data){
this.href = this.href.replace(data);
}
});
}
Click here to show contact information
<div id="myHiddenDiv"></div>
$("#reveal").click(function(){
$.get("test.php", { id: $(this).attr("alt") },
function(data){
$("#myHiddenDiv").html(data);
$("#myHiddenDiv").show();
});
});
This example works assuming you've only got one of these "plugins" on your site, if you'll have multiple, use this:
Click here to show contact information
<div class="myHiddenDiv"></div>
$(".reveal").click(function(){
var divSelector = $(this).next("div");
$.get("test.php", { id: $(this).attr("alt") },
function(data){
divSelector.html(data);
divSelector.show();
});
});