I wanted to add a onClick function when I click on the link.
Basically, whenever I click on "Click" it should add the liquid code in the div.
What it is doing is, adding a liquid code yes, but just the code and not the content it should be adding with the liquid code. Here is my code:
Index
Click me!
<div id="result"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$("#myLink").on("click", function(){
$("#result").load("liquidcode.html");
});
</script>
liquidcode.html
{% include 'cod-checker' %}
What I get after clicking on "Click Me" is this {% include 'cod-checker' %}
Liquid is rendered server-side so you will not be able to render liquid after the page loads using jquery. You can circumvent this issue by inserting whatever code resides in 'liquidcode.html' from the very beginning, but hiding it by adding a class to the div with display set to none. You can then remove that class when the user clicks on "Click".
Answering here to expand my comment, since there was a request for actual code from the question author.
My comment, which is the basis of the anser:
I would suggest making an AJAX request on click then, to an endpoint
from your server. Make that endpoint provide a parsed html version of
your liquidcode.liquid (just assuming the filename here).
On client side, jQuery-aided AJAX looks like this:
$("#myLink").on("click", function() {
$("#result").load("myAwesomeServerEndpoint", function() {
console.log('BOOM, server-parsed HTML was successfully loaded inside #result');
});
});
As for server side, I really have no clue what framework you are using. (Ruby on Rails?)
In an MVC fashion, you need to register a route called "myAwesomeServerEndpoint".
Assign a Controller to that route, say "myAwesomeServerController".
This Controller is not supposed to do much, it should just render your liquicode.liquid template.
Pseudocode for your controller (since I dont know Ruby on Rails):
return HtmlResponse(render("liquicode.liquid"));
Make sure that the response is sent as HTML and that the route is exposed to AJAX requests, and that should be it.
Again, this is not a solution but just a rough concenpt
Related
So I've got this little piece of HTML that I have zero access to, and I need to change the URL of where it's linking, to somewhere else.
Now I've looked around, and I've tried different approaches and non seem to work so I must be doing something wrong.
the Html code:
<div class="manageable-content" data-container="edit_register_ind_container">
<a class="entry-text-link secondary-step step-button" id="register_ind_container" href="oldurl">Register</a>
</div>
First I wanted to try something that seemed easier, which was to change the displayed text "Register" to "Start a Fundraiser"
This is what I have got for that part:
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$("#manageable-content a").text('Start a Fundraiser');
});
$("#register_ind_container").attr("href", "http://google.ca");
});
No luck so far for any of it.
a little background information:
I am using a platform called Luminate/Blackbaud, its a CMS with a weird set up. header tags and stuff like that go in a different place than the html body and the css is somewhere else as well (but I'm just using ftp to reference it in the header).
How I'm referencing the javascript code.
<script type="text/javascript" src="../mResonsive/js/urlmanipulation.js"></script>
My css works so I'm certain this should to, but I just don't know why it isn't.
All suggestions welcome (except for asking for the html access because I have, 3 weeks ago lol)
Thank you for your time!
I saw your both code :
$("#register_ind_container").attr("href", "http://google.ca");
This line will execute on page load so href should be changed on load
$("#register_ind_container").click(function(){
But when you performing this click on Id
it wont work because at that instance this id associated with an hyperlink
so hyperlink having the default subset rules
for Overriding this you can try
$("#register_ind_container").click(function(e){
// custom handling here
e.preventDefault();
$(this).text('Start a Fundraiser');
});
But this is also not a Good Practice. Hope this helps !
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser');
$(this).attr("href", "http://google.ca");
});
});
You are changing the URL outside the click event.. Wrap it inside the click event.. Also make use of $(this)
// url manipulation
$(document).ready(function(){
$("#register_ind_container").click(function(){
$(this).text('Start a Fundraiser').attr("href", "http://google.ca");
});
});
I am trying to write a fix for my client's problem - his main form, which is rather large and spans many tabs, has includes to content which include modal forms (so if you have a list of widgets associated with your profile, a popup form could allow you to add another). The modals aren't working because they create a form within a form, so I thought I could just push them down to the end of the page like this:
$('body').append('#modalFormID');
But this isn't working because it seems like the browser is stripping the 2nd form tag out of the DOM before document.ready can fire. I've created a jsFiddle here:
Any help is appreciated.
Thanks,
Rob
ok, here is what I'm thinking. Inside the includes, wherever there is a form, I'll wrap it in a div tag which also includes data attributes for the action and method like so:
<div id="wrap_form1" class="formwrap" data-action="/myscript.php" data-method="POST">
<form action="/myscript.php" medhod="POST">
... form stuff...
</form>
</div>
with something in the global page script to resurrect the form if it gets erased by the browser.
$('div.formwrap').each(function() {
if (!($(this).find('form').length) {
var formtag='<form class="nestedform" action="'+$(this).attr('data-action')+'" method='+$(this).attr('data-method')+'>';
$(this).html(formtag+$(this).html()+'</form>');
}
})
and then we still have to move it down so it is outside of the main form.
$('form.nestedform').each(function() {
$('body').append($(this));
});
Any thoughts?
this is my javascript function :
<script>
function text() {
var i = new Array();
{% for content in table %}
i[{{content.id}}]= document.getElementById('checkbox{{content.id}}').checked;
{% endfor %}
return i;
}
</script>
as you can see I have some django template code in It. how to prevent caching of my script ?
I see this but It didn't solve my problem !
I'm not sure I've understood properly, but as far as I can tell this has nothing to do with caching: it is a matter of understanding when templates are rendered vs when scripts are executed.
This script is contained in a template. That template is rendered on the server side. Therefore, the script will be generated - and sent to the browser - with the values of content as they were at that point.
If you have an Ajax function which later updates something in the HTML page, this script will not care at all, because you have done nothing to update it - again, the values in the script were hard-coded when the template was sent to the browser.
You probably don't want to do it this way at all. Instead, you should find or define a parent element that contains all the checkboxes - a div or table row, for example - and then dynamically iterate through all descendants of that element to find the value of any checkboxes. You can then call this script from your Ajax function to update the values when the content changes.
I've got a website and I'd like to make a part of it static. What happens is that the header, the menu bar and the footer are consistent in every page. I'd like to have them always loaded and when I click the menu button, it will only reload what is the body of the site.
Is there a simple chunck of code that can early achieve this? Something in js or ajax? I'm sorry but I don't have enough experience in these languages to accomplish something on my own. I've already tried to check jQuery library but it's still pretty confusing to me.
Thank you.
I think you don't even need Ajax or css!! Just use iFrames!! They are awesome, what happens is that u only design one page as the holder of your static content (Header-Menu ...) and put one iFrame in there as a place holder for any page you want to load in it, u should use proper css code to place the iFrame where you want, now, for every link in your menu, just set the "target" attribute equal to your iFrame's name and all the links will be loaded in that iFrame and your page won't be reloaded with every link click... I'll be back with some code...
Just add in every page a div container with ID for header, menubar and footer and just load it with this:
$(document).ready(function(){
$('#header').load('header.html');
$('#menubar').load('menubar.html');
$('#footer').load('footer.html');
});
Just make sure that the html files don't have html, head or body tags within, only the HTML-Code you would write inside the div. It's just like the include function in PHP.
EDIT:
For easy and simple implementation store the code above inside a .js file (e.g. include.js) and add this inside every head just below the include of all other scripts of your html files:
<script type="text/javascript" src="include.js"></script>
EDIT2:
Another solution ist to load the content of the page instead of the header, menubar, footer.
Here you take the same specifications (no html, body, etc. tags inside your content html files)
Name your content div e.g. <div id="content"></div>
Your navbar for example:
<div id="navbar">
Content1
Content2
</div>
JavaScript Code:
$(document).ready(function() {
//Click on a link that's child of the navbar
$('#navbar > a').click(function() {
//Get the html file (e.g. content1.html)
var file = $(this).attr('href');
//Load this file into the #content
$('#content').load(file);
return false;
});
});
You should consider the use of Server Side Included : http://httpd.apache.org/docs/current/howto/ssi.html
It's not quite easy to understand (as it refer to apache configuration), but this is a really great solution.
In a nutshell, you include parts of html code in you main page :
<!--#include virtual="/footer.html" -->
You won't have to use or understand all JQuery Framewol, user agent won't have to parse (if they are able to !) Javascript.
This is a pretty good replacement of PHP / ASP / Java for this kind of purpose.
You could use ajax to request the body of each page. But this is only one possibility - there are many. An other approach could be to create you page content using a script language (php, perl) serverside and employ a function there which adds footer, header and anything else to each page.
If you have an idea of Jquery then use click event on menu links to load the page in a div like the following syntax may help you.
$(document).ready(function(){
$("a.menu").click(function(){
$("#bodyContent").load("http://abc.com/your-linked-page.html");
});
});
To load the url dynamically use the following code:
In your menu bar the link looks like:
Home
In your Jquery code:
$(document).ready(function(){
$("a.menu").click(function(){
url = $(this).attr("title"); // here url is just a variable
$("#bodyContent").load(url);
});
});
Step 1: Add Jquery file into your html page.
Step 2: Use the above jquery code and change your menu link to the new what i said here.
Step 3: If you done it correctly, It will work for you.
How about a traditional iframe?
In your menu:
<a target="body" href="URL_to_your_Menu1_page">Menu1</a>
and then further in the document:
<iframe name="body" src="URL_to_homepage"></iframe>
You may use frameset and frames and organize you pages accordingly. So, frames containing menus can always be at display and while displaying contents on click of menu u may set target to frame in which you would like to load the contents.
I'm fairly new to the whole JQuery/javascript world, but I've managed to wack together a working jqgrid with a datepicker & custom control (used jquery auto complete) based on code samples i found on the net. I've added the code to a T4 template in my project as it'll probably act as a base/starting point for most pages. (Side note. I'm using asp.net MVC)
JFIDDLE: LINK
1.) I'd like to move the initDateEdit & initDateSearch to the same function (using a parameter, to disable/enable the showOn property) as they are basically similar.
2.) How would be the best way to set nonWorkingDates from outside the new function/file. same applies to the autocomplete_element (I'd like to specify the url)
Changing
"function nonWorkingDates(date)" to => "function nonWorkingDates(date, nonWorkingDates)"
isn't working, (guess it's got got something to do with how its gets called "beforeShowDay: nonWorkingDates")
Thanks in advance!
If you have a chunk of JS code like this:
<script type="text/javascript">
... code goes here ...
</script>
You simply copy the whole thing, eliminate the containing script tags, and save the raw code
... code goes here ...
to a file, which you then include with:
<script type="text/javascript" src="yourfile.js"></script>
However, since you're using jquery, you'll have to make sure that this above snippet is placed AFTER the script tag that loads up jquery, or you'll get a "no such function" syntax error.