I have a div
<div id="pop2" class="pop-up1" style="display:none;">
<div class="popBox1">
<div class="popScroll1">
<h2></h2>
<p id="p1_id"></p>
</div>
<span>Close</span></span>
</div>
Back to links
</div>
I have an external file edit_invoice_details.php in which I want to post some data which I am doing through this jquery function
<script>
$(document).ready(function(){
$('table tbody tr').dblclick(function(){
//alert($("#myId2").text());
//showeditDiv($( "#myId2" ).text());
var invid=$("#myId2").text();
var pid=$("myId").text();
var dataString = 'inv_id='+ invid+'prod_id='+pid;
$.ajax({
type: "POST",
url: "edit_invoice_details.php",
data: dataString,
cache: false,
success: function(html)
{
alert("success");
$("#pop2").show();
$("#p1_id").html(html).show();
}
});
});
});
</script>
I want such a table such that when someone double clicks on it the div should open. Success alert is working fine. but I am not able to show that div. The divs content should be edit_invoice_details.php. Response text maybe
Any help is appreciated
Try this:
$("#pop2").style.display = "block";
if it dont work then there might be other problems. Let me know.
sometimes if you hardcode the property display in the html tag like you did here
<div id="pop2" class="pop-up1" style="display:none;">
when you tried to show the div it won't work, try set the display to none in the css instead of hardcode the css in the html tag, that happened to me and I fixed that way.
also with this code
$("#p1_id").html(html).show();
you are now showing the #p1_id selector, you are showing what is inside the #p1_id, tried some like
$("#p1_id").html(html);
$("#p1_id").show();
let me know if works for you the two possible issues that I wrote.
I think you need to use a & here:
var dataString = 'inv_id='+ invid+'&prod_id='+pid;
Related
So, basicly what I'm trying to achieve:
In index.php
I would enter products code to search for products information and it's images (that query is run in open_first.php, called via ajax post request).
It works just perfect..
When open_first.php is loaded, it displays me some images I can select from (when I click on the image, it's relevant checkbox get's checked containing the image id).
This works too, just fine.
BUT,
If I enter a code in the field: "productCodeCopy" and click on "confirmCodeCopy" -button it reloads the whole page, I mean index.php and everything I've entered is lost and I'm back in the starting point again. I don't understand why it does so. I suppose it has something to do with the fact, that the second ajax request is made from a dynamically created page (open_first.php)?? Do I miss something I should POST too?? Or what's the problem, this is really frustrating me since I've tried to fix this for hours now.
Note:
Jquery is loaded in index.php, open_first.php and open_second.php, I've just ignored that to keep the code simpler.
FILE: index.php (the "starting point")
<!-- head -->
<script type="text/javascript">
$(document).ready(function() {
$("#confirmCode").on('click', function(){
var productCode = $("#productCode").val();
$.ajax({
url: 'open_first.php',
type: "POST",
data: ({code: productCode}),
success: function(data){
$("#found").html(data);
},
error: _alertError
});
function _alertError() {
alert('error on request');
}
});
});
</script>
<!-- body -->
<input type="text" class="textfields" id="productCode" name="productCode" value="YT-6212">
<input type="button" class="admin-buttons green" name="confirmCode" id="confirmCode" value="Search">
<div id="found"></div>
FILE open_first.php
<script type="text/javascript">
$(function() {
$("#foundImage").on('click', function(){
$('#foundImage').toggleClass("foundImage-selected foundImage");
var myID = $('#foundImage').data('image-id');
var checkBox = $('input[id=selectedImages-'+myID+']');
checkBox.prop("checked", !checkBox.prop("checked"));
});
$("#confirmCodeCopy").on('click', function(){
var checkedItems = $('input:checkbox[name="selectedImages[]"]:checked');
// this code here reloads the whole page / view (as in "index.php")
$.ajax({
url: 'open_second.php',
type: "POST",
data: ({checked: checkedItems, copyTo: productCodeCopy, code: "<?php echo $_POST['code']; ?>"}),
success: function(data){
$("#copyToProducts").append(data);
},
error: _alertError
});
/*
// the code below runs just fine when I hit the button "confirmCodeCopy"
alert('Fuu');
return false;
*/
});
function _alertError() {
alert('error');
}
});
</script>
<!--BODY-->
<!-- these are dynamically generated from php, just to simplify we have checkbox that contains value "1" to be posted in ajax -->
<div class="foundImage" id="foundImage" data-image-id="1"><img src="image.jpg"><input type="checkbox" id="selectedImages-1" name="selectedImages[]" value="1" style="display: none;"></div>
<label for="productCodeCopy">Products code</label>
<input type="text" class="textfields" id="productCodeCopy" name="productCodeCopy">
<br /><br />
<label for="confirmCodeCopy"> </label>
<input type="button" class="admin-buttons green" name="confirmCodeCopy" id="confirmCodeCopy" value="Search">
<div id="copyToProducts"></div>
open_second.php only prints out POST variables for now, so nothing special yet.
SOLVED
So ok, I solved it. With dumdum's help.
I removed the line:
$('input:checkbox[name="selectedImages[]"]:checked');
And added this:
var checkedItems = new Array();
var productToCopy = $('#productCodeCopy').val();
$("input:checkbox[name=selectedImages[]]:checked").each(function() {
checkedItems.push($(this).val());
});
Since there was no form element present, it didn't get the field values unless "manually retrieved" via .val() -function.. Stupid me..
I don't know how much this affected but I changed also:
data: ({checked: checkedItems, copyTo: productCodeCopy"})
To
data: {"checked": checkedItems, "copyTo": productToCopy}
So now it's working just fine :) Cool!
WHen you apply event hander to a button or a link to do ajax...always prevent the browser default processing of the click on that element
There are 2 ways. Using either preventDefault() or returning false from handler
$("#confirmCodeCopy").on('click', function(event){
/* method one*/
event.preventDefault();
/* handler code here*/
/* method 2*/
return false;
})
The same is true for adding a submit handler to a form to do ajax with form data rather than having the form redirect to it's action url
your code $('input:checkbox[name="selectedImages[]"]:checked'); is returning undefined making the json data in the ajax call invalid. Check you selector there.
I have a page with text displayed in divs and spans. Next to each one I have an image that the user can click on.
When they click this image I need the text to change to a text area so the user can edit the text and then when they click of it it will need to call a php script to save to DB via ajax.
All divs and images have unique ID's so this should make it easier with the jquery selector.
Can anyone help? Everything I have tried so far is not really worked.
Thanks
You could make the div editable:
$(".ajax-div .on-img").on("click",function(ev) {
$(this).parent().find(".editable-text").attr("contenteditable", "true").after("<button onclick='saveEdits()'>Save</button>");
})
Your html structure would have to look like this
<div class="ajax-div" id="somediv">
<div class="editable-text">Editable text</div>
<img class="on-img" src="" alt="">
</div>
The saveEdits() function:
function saveEdits() {
$(".ajax-div").each(function() {
if(this.hasAttr("contenteditable") && this.attr("contenteditable")==true) {
id = $(this).attr("id");
//handle change
}
})
}
Let's say you have:
<div id='mydivparent'>
Some text here
<div>
<img src='images/mypic.jpg' id='mydiv' onclick='editr(this)' />
</div>
</div>
To do as your requirements suggest, an approach that would suffice is the below JS code.
<script>
function editr(obj)
{
var id = $(obj).attr('id');
var text = $('#mydiv'+parent).text();
$('#mydiv'+parent).empty();
$('#mydiv'+parent).append('<form action='form_processor.php' onsubmit="send_ajax($('textarea#'+id+').value)"><textarea id='+id+'>'+text+'</textarea><input type='submit' value='Save Text'></form>');
}
function send_ajax(txtValue){
$.ajax({
url: 'form_processor',
cache: false;
type: 'POST',
data: {'text': txtValue},
success: function(){
//Code to add the text to the div and delete the textarea returning it to a normal div
}
});
return false;
}
</script>
You should put in mind how to name the divs and images ids so that accessing a div's id from the image id is easy. You should use your own protocol so that if you have the image ID, you can get the asssociated div id, OR you can put the image inside the div so that it's as easy as selecting the PARENT.
After editing you can then set it up for ajax after the user.
The code is does not fully cover every situation for example if you click another imagebefore saving your first opened textarea but I believe that it will set you to the right road on the approach you should take.
I used jeditable plugin in the end to solve this one for anyone that finds this post
This piece of code (with another php file) grabs some content from a database and pus it into a div called about_content.
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').text(id)
});
});
});
Everything works, but can you tell me how I can modify this so the stuff fades in, instead of just being smacked right in... I'm not sure how to use the fadeIn function in this scenario..
Try..
$('div#about_content').css('opacity', '0').text(id).fadeIn();
you can do
$('div#about_content').hide();
$('div#about_content').html(id);
$('div#about_content').fadeIn(1000);
didnt test it, so im not sure you could try
This fades out the existing content then replaces the content and fade it in!
$(document).ready(function(){
$('a#about-menu').click(function() {
var id = $('a#about-menu').attr('class');
$.post('subpages/content_about/about_content.php',{id: id}, function(id){
$('div#about_content').fadeOut('fast',function(){ $(this).html(id).fadeIn(); });
});
});
});
DEMO
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!
Hello I am having trouble regarding div reloading when a new record has been added. What I wanted to do is to show first a loading image then after a record has been inserted it will reload the div.
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$.ajax({
//url: $(this).attr("href"),
success: function(msg) {
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index');
}
});
return false;
});
That's what I got to far when I'm trying the code it refreshes a whole physical of page on the div & not the desired div itself. . .
Sorry guys I am poor with jQuery and BTW this is in CodeIgniter.
Your problem is, that codeigniter obviously returns a whole html page. You have two choices:
Either return only a fragment (I don't know how to do this in CI) or use jQuery to parse out the div you want. This can be done with the following code, assuming that the div you want is named <div id="results_div">...</div>
$("a.follow").click(function(event) {
event.preventDefault();
$("#flash").show();
$("#flash").fadeIn(300).html('<img src="ajax-loader-transp.gif" />Loading Result.');
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index #results_div', function(){ $('#flash').hide(); });
});
Can you include the HTML with the #results_div div?
This is my best guess without html to work with:
$("a.follow").click(function(event) {
event.preventDefault();
// show the linke
$("#flash").fadeIn(300).html('Loading Result.');
//ajax load the 'mini div' result -- i guessed that this url pulls back the div you want
$("#results_div").load('http://localhost/<app_name>/index.php/<contoller>/index', function(data, text, xhr){
$('#flash').fadeOut("fast");
});
});