How to dinamically load page with JQuery and Codeigniter? - javascript

I'm using Codeigniter and Jquery with a basic template that works fine and loads my javascripts and css assets normally.
$this->load->view('header');
$this->load->view($content);
$this->load->view('footer');
In some content pages I have a link that loads the view by using on click function that calls the controller .
$(#linkid).on('click',function(){
url='url/path/to/controller/method';
$('#targetdiv').load(url);
}
The problem in using the code above, despite the page looks like embedded on template, it works like a independent page forcing me to duplicate tags on included page in order to make Jquery works fine, causing duplicated modals and overload the application. Any Idea to solve this?

Related

Javascript inside jquery-modal does not work - Laravel

I use https://jquerymodal.com/ package for modal dialogues, it works out great when I am in need of editing small forms, which I embed in the same document.
But issue is; I also use jquery-ui-datepicker and Chosen package (https://harvesthq.github.io/chosen/) for my forms. It seems that javascript does not work inside modal.
As noted on jquerymodal.com, i have tried both using embedded in html and ajax loading as below. I couldn't get it working. Below route returns a view where I have a form partial. (I tried with extending layout a file, where I have proper links to my js files..., this didn't work either).
<a href="{{route('form_edit',['projectid' => $project->id])}}" rel="modal:open">
Load Edit Form
</a>
Is this possible or should i be trying out something different for this?

Just adding js script to typo3

I have the following problem.
I have a typo3 page without any template I made by myself, but it gets in some way the style and the behavior of the other pages (I mean navigation, footer and so on). Now I have written some HTML inside the page by creating an HTML element.
In this HTML element, I included some js-code, which uses jQuery. The problem is, that the page loads the jquery at the footer and my scripts are loading before (in the HTML element). So my script does not recognize jQuery. How can I add my scripts at the whole end of the page? I know, that it has something to do with templates, but when I create a new template for the page, the whole content disappears.
Would be nice to get any help.
Cheers,
Andrej
It is usually good practice to read all your JS from a single file placed in the footer of the page. Add this to the setup section of your page template:
page.includeJSFooter.scripts = fileadmin/js/scripts.js
Then remove the JS from the HTML template and put into this file. This file could hold all your custom JS and possibly even all the libraries you use on the page (if you are not loading them from a CDN).
Bonus: the JS doesn't have to be re-loaded on every page view but can be read from cache.
For reference: https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#includejsfooter-array
I hope by template you mean a template record where you store your TypoScript? Otherwise this answer is not what you are looking for. :)
You can just add an extension template on your page that only adds to the rest of the TypoScript but does not override anything. To do so, go to the template module, choose "info/modify" in the dropdown at the top and use this button
Explanation: an extension template has the checkboxes for clearing the constants and the setup not checked and will not mess with the rest of your site's TypoScript:

better ways to load views using jquery

OK. Let me try to explain my problem. I have three pages index, profile, contact and three links or navigation buttons in the header. When user clicks on profile button profile.html is loaded dynamically from the server using jquery load() method and place it in the div called container. Same goes for all pages. Now I also load all of my jquery plugins including jquery shadow plugin, script.js and jquery library on the index page only once. Now what I have is that on profile page I have a div tag on which I want to apply a jquery shadow plugin in my script.js which is loaded in index page. But it does not work this way(no idea why). What I have to do to make it work is to add a script tag in profile page and inside this I apply this shadow plugin to div tag which is inside profile page.
So this is what I want to ask is, Is there a better way to load pages through ajax using jquery so that whatever javascript code I am applying to all of the pages should be applied to all pages?
Thanks in advance

JavaScript does not work on phonegap other than the first page?

I created a phonegap application, the first page navigates to the second page by "href".
in the second page, I have a JavaScript function that I want to execute.
The problem is that the page doesn't know the JavaScript, just if I copy the function to the
first page - it works.
I include the JavaScript in the page.
what is the problem?
For each page in the application you will have to include the JavaScript code you wish to execute on that page. For instance on page1.html you have a referenced function called getData() you will be able to call it on page1.html. If you follow a href to page2.html the function getData() is now out of scope. It is worth mentioning this is exactly how things work in web browsers.
The way around this is to move getData() to an external JavaScript file like main.js. Then you reference main.js via a script tag in both page1.html and page2.html. Now you'll be able to call getData() from either page.
Done use anchor tags with href values to change pages.
Use the jquery mobile function changePage http://jquerymobile.com/test/docs/api/methods.html
to change pages, as changePage wont load a new html fully but would load just the topmost jquert mobile "page" in that html file into the dom.

ASP.NET MVC Ajax.ActionLink

When i click on a Ajax.ActionLink, which displays a partial view, why does none of the javascritp associated with the partial view fire? This previously all worked before when I used Html.ActionLink. I have a series of scripts referenced in master page, which include $document.Ready functions. I have also tried added the script into the partial views themselves but they still don't fire. Any ideas?
javascript code dynamicly loaded into a div doesnt get recognised as executable code.
put the code in a function in a sepperate .js file, load this in your site.master and start executing by adding the
new AjaxOptions { oncomplete="myJavascriptFunction" }
to your Ajax.Actionlink

Categories