Please help me out here.
I have a file index.php, relevant portion (Jquery is loaded earlier):
<div id="test"></div>
<script type="text/javascript">
$('#test').load("table.php");
</script>
And a file table.php. If no variables are given, an unfiltered table is shown. When table.php loads, it also loads a select field, like:
<select name="testfield" id="testfield" onchange="javascript:setactionfilter();">
<option value="1">Test</option>
<option value="2">Test2</option>
</select>
After that, a script to reload table.php in that testdiv with filtered results:
<script type="text/javascript">
function setactionfilter(){
$('#test').load("table.php?action=".document.getElementById('testfield').selectedvalue);
}
</script>
The problem is that my browser tells me that the getElementById is null, in other words, it can't find my select field in the page.
Any idea what I am doing wrong?
Change the . to +
Concatenation is done with + in javascript e.g string3 = string1 + " " + string2
$('#test').load("table.php?action="+document.getElementById('testfield').value);
The .load function is asynchronous, so performing operations that requires the data immediately will fail. Instead, use the callback functionality of the load function:
$('#test').load('table.php', function() {
// Do your stuff here!
});
Putting your code in the callback function ensures that table.php is loaded and ready when the code is run.
Related
Hello every one I am working in laravel but today I am stuck
please some one help me , iwant to get response from ajax inside select>option in html.
my modal is working perfectly. and other data like input fields text, date, file are perfectly shows but in select>option there is an error!
<script>
function editJobs(id){
$.get('/jobsEditRoute/'+id, function(response){
$("#id").val(response.id);
$("#job_titleE").val(response.job_title);
$("#apply_start_dateE").val(response.apply_start_date);
$("#last_dateE").val(response.last_date);
$("#a").attr("src","images/"+response.job_adv_image);
$("#job_descriptionE").val(response.job_description);
**$("#job_for_districtE").val(response.job_for_district);**
document.getElementById("job_for_districtE").innerHTML = "response.job_for_district";
$("#editing_product").modal('toggle');
// alert(response.job_descriptionE);
});
}
</script>
Current District
<option value="hlelo" **id="job_for_districtE"**></option>
</select>
</div>
</div>
Hi I am printing the ajax html response to div element and giving radio input option to select the file. after selecting the specific file the another div should show the message. but the ajax html response is not working
Jquery script:
$(document).ready(function()
{
$('#upload').ajaxForm({
beforeSubmit: function() {
$('#Analysis').show();
$('#Content_column').hide();
$('#file_list').show();
$('#trait').show();
$('#trait').html('Submitting...');
},
success: function(data) {
var $out = $('#file_list');
$out.html('       File list:');
$out.append('<div id="list">');
$('#list').html(data);
$out.append('</div>');
}
});
});
The output of this script is
<ul class="php-file-tree"><li class="pft-directory">Genotypic<ul><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/jquery.txt" />jquery.txt<br><input id="Penotypic" type="radio" name="uploads/Genotypic/" value="uploads/Genotypic/marker.csv" />marker.csv<br></ul></li><li class="pft-directory">Other</li><li class="pft-directory">Penotypic<ul><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/namPheno.csv" />namPheno.csv<br><input id="Penotypic" type="radio" name="uploads/Penotypic/" value="uploads/Penotypic/perl.pl" />perl.pl<br></ul></li></ul>
Jquery script:
$('#Penotypic').click(function() {
var $out1 = $('#trait');
$('#trait').show();
$out1.append('Submitted...');
});
this is not showing anything in the div trait. may be the html response is loading as a tesxt so the #Penotypic is not recognised. please help me to fix this.
Thanku
You have many inputs of id="Penotypic". Make every id unique or use classes as function trigger.
I wouldn't use "/" in the name attribute. See: http://www.w3.org/TR/html401/types.html#type-name
Then try if your ajax script does work. If it doesn't work, try if it works from static page (don't use your first jQuery script, but it's output as a static form). You probably need to bind your event trigger. Use jQuery's on().
I found some close answers for this, but none of them worked in my case. I have:
Input tag:
<input name="title" id="title">
Ajax:
<script language="javascript">
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="/img/ajax-loader.gif" /></p>');
setTimeout('example_ajax_request_go()', 0);
}
function example_ajax_request_go() {
$j(document).ready(function () {
var inputField = $j('#inputText').val();
$j(".button").click(function () {
$('#example-placeholder').load('preview.php?title=' + title + ' .aClass');
}
</script>
Button to call the function:
<input type="button" onclick="example_ajax_request()" value="Preview" />
I'm trying to pass 'title' var from the input tag via ajax to 'preview.php'. This code above has errors and is not running, can you suggest correct one? Thanks!
You have not put in exact error messages (from your browser's console, please put them in and update your question). I am just putting across some suggestions/improvements:
Whenever you are passing GET parameters, always URIEncode the value(the xyz and value in url?abc=xyz&blah=value). In javascript there is a function call EncodeURIComponent(..). You would use it like:
'preview.php?title=' + EncodeURIComponent(title +' .aClass')
A possible typo, you have have a space in the URL, before the + ' .aClass'. If you need one, explicitly replace it with a + or %20.
Found a way. Here it is:
<script type="text/javascript">
function example_ajax_request() {
$('#example-placeholder').html('<p><img src="img/ajax-loader.gif" /></p>');
$('#example-placeholder').load("preview.php?title="+$('#title').val());
}
</script>
Thanks!
I just started using Ajax with jQuery and PHP. I have a working code (below) which inserts some HTML code to a HTML container (div called nav sub).
Next time I try to run a similar code to the one below on my generated HTML, jQuery don't seem to find it. I guess it don't update it self about it when it's added.
$(".nav.top a").click(function(){
var a_class = $(this).parent().attr("class");
$(".nav.sub").html("loading...");
$(".nav.sub").load("<?php echo get_bloginfo('url'); ?>/?addmod_ajax=1",{button: a_class});
return false;
});
Let's say the generated code looks like this:
<div class="nav sub">
My new generated button, forgotten by jQuery?
</div>
And the new container looks like this:
<div class="settings"><?php # AJAX ?></div>
Is it some way to use jQuery and Ajax on HTML code generated with jQuery?
I figured it out. The solution is to use "live".
$('.nav.top a').live( 'click', function() {
var a_class = $(this).parent().attr("class");
$(".nav.sub").html("loading...");
$(".nav.sub").load("<?php echo get_bloginfo('url'); ?>/?addmod_ajax=1",{button: a_class});
return false;
});
My html document looks like this:
<html>
<head> .. load jquery and other stuff </head>
<body>
<div id="cool_container">
<div class="cool">.. no script friendly markup ..</div>
</div>
<a id="cool_link">Link</a>
<script>
function installStuff(){
$('.cool').coolPlugin();
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
}
$(document).load(function(){ installStuff(); });
</script>
</body>
</html>
Of course, /anothercooldiv.html gives another <div class="cool"> .. etc ...</div> fragment.
So what's the best way to turn the fresh cool div into a coolPlugin without breaking everything (and writing some nasty hacks) ?
It'd would be great to be able to either:
Call installStuff with a default jQuery context '#cool_container', so I could call something like:
$.doThisInContext(function(){installStuff();}, $('#cool_container');
In the load callback.
Or, have an equivalent of 'live' (that would solve the problem of links if cool contains links), but on an element existence, that I could use like that in my function installStuff:
$('.cool').exists(function(what){ what.coolPlugin() };
Then the coolPlugin would be installed on all cool elements now and in the future.
I'd suggest the .livequery() plugin for this still:
$(function() {
$('.cool').livequery(function() {
$(this).coolPlugin();
});
$('#cool_link').click(function(){
$('#cool_container').load('/anothercooldiv.html');
});
});
The important bit:
$('.cool').livequery(function() {
$(this).coolPlugin();
});
Will run for every current and future .cool element as they're added, running the plugin on each.
Applying the plugin to the newly ajax loaded content shouldn't be too tricky:
$('#cool_container').load('/anothercooldiv.html', function() {
$(this).coolPlugin();
});