I am having trouble using the jQuery AJAX call. The query runs properly and debug output also shows the correct data, but anything apart from the first PHP conditional in the document being called is not being shown.
First, there are two buttons, one linked to "core" the other "email":
Here's the relevant JavaScript:
$("#core").click(function(){
loaddetails ("core");
});
$("#email").click(function(){
loaddetails ("email");
});
function loaddetails(type) { var query = "details=" + type;
$.post("details.php", query , function( data ) {
$("#d-features").html(data); alert (data);});
return false;
};
And the contents of details.php:
<? if($_POST['details']=='core'){ ?> blah1 <? }
if($_POST['details']=='email') { ?> blah2 <? } ?>
Both "blah1" and "blah2" appear in the alert box debug output. But, only "blah1" ever gets posted on the page div (#d-features), as "blah2" never appears on the page.
I have checked Firebug and there are absolutely no errors. But I suspect the second conditional request may have gone in a loop, as the alert window showing up when "email" button is clicked shows "Prevent page from creating additional dialogs", though no additional dialogs show up even when unchecked.
What is causing this problem and how to fix it?
.html() replaces the content instead of appending.
Try changing that line to see if all the data is returned from both calls:
$("#d-features").html(data); ==> $("#d-features").append(data);
A small modification on your code, you could try to see if this works:
function loaddetails(type) {
$.post(
"details.php",
{
details: type
},
function( data ) {
$("#d-features").html(data);
alert (data);
}
);
return false;
}
Ok, it seems to be a conflict with the tabs effect I loaded for a div that encompassed these links. So once I removed that effect, it works now. But I'm not sure what is wrong with the effect yet, I'll post another question to figure it out.
Thanks to those that offered assistance!
Related
I have GridView with data which works perfectly fine and everything loads correctly. I need to extract data from one column using button but the function will always return undefined even it's loaded correctly.
In same .cshtml file with grid and button I have this "simple" script with 2 functions:
<script id="dxss_1610925110" type="text/javascript">
function ShowValue() {
gridViewINS.GetRowValues(gridViewINS.GetFocusedRowIndex(), "Insolvency.FileNumber", gridViewINSOnGetRowValues());
}
function gridViewINSOnGetRowValues(value) {
alert(value);
}
</script>
Now when I click the button two alerts pop up. One is undefined. The second is literally snippet of my code which has the value in it which I need. So it can get somehow the data but why not directly to value property? I can't find what I am doing wrong. Any help will be appreciated.
I think you need to remove the parentheses () from gridViewINSOnGetRowValues().
Like so:
gridViewINS.GetRowValues(gridViewINS.GetFocusedRowIndex(), "Insolvency.FileNumber", gridViewINSOnGetRowValues);
I'm trying to load a div from another html page, then fill it with values from my main html page.
My div is correctly loaded and displayed, but it seems like it doesn't want to fill up. Here's what I have so far :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
});
So when I click on the "valider" button, my div is loaded and displayed, so far so good.
And here's where I'm struggling, I tried this :
if ($('ag_pub_panneau_detail_html').is(':visible')) {
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
but the div stays blank. So I tried this instead :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div", fillDiv());
$("#ag_pub_panneau_detail_html").show();
});
function fillDiv(){
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
}
But I get the same result. So I tried something else :
$("#valider").click(function() {
$("#ag_pub_panneau_detail_html").load( "https://tc610/ag_pub_collecte/Ag_pub_panneau_detail.html #ag_pub_panneau_detail_master_div");
$("#ag_pub_panneau_detail_html").show();
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
});
I was thinking that since the .show() works well, I could add my line below it, but it doesn't seem to execute either.
So I used to think that this line :
$('#ag_pub_panneau_entityid').val($('#ag_id_panneau').val());
Was wrong but when I execute it from the Chrome console, the field is correctly filled... I don't know what's happening, and I'm out of ideas for my issue.
Is there something I'm doing wrong ?
I can provide more code/details if you want to, just ask me
Any help would be greatly appreciated !
I managed to get it working, what I did is that I created a js file for the Ag_pub_panneau_detail.html page (the one that is loaded) in which I just wrote :
$(document).ready(function()
{
$('#ag_pub_panneau_entityid').val(localStorage.getItem("ag_pub_panneau_entityid"));
});
And now it works like a charm :)
By the way, can I know why I have those downvotes on my question ?
Anyway thanks for your help !
I want to display a JSON object on a html page. When I enter
productArray[0][0].xyz
into the Firefox console then I get a value back.
Question:
How can I display the value which is stored in this variable on a HTML page?
I have tried this (didn't work):
<div id="test">
<script>
window.onload = function()
{
var out = productArray[0][0].xyz;
document.getElementById("test").innerHTML = out;
}
</script>
Since it's working in console in browser, I guess it's a timing problem. You're probably trying to use the value in the json before the json data is loaded and ready to use.
Assuming you're running an xhttp request or ajax call or something you'll have to run the code AFTER data is loaded. Which often means running it inside successmethod.
Maybe this post and answer helps you locate the problem? NB: This uses Ajax, so feel free to update your post with some more information so we can help you with your solution / technologies.
Ajax success function
Assuming that missing div close tag is a typo most probably the productArray is not populated by the time your code executes. Can you post a more detailed snippet ?
var out = "your value";//productArray[0][0].xyz commented to show you running code uncomment it when you use this in you code. ;
document.getElementById("test").innerHTML = out;
<div id='test'></div>
You actually forgot to close the DIV tag.
I have an unsual problem and working on it since hours. My breakpoint doesn't get hit within the function yet the functionality works, it is driving me crazy. I have tried this with both Chrome/developer tools and Firefox/Firebug. I never had something like this before.
The first breakpoint hits when I click on the button New Conversation.
But then when I click on Cancel Button that comes through the jquery .load() the break point doesn't hit. Yet the functionality behind it executes (the div gets emptied).
What am I missing please?
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').click(cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').click(new_conversation);
}
Is there anything I am doing that breaks the javascript somehow?
EDIT:
Good idea with the alerts. here is the proof. Maybe its an environment issue? I have to try it on a different machine.
After lunch yesterday in my infinite wisdom I had my partial html that I was meant to load with $('#new_conversation_div').load(url, function() designed as a full blown html with header and body.
Hence once it was loaded into my div, the html markup became completely a mess (two headers, two bodies)
I moved the javascript file from the corrupted partial html into my main html and removed the header and body from the partial html. Now that I .load() the partial html, it all works as expected and the breakpoint hits. It was very hard to find.
Hope this helps someone else.
The only problem i can see in your code is that you don't unbind click event on #new_conversation_cancel_button when loading a new conversation.
If you use jquery >1.7, you should test following code:
function cancel_new_conversation(event){
//2nd Breakppoint below this line doesn't get hit, but the empty() statement works.
event.preventDefault();
console.log("cancel_new_conversation");
$('#new_conversation_div').empty();
}
function new_conversation(event){
event.preventDefault();
var url = $(this).attr("href") + "/";
$('#new_conversation_div').load(url, function(){
//1st Breakpoint gets hit.
$('#new_conversation_cancel_button').off('click').on('click',cancel_new_conversation);
});
}
$(document).ready(function (){
$('#new_conversation_button').on('click',new_conversation);
});
Here's what's happening.
My page loads. Then jQuery loads a feed which is injected into a contentCol div...
in that feed is:
Comment
There is also:
<div class="storyItemComments" id="storyItemComments_66" style="display:none;">....
For some reason this is not working:
$(".commentWrite").live("click",function(){
cmt2open = $(this).attr('name');
$("#" + cmt2open).show();
return false;
});
Any ideas? The only thing I can think of is that it has something to do with the fact that I am using jQuery AJAX to load in the content which the LIVE statement above is referencing....
thanks
on most occasions people should use the die() function before the live... so that will clear any previews instructions and that function is only triggered once...
another thing could be that the instructions are called before the contents are retrieved from the ajax. therefore you should use .success to check if the ajax was successfully loaded and then trigger the click instructions.
as it seems that the <div id="storyItemComments_66" has not been picked up from the DOM.
Following from your comment to this answer
Can you try the following instead of show()?
$("#" + cmt2open).attr('display', 'block');
Can you place your javascript inside;
$(document).ready(function(){
//your code here
});
Not sure this will fix it but it's good practice I find.
Also have you alerted out your variables to see what you get?
What is the error you are getting if any?
Have you tried putting an alert at the top of the function to see if the click event works?
edit
let me know if the above does not fix it and I'll remove this answer to clear out the noise