I have an empty modal on my page and I'm performing an ajax call as below (simplified for reading)
function returnIt(x)
{
$.ajax({
type:"POST",
url:"link",
data:{id:"123"},
success: function(data)
{
data=JSON.parse(data);
var content=document.getElementById("returnItModalBody").innerHTML;
for(var i=0;i<data.length;i++)
{
if(data[i]["nick"]==1)
content+="<p>"+data[i]["upd"]+"</p>";
else
content+="<p>"+data[i]["upd"]+"</p>";
}
alert(content);
$("#returnItModal").modal('show');
}
});
}
When I tell the script to alert with content it shows it should show in modal.
When modal opens, there is nothing in its body.
What am I missing here?
Thanks
var content=document.getElementById("returnItModalBody").innerHTML;
That copies the value of innerHTML (a string) to content.
content+="<p>"+data[i]["upd"]+"</p>";
Then you assign a new string to content
alert(content)
Then you look at the string in content
You never change innerHTML.
If you want to change innerHTML then you have to assign a new value to it.
Related
I need to get from 'page'+i a container div with id = 'posts1', but I'm struggling to add a .getElementById or similar to this function:
$.get('page-'+i, function(data){
content = data;
$('#posts').append(content);
});
I've tried adding it on content, data and putting 'page'+i in brackets and then adding .getElementById but nothing works, i'm always getting that what i'm doing isn't a function or error 500 (Internal Server Error).
Edit:
This is the full function:
function showMore() {
if (i<=196) {
$.get('page-'+i+' #posts' , function(data){
content = data;
$('#posts').append(content);
});
i++;
}
This is activated on a click of a button.
I need to append, after the existing articles in #posts, more articles that are for ex in page-2 in the div with id 'posts1'.
I've found where was my issue:
function showMore() {
if (i<=196) {
$.get('page-'+i , function(data) {
var content = $(data).find('#posts1');
$('#posts').append(content);
});
i++;
}
}
I've added .find to my data and it's working perfectly.
You can use template literals and .load
If i is 1, then this will read a page with filename page-1 and insert the element from that page with id="post1" into the element with id="posts" on current page
$('#posts').load(`page-${i} #post1`)
Added to a simpler version of your function
function showMore() {
if (i>196) return;
$('#posts').load(`page-${i} #posts`);
i++;
}
So, I have a jQuery AJAX call that gets data from the server (some text, some links).
Inside AJAX success callback function I got a .on that is bind to <a> that load for me next page and get me the text of the clicked link (let's say stackoverflow.com).
The problem starts here because in the newly loaded page I got anchors...
After every click on anchor links I got new .text() value.
$.ajax({
url: url,
type: type,
dataType: dataType,
success: function(data){
$('.container').append(data);
$('.container').on('click', 'a', function(e){
e.preventDefault();
var clickLinkName = $(this).text();
console.log(clickLinkName);
$('.container').load($(this).attr('href'));
});
}
});
I would like to know how to lock clickLinkName variable. OR any other way to save only first hit.
I think this would do the trick:
$.ajax({
url: url,
type: type,
dataType: dataType,
success: function(data) {
$(".container").append(data);
var clickLinkName; // Declared here.
$(".container").on("click", "a", function(e) {
e.preventDefault();
// If not initialized, initialize.
if(!clickLinkName) {
clickLinkName = $(this).text();
}
console.log(clickLinkName);
$(".container").load($(this).attr("href"));
});
}
});
That would save only the first value in the variable clickLinkName. This answers your question, but I'm sure there are better ways of doing this.
I have a table that i load with AJAX and edit with Jeditable.
This is how i start my function:
function refresh_page() {
var tableElm = $('#refresh');
$.ajax({
url: 'assets/php/ritsys/my_table.php',
success: function(data) {
if (!($("*:focus").is("textarea, input, select, date, time")) ) {
tableElm.html(data)
}
$(function(){
$('.edit').editable('assets/php/ritsys/save.php', {
indicator : '<img src="assets/css/smoothness/images/ui-anim_basic_16x16.gif">'
});
});
setTimeout(refresh_page, 1500);
}
}); };
This works fine and i added the if (!($("*:focus").is("textarea, input, select, date, time")) ) { line because i had problems with the data refreshing while i was editing something in the table.
But after i added this everytime when i update a value in the table firstly it shows me the indicator image, then the old value and after that the new value.
Before it would briefly show the indicator and then the new value. Can somebody help me to cut out the step where it shows the old data?
It would be greatly appreciated!
Does the script assets/php/ritsys/save.php return the "new" value? You should return the "new" value, not the "old" value. The returned value will be shown when the request is complete.
I have list of tables,
<table id="<%#DataBinder.Eval(Container.DataItem, "Certificate")%>" class="tbl_evenSearchResultRow" onmouseover="this.className='ResultGridRowSeleted'" onmouseout="this.className='tbl_evenSearchResultRow'" onclick="return SynopsisWindowOpen(this)">
onclick of each i use next function:
function SynopsisWindowOpen(obj) {
var title = $(obj).find("strong[name='title']").html();
var isParentools = 0;
if (window.location.href.indexOf('recent_releases.aspx') > -1)
isParentools = 1;
var url = "/ratings/Synopsis.aspx?logoonly=1&Certificate=" + obj.id + "&Title=" + encodeURIComponent(title) + "&parentools=" + isParentools;
$("#ratingModal").on("show.bs.modal", function (e) {
$.ajax({
url: url,
cache: false,
dataType: "html",
success: function (data) {
$("#ratingModal").find(".modal-body").html(data);
}
});
});
$("#ratingModal").on("hide.bs.modal", function (e) {
$(this).find(".modal-body").html('');
});
$("#ratingModal").modal('show');
return false;
}
By url i render body of modal : i get certificate from request.query and according to it render body
LoadSynopsisContent(Request.QueryString["Certificate"], Request.QueryString["parentools"]);
Problem : when i click at first - everything seems to be good, on second click in modal body firstly rendered body of first click and then of second click. And so on.
I don't know where is problem.
Firstly i use jquery load function, but then i change to simple ajax call with disabled caching.
Move the all event bindings to outside of the function and everything should work fine.
Thus, these parts should not be inside the function:
$("#ratingModal").on("show.bs.modal", ....);
$("#ratingModal").on("hide.bs.modal", ....);
Here is one way you could organize your code:
var url; //a global variable ... not a good idea though
function SynopsisWindowOpen(obj) {
....
url = .....
}
$(function() {
$("#ratingModal").on("show.bs.modal", ....);
$("#ratingModal").on("hide.bs.modal", ....);
});
However, the way would be to not use inline JavaScript but to take advantage of the power of jQuery to separate structure from behavior.
UPDATE
Instead of using a global variable url you can store the new url in a data attribute of the modal. Then you can get it from there when the modal opens.
In the function:
//calculate the url
var url = .....
//store the url in the modal
$('#ratingModal").data('table-url', url);
In the modal event handler:
$("#ratingModal").on("show.bs.modal", function(e) {
//retrieve the url from the modal
var url = $(this).data('table-url');
//use the url
$.ajax({ url: url, .... }):
});
I have a function in jquery that submit a form that is working fine, but i need different types of reaction according to the response, sometimes i need to show a message, sometimes reload the window, and other relocate the window
I have a problem with this last part, i dont know how can i detect that is a url, and change the location.
this is my script jquery
function process_form(type_form, id_content_error){
var url = "url.php?form="+tipo_form;
var response= document.getElementById(id_content_error);
response.style.display='block';
$.ajax({
type: "POST",
url: url,
data: $('#'+type_form).serialize(),
success: function(data)
{
if (data==1){
window.location.reload();
}else{
response.innerHTML=data;
}
}
});
return false; // Evitar ejecutar el submit del formulario.
};
My php returns 3 types of sentences,
"1": when i need to reload the window.
"messaje": when i need to show something.
"some_url.php":when i need to relocate the window.
sorry for my english, and thanks
I resolve it adding this in the sucsess function
}else if (data.search(/.php/)!=-1){
window.location = data;
}