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!
Related
i am trying to use toggle buttons to save response in db as yes or no. for some reason the only response i am getting is 'on'. even when i switch off the button. i tried searching for problem and got a match but the problem was asked for android platform.now i am stuck with no answer there where similar questions but none of them is useful for me at this moment. sharing the code down below.Thanks in advance for those who are going to suggest or provide a solution.i am using class handicap to save data into variable inside JQUERY and then send that variable to AJAX page to perform db operation.i am not sharing CSS for toggle as i don't think that is required right now. if u need any additional info, do inform me.this input is inside a form with method POST. i am using a submit button with id that is calling this JQUERY.
html part
<div class="switch">
<input id="cmn-toggle-4" class="cmn-toggle cmn-toggle-round-flat handicap" type="checkbox" name="handicap">
<label for="cmn-toggle-4"></label>
</div>
jquery
$("#save-medical-1").click(function () {
var m11 = $(".handicap").val();
alert(m11);
$.ajax({
url: "ajexupdate.php",
type: "POST",
data: {smsgs11: m11},
dataType: 'text',
cache: false,
success: function (e) {
// alert(e);
$("#user_medical_form").html(e);
$("#medidetail").modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
}
});
return false;
});
You can get value using ":checked" using jquery.
eg.
if($("#cmn-toggle-4").is(":checked")){
m11="yes";
}
else{
m11="no";
}
and send it through ajax.
By writing a php command you are setting the initial value of that input into m11. You have to catch the client side value of input instead:
your code:
var m11 = '<?php echo $_POST['handicap']; ?>'; // always returns the initial value
Correct clien-side code:
var m11 = $(this).val();
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.
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
I'm trying to load div content based on the a href being clicked and pass in a parameter. For example, Link 1
Clicking on Link 1 will pass value "3" to process.php, and return back the value "apple is good for you".
However, I can't seem to be able to pass the value without having a submit button. Anyway I can pass the parameter to another php file to process, and return the value?
$(document).ready(function(){
$("#testing a").live("click", function(evt){
var id= $(this).attr('id');
$.post("process.php", { id: id },
function(data) {
alert(data);
$('#result').load(data);
});
})
});
Below is my HTML
<div id="testing">
hello
</div>
<div id="result"></div>
Appreciate your help, thanks a lot!
You shouldn't be using numbers for id values. Instead, prefix them with a letter, or consider adding them to a data- atribute on the element.
Additionally, $.live() is deprecated, and we are encouraged to use $.on() from here on out for event delegation. I've gone ahead and handled this in the code below, but the id issue remains.
Lastly, $.load() and $.html() aren't the same. If you want to load data into an element, you don't call the load method (though the name could lead to that confusion).
// Short-hand version of $(document).ready();
$(function(){
// Handle anchor clicks on #testing
$("#testing").on("click", "a", function(e){
// Prevent links from sending us away
e.preventDefault();
// POST our anchor ID to process.php, and handle the response
$.post("process.php", { 'id': $(this).attr("id") }, function(data){
// Set the response as the HTML content of #result
$("#result").html(data);
});
});
});
From your process.php file, you might have something like the following:
$msg = array(
"...chirp chirp...",
"This is response number 1",
"And I am the second guy you'll see!",
"Apples are good for you!"
);
$num = $_POST["id"] || 0;
echo $msg[ $num ];
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();
});
});