Javascript inside jquery-modal does not work - Laravel - javascript

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?

Related

Why Twitter Timeline is not getting loaded in based on variable in Vue.js component?

I am trying to load the twitter timeline of multiple accounts based on the route. For example, if someone requests a specific page, twitter timeline for a specific account is loaded on the page.
I tried using one plugin called vue-tweet-embed but it was not working at all, So, I tried the old way. I included twitter's widgets.js in my main HTML file and tried including timeline with static code as given below.
Static Code
<a class="twitter-timeline" href="https://twitter.com/Google?ref_src=twsrc%5Etfw">Tweets by Google</a>
Now, I want to show Twitter timeline of multiple accounts based on the variable. My variable is a property of one object, So, Here is the code I am trying to use. Note that above given static code works even in a Vue component.
Dynamic Code
<a class="twitter-timeline" data-height="500px" v-if="isLoading===false" :href="'https://twitter.com/'+service.twitter_handle+'?ref_src=twsrc%5Etfw'"></a>
But the dynamic one is not working. I checked with inspect element and the markup being generated by the code is perfectly fine. But it is showing nothing. It is not loading a twitter timeline when the code is dynamic.
Here's the generated markup:
<div class="card-body">
<a data-height="500px" href="https://twitter.com/Google?ref_src=twsrc%5Etfw" class="twitter-timeline"></a>
</div>
I don't know what's wrong, Trying to solve this since last 3 hours but nothing seems to work.
Tell the Twitter JavaScript library to reload your widgets by calling twttr.widgets.load() wrapped in $nextTick after changing the twitter_handle property.
$nextTick(function () { twttr.widgets.load(); });
With $nextTick you make sure that Vue rendered the HTML with all changes before executing the code.

Update CSS Variable with Javascript On page load without causing a flicker or glitch

I am using one HTML file as the template for many pages and want to show different coloured buttons and links on some pages. I am trying to use CSS VARIABLES so that I can update them with javascript. But it all happens once the JS is loaded which causes a glitch.
Can anyone suggest a better solution or any alternative approach?
Project uses Jquery, Bootstrap and a Laravel backend.

How to dinamically load page with JQuery and Codeigniter?

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?

ASP.NET WebApp don't work with Custom Template (from store)

I have jQuery based template from themeforest and
i building on this ASP.NET Web Application.
But i have a problem, when my javascripts files
from template are included, my asp.net things
don't work how should, eg. dropdownlist events
not rising... When i comment javascript templates
file then everything works fine.
Someone can help me solve this?
Thanks,
Many jQuery UI elements (dialog, for example) are rendered at the end of the BODY tag. This means their contents are moved outside the FORM tag, and are thus ignored by ViewState. This will prevent their associated events from being triggered (and will prevent their updated data from making it back to the code-behind at all).
If you use firebug to examine the rendered HTML, you should be able to confirm whether this is the root cause of your problem.
If so, see this SO discussion for a resolution / workaround. HTH

Facebook likes Not Working when javascript add

So i am trying to add a like to my individual posts. So i added this to each of the posts. The posts are generated from database output then assembled with the properly styling in a javascript file.So i added this to the creation mix.
<fb:like href="my_not_so_sweet_website" layout="button_count" show_faces="true" width="200"></fb:like>
Weird part is... None of them show up. THEN i try taking that code that i generated for each post and just copy and paste it to the top of my website, and low and behold A like Button!!!. Any clues? Need more info? Help?
You are using what's called FBML. The like button is rendered on the fly (well, on page load) by a facebook javascript libabry you include on the page- it needs the FBML tags to know what to render.
The problem is that the FB library isn't smart enough to know that you've dynamically added these FBML tags to the DOM.
There is another type of like button that's an iframe, that one should work if you put it in the DOM dynamically. Docs for that are here: http://developers.facebook.com/docs/reference/plugins/like/
-when you enter your info into the widget there will be an option for iframe.
There is also a FBML render function in the FB javascript SDK. Docs are here: http://developers.facebook.com/docs/reference/javascript/fb.xfbml.parse/

Categories