I've got this masonry generated list which originally comes from a mysql database. When I'm trying to append new data to the list, also from the mysql database via an external php, the new data just ends up on top of the 'old' data and not below it.
I'm guessing it's because the masonry function doesn't work because the same thing happens when I'm appending without the masonry line at the end.
The jQuery which brings the new data looks like this:
$('.loadmore').click( function(){
$.post('db_loadmore.php',{value:value}, function($data){
$('#list').append($data).masonry('appended', $data );
});
});
And the external php is just a simple mysql_fetch_array which puts the data inside of which is the same as the existing list.
Is it even possible to append new data from a mysql database or am I just doing it wrong?!
I found the error and fixed it. Apparently you have to have the same container in both the main masonry function and the append masonry. Hope it make's sense..
Related
I'm trying to create minimalistic content management system with ckeditor using node and express as a server. I would definitely want to implement the inline editing capabilities of ckeditor, but I'm having no success in sending the data to server and finally to nosql (mongodb) database.
I would like to have multiple inline editors within a page and to save to my database them simultaneously upon a POST event. I have my editor instances in invividual divs with an attribute contenteditable="true". Editor instances launch just fine, but when I'm trying to grab the data in my controller, all I have is an empty object. I can get the data from input fields, but then I lose the inline editing features. I've tried tinkering with bodyparser, but no success. All my divs containing the editable content lay under a HTML form element.
I would be more than happy is someone could at least point me to a general direction of how to accomplish this. Sorry if I was unable to make my self clear posting this question :)
tldr; How can I parse data from HTML elements, other than input-fields and text areas, in node/express with bodyparser?
Content of non-input fields won't be posted in a form, so you can't do that. A couple options come to mind:
Use JavaScript to update hidden inputs on the page as those divs change. Updated content will be posted.
Use JavaScript to make the POST, on save grab the contents, post them to the server, and then after that make the redirect from client side.
I'm trying to render the HTML for a content item to a string from within a controller action. Technically I just want to get the "body" part of it without any header/footer stuff. I want to do this so I can get a content item rendering the way I want once, and then display it as a normal orchard page OR by requesting the HTML for the content item via ajax to display it in a div in a JavaScript app. I don't want to have to manually render everything in the JavaScript as that would be duplicating the layout logic I already did. I want to re-use the bulk of the server side rendering so any changes are reflected in my normal orchard page and my JavaScript page. I've been digging into the code and searching everywhere and have gotten close but not all the way there.
I found these:
How to render shape to string?
Using FindView in Orchard
In my controller I have:
var shape = _contentManager.BuildDisplay(contentItem);
Using either of the two methods above, I can render that shape to an HTML string in my controller. All was golden. I was getting the body of that page and using it in JS. Then, I changed a placement file:
<Place Parts_Common_Body="Content:1" />
was changed to:
<Place Parts_Common_Body="/AsideFirst:1" />
The body moved where I wanted it (AsideFirst) in my normal Orchard page but disappeared from the HTML retrieved using the two methods above.
If I look at shape.Content.Items after the BuildDisplay call, I can see the item for the body is no longer there... why is it not rendering all the zones? Or, I guess a more specific question is why is the BuildDisplay method not building the complete shape? Is there a way I can make this work?
I tried a million different things and eventually got this working. Not sure I totally get it yet, but I think the problem had to do with the fact that I was using shape.Content and I'd moved stuff out of the Content zone. And maybe when I was looking at what the BuildDisplay method was returning I was just not looking at some newly created zone that actually did had the stuff I thought was missing. Clearly I need to learn more about zones and shapes... Anyway, I have a new zone called "MainInfo" now that I created in a placement file. I get a MainInfo property on the main shape returned form BuildDisplay and pass shape.MainInfo to the view rendering code and all seems to be working well now.
I want to display an image on a webpage on the basis of what the user enters in a form. I have the form defined in abc.jade, and in abc.js I store everything from the form, and generate the image's url and store it in a variable map_img on the basis of the form. How do I set an image's source in jade to point to map_img URL?
abc.js:
sales.save();
markers = [{ 'location': sales.location }]
var gm = require('googlemaps');
var map_img = gm.staticMap(sales.location, 16, '500x400', false, false, markers);
In general, what is the best way to manipulate fields in an HTML/Jade document from node/express?
Im not sure if i get your question right...
There are severals ways to send data.
Mostly described here: http://jade-lang.com/reference/
I usually use #{img_map} or in the case you have to get pure html its better to use !{img_map_html_desc}.
Also, the alternative variant, create #temp div, send data there. Than on the front end js(on window.onload) you can get that data and store to the variable. Don't forget to clear the #temp div after you dont need that anymore.
Once i've used side front-end js module and couldnt find better sollution, than this. Cause that module waited for window.onload, and than started to load itself...
I'm playing around with masonry.js for a gallery/album view.
I've succesfully used the script to display a thumbnail of albums. When the user clicks the thumbnail I want the album thumbnails to be removed and then replaced with the thumbnails of the images within the album.
The album images are passed to the script via ajax and are in html format
I can remove the items using this code $container is a jquery object of the masonry container:
var obj = $('.item');
$container.masonry('remove',obj);
$container.masonry('reloadItems');
$container.masonry('layout');
I then append the new thumbnails using this script - data is the html of the new elements.
var $newItems = $(data);
$container.append($newItems).masonry('appended', $newItems);
$container.masonry('reloadItems');
$container.masonry('layout');
This loads the new thumbnail elements and organises the layout. However because of the append it places them at the bottom of where the removed thumbnails were.
If I use prepend the images are placed at the top of the element as expected but I'm then left with loads of white space where the removed items were.
I've also tried html() to insert the new items - a layout is applied but the height of the container becomes inconsistent and some items overlap the bottom of the container.
So:
How can I remove items and clean up the layout
How can I add new items and clean up the layout
Thanks
Having the same issue, and saw a related issue here https://github.com/desandro/masonry/issues/381:
$container.masonry('remove',obj);
$container.masonry();
This seemed to work a little bit better for me.
The issue is solved in the new version. Following code snippet worked for me (I'm using Masonry version 4.1.1).
var $newItems = $(data);
var $obj = $('.item');
$grid.masonry( 'remove', $obj);
$grid.append($newItems);
$grid.masonry( 'appended', $newItems ).masonry('layout');
Even here, calling layout method is mandatory. Not calling layout method will append new items in the bottom of the page.
I'm using ajax in Rails 4 to load this form. Using select2-rails gem, it renders properly when the document loads:
After I click update, it loads the view partial:
but when I click on edit, the styling doesn't show up, and only the default bootstrap styling shows up:
How do I get this last image to show the select2 styling from the first image? I think it has to do with how select2 styling is loaded when the document is first loaded, but would appreciate a solution. Here is my stylesheet below:
$(document).ready(function(){
$("#e9").select2();
})
Allen:
Hello again by the way...
I had a similar problem in rails 4 and it had to do with turbolinks.
link: http://guides.rubyonrails.org/working_with_javascript_in_rails.html#how-turbolinks-works
In your JS file change your document ready to the function name below, then add the two commands just below the function, which are also below. This may be your issue as well because your page initially loads correctly, however when turbolinks is working, it tries to load only previously loaded files to quicken the load process and may skip your document ready function. Let me know if this helps... (Jake - DBC).
var select2Gem = function(){
$("#e9").select2();
};
$(document).ready(select2Gem);
$(document).on('page:load', select2Gem);